td.ui-datepicker-week-end a {
  background: #ffd4d4 !important;
}

/* Controle de visibilidade e alinhamento do Menu Superior */
header#pc .container-fluid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  /* max-height:50px removido: a modernização define a altura via --topbar-h (58px) */
  padding-left: 15px !important;
  padding-right: 15px !important;
  width: 100% !important;
  max-width: 100% !important;
}

header#pc .navbar-header {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
  margin-right: auto !important;
  /* Cola na esquerda e empurra o resto */
}

header#pc #navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  /* Permite que o container cresça até o fim */
  margin-left: auto !important;
  /* Empurra para a direita */
  background: transparent !important;
  border: 0 !important;
  float: none !important;
}

header#pc .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
}

/* Forçar Fundo Dark no Dashboard e Body */
.theme-5 body,
.theme-5 #main-container,
.theme-5 .main-content,
.theme-5 .page-content,
.theme-5 #container-principal {
  background-color: #070a0f !important;
  /* Mantém um leve tom verde sutil pro body */
  color: #fff !important;
}

.theme-5 #pc,
.theme-5 .sidebar,
.theme-5 #sidebar,
.theme-5 .sidebar:before,
.theme-5 #menu,
.theme-5 .menu-lateral {
  background-color: #0b0f19 !important;
  border-color: #1a2333 !important;
}

.theme-5 #pc {
  border-bottom: 1px solid #1a2333 !important;
}

/* Botão de minimizar menu (minimize-menu / minimize-menu-relatorio) */
.theme-5 .hide-menu {
  background-color: #1a2333 !important;
  color: #b3ff2b !important;
  border: 1px solid #2d3142 !important;
}

#mobile {
  display: none;
}

#pc {
  display: flex;
}

@media (max-width: 991px) {
  #pc {
    display: none !important;
  }

  #mobile {
    display: block !important;
  }
}

@media (min-width: 992px) {
  #pc {
    display: flex !important;
  }

  #mobile {
    display: none !important;
  }
}

.fc-sat,
.fc-sun {
  background: #ffd4d440
}

.sidebar {
  width: 250px;
  float: left;
  position: relative;
  border: 1px solid;
  border-width: 0 1px 0 0;
  font-size: 14px;
  padding-top: 0.5em;
  padding-bottom: 1em
}

/*
.li-relatorios {
    text-decoration: none;
    color:black;
    font-weight: normal !important;
}
*/
.sidebar label {
  font-size: 14px;
}

.mtop10 {
  margin-top: 10px;
}

.hide-menu {
  background-color: #808285;
  color: #efefef;
  text-align: center;
  padding: 0;
  width: 36px;
  height: 28px;
  display: inline;
  position: absolute;
  right: -3px;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  font-size: 19px;
  z-index: 1;
}

.hide-menu i {
  font-size: 19px;
  padding: 5px 11px;
  color: inherit !important;
}

.menu-minimized {
  width: 45px;
}

.menu-minimized #sidebar {
  margin-top: 37px;
}

.menu-minimized .sidebar {
  width: 45px;
}

.menu-minimized .sidebar:before {
  width: 45px;
}

.menu-minimized .menu-text {
  display: none;
}

.menu-expanded .popover {
  display: none !important;
}

.sidebar:before {
  content: "";
  display: block;
  width: 250px;
  position: fixed;
  bottom: 0;
  top: 0;
  z-index: -1;
  border: 1px solid;
  border-width: 0 1px 0 0
}

#sidebar>li>ul {
  border-bottom: 1px solid;
  font-size: 14px
}

#sidebar>li>.nav>li>a {
  border-top: 1px solid;
  padding-left: 42px
}

#button-menu {
  text-align: center;
  font-weight: bold
}

#menu {
  float: left
}

.icon-menu {
  font-size: 15px;
  margin-right: 11px;
  width: 15px;
  height: 15px
}

.icon-down {
  margin-right: 0;
  line-height: 30px
}

@media (min-width: 990px) {
  .menu-lateral.collapse {
    display: block;
    height: auto !important
  }
}

@media (max-width: 991px) {
  .sidebar {
    width: 100%;
    float: none;
    font-size: 14px
  }

  .sidebar:before {
    content: none
  }

  #sidebar>li>ul {
    font-size: 13px
  }

  #sidebar>li a {
    font-weight: bold
  }

  #sidebar>li>.nav>li>a {
    padding: 0 15px !important
  }

  #menu {
    float: none
  }
}

@media (max-width: 991px) {
  .nav>li>a {
    line-height: 30px
  }

  .navbar-nav {
    margin: 0
  }

  .navbar-nav>li>h5 {
    color: #fff;
    font-weight: bold
  }

  .navbar-nav>li>a {
    font-size: 13px
  }
}

.nav-pills>li>a {
  border-radius: 0
}

body {
  padding-top: 50px
}

header {
  z-index: 9999999
}

.lowercase {
  text-transform: lowercase;
}

#shortcut {
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  background-color: #33302f;
  z-index: 9999997 !important;
  display: none;
  color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body.theme-5 #shortcut,
body[data-theme-custom*="-5"] #shortcut,
body.theme-dark #shortcut,
.theme-5 #shortcut,
[data-theme-custom*="-5"] #shortcut {
  background: #0b0f19 !important;
  background-color: #0b0f19 !important;
  color: #b3ff2b !important;
}

.theme-5 legend,
[data-theme-custom*="-5"] legend,
.theme-dark legend {
  color: #d7e6ff !important;
}

/* Overrides para elementos aqua/info no modo dark */
.theme-5 .bg-aqua,
.theme-5 .bg-info,
.theme-5 .label-info,
.theme-5 .btn-info,
.theme-5 .box.box-info,
.theme-5 .progress-bar-aqua,
.theme-5 .progress-bar-info {
  background-color: #3a5b00 !important;
  border-color: #3a5b00 !important;
}

.theme-5 .text-aqua,
.theme-5 .text-info {
  color: #b3ff2b !important;
}

.theme-5 .box.box-solid.box-info>.box-header {
  background-color: #3a5b00 !important;
  color: #fff !important;
}

/* Títulos esverdeados para o tema dark */
.theme-5 h1,
.theme-5 h2,
.theme-5 h3,
.theme-5 h4,
.theme-5 h5,
.theme-5 h6,
.theme-5 .h1,
.theme-5 .h2,
.theme-5 .h3,
.theme-5 .h4,
.theme-5 .h5,
.theme-5 .h6 {
  color: #c1ff73 !important;
}

/* Dropdowns e Navbar no modo dark */
.theme-5 .dropdown-menu {
  background-color: #0b0f19 !important;
  border: 1px solid #2d3142 !important;
}

.theme-5 .dropdown-menu>li>a {
  color: #d1d5db !important;
}

.theme-5 .dropdown-menu>li>a:hover,
.theme-5 .dropdown-menu>li>a:focus {
  background-color: #3a5b00 !important;
  color: #fff !important;
}

.theme-5 .dropdown-header {
  color: #c1ff73 !important;
  background-color: transparent !important;
}

.theme-5 .navbar-fixed-top .dropdown-scroll .dropdown-header:hover,
.theme-5 .navbar-fixed-top .dropdown-scroll .dropdown-header:focus,
.theme-5 .navbar-fixed-top .dropdown-scroll .dropdown-header:active {
  background-color: #1a2333 !important;
  color: #c1ff73 !important;
}

.theme-5 #show-shortcut>a {
  color: #c1ff73 !important;
}

/* Ícones de seleção no modo dark */
.theme-5 .glyphicon-check,
.theme-5 .glyphicon-unchecked {
  color: #c1ff73 !important;
}

/* Syncfusion Grid Pager Dark Fixes */
.theme-5 .e-grid .e-pager,
.theme-5 .e-pager,
.theme-5 .e-pager .e-pagercontainer,
.theme-5 .e-grid .e-gridheader,
.theme-5 .e-grid .e-headercell,
.theme-5 .e-grid .e-detailheadercell {
  background: #0b0f19 !important;
  background-color: #0b0f19 !important;
  color: #fff !important;
  border-color: #1a2333 !important;
}

.theme-5 .e-grid .e-content,
.theme-5 .e-grid .e-gridcontent {
  background-color: #070a0f !important;
}

.theme-5 .e-grid td.e-rowcell {
  color: #e5e7eb !important;
}

.theme-5 .e-pager .e-numericitem,
.theme-5 .e-pager .e-prevpagedisabled,
.theme-5 .e-pager .e-prevchilddisabled,
.theme-5 .e-pager .e-nextchilddisabled,
.theme-5 .e-pager .e-nextpagedisabled {
  color: #c1ff73 !important;
}

.theme-5 .e-pager .e-numericitem:hover {
  background-color: #3a5b00 !important;
  color: #fff !important;
}

.theme-5 #show-shortcut>a:hover,
.theme-5 #show-shortcut>a:focus {
  color: #0b0f19 !important;
  background-color: #b3ff2b !important;
}

/* Paginação no modo dark */
.theme-5 .pagination>.active>a,
.theme-5 .pagination>.active>span,
.theme-5 .pagination>.active>a:hover,
.theme-5 .pagination>.active>span:hover,
.theme-5 .pagination>.active>a:focus,
.theme-5 .pagination>.active>span:focus {
  background-color: #b3ff2b !important;
  border-color: #b3ff2b !important;
  color: #0b0f19 !important;
}

.theme-5 .pagination>li>a,
.theme-5 .pagination>li>span {
  background-color: #1a2333 !important;
  border-color: #2d3142 !important;
  color: #d1d5db !important;
}

.theme-5 .pagination>li>a:hover {
  background-color: #b3ff2b !important;
  color: #0b0f19 !important;
}

/* Botões de Sucesso no modo dark */
.theme-5 .btn-success {
  background-color: #b3ff2b !important;
  border-color: #b3ff2b !important;
  color: #0b0f19 !important;
}

.theme-5 .btn-success:hover,
.theme-5 .btn-success:active,
.theme-5 .btn-success:focus {
  background-color: #b3ff2b !important;
  border-color: #b3ff2b !important;
  color: #0b0f19 !important;
}

/* Botões de Sucesso Desabilitados no modo dark */
.theme-5 .btn-success.disabled,
.theme-5 .btn-success[disabled],
.theme-5 fieldset[disabled] .btn-success,
.theme-5 .btn-success.disabled:hover,
.theme-5 .btn-success[disabled]:hover,
.theme-5 fieldset[disabled] .btn-success:hover {
  background-color: #1a2333 !important;
  border-color: #233325 !important;
  color: #666 !important;
  opacity: 0.6 !important;
}

.theme-5 .btn-success.active,
.theme-5 fieldset[disabled] .btn-success.active {
  background-color: #b3ff2b !important;
  border-color: #b3ff2b !important;
  color: #0b0f19 !important;
}

/* Barras de Progresso no modo dark */
.theme-5 .progress-bar {
  background-color: #b3ff2b !important;
  background-image: linear-gradient(to bottom, #4a7400 0%, #3a5b00 100%) !important;
}

.theme-5 .progress {
  background-color: #1a2333 !important;
}

/* Switches iOS no modo dark */
.theme-5 .checkbox:checked+label.ios-switch:before,
.theme-5 input.checkbox:checked+label.ios-switch:before {
  box-shadow: #b3ff2b 0px 0px 0px 16px inset !important;
  background-color: #b3ff2b !important;
  border-color: #b3ff2b !important;
}

.theme-5 .checkbox:not(:checked)+label.ios-switch:before {
  border-color: #2d3142 !important;
  box-shadow: #2d3142 0px 0px 0px 0px inset !important;
  background-color: #1a2333 !important;
}

/* Select2 no modo dark */
.theme-5 .select2-container .select2-choice,
.theme-5 .select2-container .select2-choices,
.theme-5 .select2-container .select2-choices .select2-search-field input,
.theme-5 .select2-search input {
  background-color: #1a2333 !important;
  background-image: none !important;
  border-color: #2d3142 !important;
  color: #d1d5db !important;
}

.theme-5 .select2-chosen,
.theme-5 .select2-choice>span {
  color: #d1d5db !important;
}

.theme-5 .select2-results {
  background-color: #060b06 !important;
  color: #d1d5db !important;
}

.theme-5 .select2-results .select2-highlighted {
  background-color: #b3ff2b !important;
  color: #060b06 !important;
}

.theme-5 .select2-drop {
  background-color: #060b06 !important;
  border: 1px solid #1a2f1a !important;
  border-top: 0 !important;
  color: #d1d5db !important;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .5) !important;
}

.theme-5 .select2-results .select2-no-results,
.theme-5 .select2-results .select2-searching,
.theme-5 .select2-results .select2-selection-limit {
  background-color: #0d1a0d !important;
  color: #b3ff2b !important;
  padding: 8px !important;
}

/* Ícone de Raio EXCLUSIVO para Acesso Rápido */
.theme-5 .input-acessorapido .select2-arrow b,
.theme-5 .autocompletar-acesso-rapido .select2-arrow b,
.theme-5 .autocompletar-acesso-rapido.select2-container .select2-arrow b {
  background: none !important;
  filter: none !important;
  /* anula o invert(0.8) do theme-material-5.css que deixava o raio roxo */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.theme-5 .input-acessorapido .select2-arrow b:before,
.theme-5 .autocompletar-acesso-rapido .select2-arrow b:before,
.theme-5 .autocompletar-acesso-rapido.select2-container .select2-arrow b:before {
  content: "\f0e7" !important;
  /* fa-bolt */
  font-family: FontAwesome !important;
  color: #BBF451 !important;
  /* verde-lima dos ícones (era #b3ff2b; o invert do tema deixava roxo) */
  font-size: 14px !important;
  font-weight: normal !important;
}

.theme-5 .select2-search input {
  background-color: #1a2333 !important;
  border: 1px solid #2d3142 !important;
  color: #fff !important;
}

/* Padronização de Inputs Normais Editáveis */
.theme-5 input:not(:disabled):not([readonly]),
.theme-5 select:not(:disabled):not([readonly]),
.theme-5 textarea:not(:disabled):not([readonly]),
.theme-5 .form-control:not(:disabled):not([readonly]),
.theme-5 .select2-container .select2-choice,
.theme-5 .select2-container .select2-choices {
  background-color: #1a2333 !important;
  background-image: none !important;
  border-color: #2d3142 !important;
  color: #fff !important;
}

/* Diferenciação para campos Disabled/Readonly */
.theme-5 input:disabled,
.theme-5 input[readonly],
.theme-5 select:disabled,
.theme-5 textarea:disabled,
.theme-5 .form-control:disabled,
.theme-5 .form-control[readonly] {
  background-color: #030712 !important;
  /* Tom ainda mais escuro que o fundo */
  border-color: #1f2937 !important;
  color: #6b7280 !important;
  /* Cinza médio/escuro para parecer inativo */
  cursor: not-allowed !important;
  opacity: 0.8;
}

.theme-5 .select2-container-multi .select2-choices .select2-search-choice {
  background-color: #2d3142 !important;
  border-color: #6b7280 !important;
  color: #d1d5db !important;
  box-shadow: none !important;
}

.theme-5 .select2-search-choice-close {
  filter: invert(1);
}

/* Overrides para Configuração de Automações no modo dark */
.theme-5 .botao-add {
  background-color: #3a5b00 !important;
  border-color: #3a5b00 !important;
  color: #fff !important;
}

.theme-5 .botao-add:hover {
  background-color: #b3ff2b !important;
  border-color: #b3ff2b !important;
  color: #0b0f19 !important;
}

.theme-5 .agrupamento-header-header {
  background-color: #3b3f54 !important;
  border-color: #3b3f54 !important;
}

.theme-5 .switch__label--checked {
  color: #b3ff2b !important;
}

.theme-5 .switch__base input:checked+.slider {
  background-color: #b3ff2b !important;
}

.theme-5 .switch__base input:focus+.slider {
  box-shadow: 0 0 1px #b3ff2b !important;
}

.theme-5 .agrupamento-automacao {
  background-color: #1a2333 !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.theme-5 .linha-agrupamento:nth-child(odd) {
  background-color: #0d121f !important;
}

.theme-5 .frase {
  border-color: #2d3142 !important;
}

.theme-5 .input-automacao,
.theme-5 .input-modal-automacao {
  color: #c1ff73 !important;
  border-color: #4b5563 !important;
}

.theme-5 .agrupamento-header h4 {
  color: #fff !important;
}

.theme-5 .panel-tipo .panel-heading {
  background-color: #3b3f54 !important;
  border-color: #3b3f54 !important;
  color: #fff !important;
}

.theme-5 .panel-tipo .panel-title {
  color: #fff !important;
}

.theme-5 .icon-div__item--update i,
.theme-5 .fa-gear.refresh,
.theme-5 .fa-exchange.refresh,
.theme-5 .fa-bolt.bolt,
.theme-5 .fa-bolt,
.theme-5 .fa-exchange,
.theme-5 .fa-refresh {
  color: #c1ff73 !important;
}

.theme-5 .frase {
  background-color: #1a2333 !important;
  border-color: #2d3142 !important;
  color: #d1d5db !important;
}

.theme-5 .frase span {
  color: #b3ff2b !important;
}

.theme-5 .modal-linha .frase p {
  color: #fff !important;
}

.theme-5 .agrupamento-header-body {
  background-color: #0b0f19 !important;
}

.theme-5 .panel-body {
  background-color: #0b0f19 !important;
  color: #d1d5db !important;
}

/* Painel de aviso (ex: submódulo do Google Drive) no modo dark */
.theme-5 .panel-warning {
  border-color: #2d3142 !important;
}

.theme-5 .panel-warning>.panel-heading {
  color: #fde68a !important;
  background-color: #2a1e00 !important;
  border-color: #5a4000 !important;
}

.theme-5 .panel-warning>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: #5a4000 !important;
}

.theme-5 .panel-warning>.panel-heading a {
  color: #fde68a !important;
}

.theme-5 .panel-warning>.panel-footer+.panel-collapse .panel-body {
  border-bottom-color: #5a4000 !important;
}

.theme-5 .frase .frase-close i {
  color: #fff !important;
}

.theme-5 .select2-drop-mask {
  background-color: transparent !important;
}

/* Bootstrap Switch no modo dark */
.theme-5 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  background-color: #b3ff2b !important;
  color: #0b0f19 !important;
  background: #b3ff2b !important;
}

.theme-5 .bootstrap-switch .bootstrap-switch-label {
  background-color: #1a2333 !important;
  color: #d1d5db !important;
}

#shortcut>ul {
  padding: 15px 20px 10px;
  list-style: none;
  margin: 0;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid #423f3f
}

#shortcut>ul>li {
  display: inline-block;
  width: auto
}

#shortcut>ul>li .shortcut-tile {
  position: relative;
  margin: 0 3px 3px;
  border: 0;
  border-radius: 0
}

#shortcut>ul>li .shortcut-tile:hover {
  text-decoration: none
}

#shortcut>ul>li .shortcut-tile:active,
#shortcut>ul>li .shortcut-tile:focus {
  left: 0;
  top: 0
}

.shortcut-tile {
  float: left;
  display: block;
  width: 100px;
  height: 70px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 0 1px #ffc;
  box-shadow: inset 0 0 1px #ffc;
  border: 1px dotted #c5c5c5;
  text-decoration: none;
  color: #fff;
  font-weight: 300;
  margin: 0 10px 20px 0;
  position: relative
}

.shortcut-tile.selected {
  border: 3px solid !important
}

.shortcut-tile.selected:before {
  display: block;
  position: absolute;
  content: "\f00c";
  color: #fff;
  right: 2px;
  font-family: FontAwesome;
  z-index: 2
}

.shortcut-tile.selected:after {
  width: 0;
  height: 0;
  position: absolute;
  display: block;
  right: 0;
  content: "";
  top: 0;
  z-index: 1;
  border-left: 35px solid transparent;
  border-top: 35px solid
}

.shortcut-tile.big-cubes {
  width: 120px;
  height: 120px
}

.shortcut-tile .iconbox {
  text-align: center
}

.shortcut-tile .iconbox i {
  display: block;
  margin: 15px auto 0;
  height: 75px
}

.shortcut-tile .iconbox span {
  display: block
}

.shortcut-tile .iconbox span>span {
  position: absolute;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #fff
}

.shortcut-tile:hover {
  z-index: 10;
  transform: scale(1.07);
  -ms-transform: scale(1.07);
  -webkit-transform: scale(1.07);
  -moz-transform: scale(1.07)
}

.shortcut-on #response-btn {
  display: none !important
}

.shortcut-on #left-bar .navbar,
.shortcut-on #main .navbar {
  border: 0 !important
}

.fa-4x {
  font-size: 4em
}

.main-content {
  margin-right: 0;
  margin-top: 0;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  padding-left: 3em
}

.navbar-fixed-top>.nav-top>.nav>li {
  display: inline-block;
  float: left
}

.navbar-fixed-top>.nav-top>ul.navbar-right>li {
  margin-right: 5px
}

.navbar-fixed-top>.nav-top>ul.navbar-right>li:last-child {
  margin-right: 0
}

.navbar-fixed-top>.nav-top>.nav>li>a {
  height: 50px;
  padding-top: 15px;
  color: #fff
}

.navbar-fixed-top>.nav-top>.nav>li>a:hover,
.navbar-fixed-top>.nav-top>.nav>li>a:focus {
  color: #fff;
  background-color: #142434
}

.navbar-fixed-top .dropdown-alerts {
  left: -60px;
  min-width: 280px
}

.navbar-fixed-top .dropdown-user {
  left: -80px;
  margin: 0;
  min-width: 200px
}

.navbar-fixed-top .dropdown-scroll {
  margin: 0;
  padding: 0
}

.navbar-fixed-top .dropdown-scroll .dropdown-header {
  padding: 15px 10px
}

.navbar-fixed-top .dropdown-scroll .dropdown-header:active,
.navbar-fixed-top .dropdown-scroll .dropdown-header:focus,
.navbar-fixed-top .dropdown-scroll .dropdown-header:hover {
  color: inherit;
  background: inherit
}

.navbar-fixed-top .dropdown-scroll #list-notificacao li {
  margin: 0;
  border-bottom: 1px solid #ccc;
  background: #fff
}

.navbar-fixed-top .dropdown-scroll #list-notificacao li:last-child {
  border-bottom: none
}

.navbar-fixed-top .dropdown-scroll #list-notificacao li a {
  display: block;
  padding: 10px
}

.navbar-fixed-top .dropdown-scroll #list-notificacao li a:hover {
  text-decoration: none;
  background-color: inherit
}

.navbar-fixed-top .dropdown-scroll .dropdown-footer {
  display: block;
  border-top: 1px solid #ccc;
  border-bottom: none;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429
}

.navbar-fixed-top .dropdown-scroll p {
  margin: 0
}

.navbar-fixed-top .dropdown-scroll li a,
.navbar-fixed-top .dropdown-scroll li a:hover {
  color: #333
}

.alert-icon {
  width: 25px;
  margin-right: 5px;
  text-align: center;
  color: #fff
}

.navbar-fixed-top .number {
  position: absolute;
  bottom: 25px;
  left: 3px;
  width: 20px;
  height: 20px;
  padding-right: 1px;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  line-height: 20px;
  background-color: #2c3e50
}

.icon-danger {
  background-color: #e74c3c
}

.icon-danger i:before {
  content: "\f071"
}

.icon-warning {
  background-color: #f39c12
}

.icon-warning i:before {
  content: "\f05a"
}

a.icon-danger,
a:hover.icon-danger,
a.icon-warning,
a:hover.icon-warning {
  color: white
}

@media (max-width: 1200px) {
  .main-content {
    padding-left: 0
  }
}

.margin-auto {
  margin: 0 auto
}

@media (min-width: 1200px) {
  .modal-lg {
    width: 1000px
  }
}

.stack-container {
  width: 390px;
  margin: 60px auto 0 auto;
  background: #f9f9f9;
  border: 1px solid #d5d5d5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 2em 2em
}

@media (max-width: 1199px) {
  .stack-container {
    width: 100%
  }
}

@media (max-width: 991px) {

  .checkbox.checkbox-top,
  .checkbox.checkbox-index {
    margin-bottom: 10px !important;
    margin-top: 10px !important
  }
}

.checkbox.checkbox-index {
  margin-bottom: 0px;
  margin-top: 4px
}

.checkbox.checkbox-top {
  margin-bottom: 0px;
  margin-top: 30px
}

.field-validation-error {
  color: red !important
}

.field-validation-valid {
  display: none
}

.input-validation-error {
  outline: 1px solid red !important;
  background-color: #fee !important
}

.input-validation-error a {
  background-color: #fee !important
}

.validation-summary-errors {
  font-weight: bold;
  color: red
}

.validation-summary-errors>ul {
  list-style: none
}

.validation-summary-valid {
  display: none
}

.required:after {
  color: #e5381d;
  content: " *"
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0
}

.twitter-typeahead .tt-hint {
  display: none
}

.twitter-typeahead .tt-dropdown-menu {
  min-width: 160px;
  width: 100%;
  margin-top: 34px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box
}

.twitter-typeahead .tt-query {
  border-radius: 4px 0 0 4px !important
}

.twitter-typeahead .tt-suggestion {
  display: block;
  padding: 3px 20px
}

.twitter-typeahead .tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #428bca
}

.twitter-typeahead .tt-suggestion.tt-is-under-cursor a {
  color: #fff
}

.twitter-typeahead .tt-suggestion p {
  margin: 0
}

.ui-datepicker {
  width: 300px !important
}

/* Datepicker Dark Mode (Tema 5) */
.theme-5 .ui-datepicker,
.theme-5 #ui-datepicker-div {
  background-color: #0b0f19 !important;
  background: #0b0f19 !important;
  border: 1px solid #1a2333 !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  padding: 5px !important;
  z-index: 9999 !important;
}

/* Forçar fundo em toda a tabela de dias */
.theme-5 .ui-datepicker table,
.theme-5 .ui-datepicker-calendar {
  background-color: #0b0f19 !important;
  background: #0b0f19 !important;
  margin: 0 !important;
}

.theme-5 .ui-datepicker-header {
  background-color: #1a2333 !important;
  background: #1a2333 !important;
  border: 0 !important;
  color: #b3ff2b !important;
  padding: 8px 0 !important;
}

.theme-5 .ui-datepicker-title {
  color: #fff !important;
  font-weight: bold !important;
}

.theme-5 .ui-datepicker-calendar th {
  background-color: #0b0f19 !important;
  color: #6b7280 !important;
  padding: 8px !important;
  border: 0 !important;
}

.theme-5 .ui-datepicker-calendar td,
.theme-5 .ui-datepicker-calendar td a,
.theme-5 .ui-datepicker-calendar td span {
  background: #0b0f19 !important;
  background-color: #0b0f19 !important;
  color: #d1d5db !important;
  border: 1px solid #1a2333 !important;
}

.theme-5 .ui-datepicker-calendar td a:hover {
  background-color: #b3ff2b !important;
  background: #b3ff2b !important;
  color: #0b0f19 !important;
}

/* Harley Assistente - Pulse Effect */
@keyframes harleyPulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(182, 255, 0, 0);
  }

  50% {
    transform: scale(1.2);
    text-shadow: 0 0 12px rgba(182, 255, 0, 0.8);
  }

  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(182, 255, 0, 0);
  }
}

.theme-5 .select2-container .fa-bolt {
  animation: harleyPulse 2s infinite ease-in-out;
  color: #b6ff00 !important;
  display: inline-block;
}

/* Botões Temáticos */
.theme-5 .btn-success {
  background-color: #b3ff2b !important;
  background: #b3ff2b !important;
  border-color: #a2e627 !important;
  color: #0b0f19 !important;
  font-weight: 600 !important;
}

.theme-5 .btn-success:hover,
.theme-5 .btn-success:focus {
  background-color: #a2e627 !important;
  box-shadow: 0 0 15px rgba(183, 255, 0, 0.733) !important;
}

/* Loader Text Styles */
#loadingText {
  position: absolute;
  bottom: 80px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.5px;
  font-family: 'Outfit', sans-serif;
  animation: floatText 3s ease-in-out infinite;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9);
  z-index: 10000;
}

/* Backdrop do loader: escuro no dark, claro no light */
#loadingBackdrop {
  background-color: #000;
  opacity: 0.5;
  /* background-color: rgba(5, 7, 10, 0.5) !important;
    opacity: 1 !important; */
}

.theme-3 #loadingBackdrop,
body:not(.theme-5) #loadingBackdrop {
  background-color: #000;
  opacity: 0.5;
  /* background-color: rgba(235, 240, 248, 0.5) !important;
    opacity: 1 !important; */
}

.theme-5 #loadingBackdrop {
  background-color: rgba(5, 7, 10, 0.5) !important;
  opacity: 1 !important;
}

/* Texto do loader: escuro quando fundo é claro */
.theme-3 #loadingText,
body:not(.theme-5) #loadingText {
  /* color: rgba(30, 80, 50, 0.9); */
  color: #9AE600;
  text-shadow: 0 1px 3px rgba(5, 51, 69, 0.8)
}

.theme-5 #loadingText {
  /* color: rgba(30, 80, 50, 0.9); */
  color: #BBF451;
  text-shadow: unset
}

@keyframes floatText {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

.theme-5 .select2-drop,
.theme-5 .select2-drop-active {
  background: #1a2333 !important;
  border: 1px solid #2d3142 !important;
  color: #f3f4f6 !important;
}

#canvasLoading {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Hoje e Ativo */
.theme-5 .ui-datepicker-today a,
.theme-5 .ui-datepicker-calendar .ui-state-highlight {
  border: 1px solid #b3ff2b !important;
  color: #b3ff2b !important;
}

.theme-5 .ui-datepicker-calendar .ui-state-active,
.theme-5 .ui-datepicker-calendar .ui-state-active:hover {
  background-color: #b3ff2b !important;
  background: #b3ff2b !important;
  color: #0b0f19 !important;
  font-weight: bold !important;
}

/* Zera qualquer estilo de final de semana herdado */
.theme-5 td.ui-datepicker-week-end,
.theme-5 td.ui-datepicker-week-end a {
  background-color: #0b0f19 !important;
  background: #0b0f19 !important;
}

/* Botões de Gatilho e Addons (Calendário/Checkbox) */
.theme-5 .input-group-addon,
.theme-5 .add-on,
.theme-5 .input-group-btn .btn-default,
.theme-5 .input-group-btn .btn-white {
  background-color: #1a2333 !important;
  border-color: #2d3142 !important;
  color: #b3ff2b !important;
  background-image: none !important;
}

/* Ícones dentro dos addons */
.theme-5 .input-group-addon i,
.theme-5 .add-on i {
  color: #b3ff2b !important;
}

/* Setas do calendário VISÍVEIS (brancas) */
.theme-5 .ui-datepicker-prev span,
.theme-5 .ui-datepicker-next span {
  filter: invert(1) brightness(10) !important;
}

/* Checkbox menos agressivo nos addons */
.theme-5 .input-group-addon input[type="checkbox"],
.theme-5 .add-on input[type="checkbox"] {
  cursor: pointer !important;
  filter: invert(0.8) hue-rotate(180deg) brightness(1) !important;
}

.calendario {
  cursor: pointer
}

.gridRecords {
  margin: 25px 0 0
}

.mtop {
  margin-top: 2em
}

.s-top {
  margin-top: .67em;
}

.mbot {
  margin-bottom: .67em
}

.btn-pesquisa,
.btn-icon {
  position: relative;
  display: inline-block
}

.btn-pesquisa .glyphicon,
.btn-icon .glyphicon {
  position: absolute;
  margin: 9px 10px;
  color: #fff;
  z-index: 1
}

.btn-pesquisa .btn,
.btn-icon .btn {
  padding-left: 35px
}

.font-sm {
  font-size: 13px
}

.table-responsive {
  overflow-x: auto
}

.transparent {
  color: #333;
  display: block;
  border: none;
  background: transparent;
  padding: 0;
  width: 100%
}

.transparent.line {
  border-bottom: 1px dotted black;
  padding: 5px 2px 0 2px
}

.transparent:focus {
  outline: none;
  border-color: #51cbee
}

.panel-group form+form {
  margin-top: 5px
}

.clear {
  clear: both
}

.flow {
  overflow: hidden
}

.row:last-child .tt-dropdown-menu {
  position: relative !important;
  clear: both
}

.input-group-btn {
  vertical-align: top
}

*:focus,
*:active {
  outline: 0 !important
}

.li-theme.open>a:before {
  content: "Tema "
}

.icon-error {
  color: #a94442 !important
}

.icon-ok {
  color: #3c763d !important
}

textarea {
  resize: vertical
}

.gridPaginationItem.active {
  background-color: #eee;
  border-color: #ddd
}

.widget a.list-success,
.widget p.list-success {
  color: #3c763d
}

.widget a.list-danger,
.widget p.list-danger {
  color: #a94442
}

.widget h5.list-group-item-heading {
  font-weight: bold
}

.system-icon {
  margin-left: 5px
}

.nav-stacked>li+li {
  margin-top: 0px
}

.nav-stacked>li+li a {
  padding-top: 12px
}

h4.page-header {
  margin: 20px 0
}

.container-narrow {
  margin: 0 auto;
  max-width: 700px
}

.container-narrow>hr {
  margin: 30px 0
}

a.disabled {
  color: #999
}

a.disabled:hover,
a.disabled:focus {
  color: #999;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed
}

#salva-dados-container {
  display: inline-block;
  margin-right: 1px
}

#flotTip {
  padding: 3px 6px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 200;
  font-size: 13px
}

.legend .legendColorBox>div {
  border: 0 !important;
  padding: 0 !important
}

.legend .legendLabel {
  padding-left: 3px
}

.grafico {
  height: 250px;
  z-index: 90;
  width: 100%;
  overflow: hidden
}

.pagination {
  margin-top: 0;
}

.theme-1 .pagination>.active>a {
  color: #fff;
}

.estrela-favorito {
  color: #EEC75F;
}

a.hovered {
  background-color: #acf3b2;
}

.table-striped>tbody>tr>.danger,
.table-striped>tbody>.danger>td,
.table-striped>tbody>.danger>th {
  background-color: #f2dede !important;
}

.table-striped>tbody>tr>.success,
.table-striped>tbody>.success>td,
.table-striped>tbody>.success>th {
  background-color: #DFF0D8 !important;
}

.table-striped>tbody>tr>.warning,
.table-striped>tbody>.warning>td,
.table-striped>tbody>.warning>th {
  background-color: #FCF8E3 !important;
}

.table-striped>tbody>tr>.info,
.table-striped>tbody>.info>td,
.table-striped>tbody>.info>th {
  background-color: #93BFE5 !important;
}

.icones-agrupamento {
  color: #55b56d;
}

.expandir-agrupados,
#expandir-todos>i,
#marcar-todos,
.marcar-todos-check,
.favoritar-agrupados>i,
.ler-agrupados>i {
  cursor: pointer;
}

#expandir-todos>i:hover,
.expandir-agrupados:hover>i {
  color: #107128 !important;
}

.contador>* {
  border: #5db56d solid 2px;
  color: #5db56d;
  border-radius: 10px;
  padding: 1px 5px 1px 5px;
}

.alertaVinculoTabAux {
  background-color: rgba(92, 184, 92, 0.15);
  border-color: #3c763d;
}

.drag-place-holder {
  border: 0.5px solid;
}

.config-modulos-options {
  visibility: hidden;
  display: inline-flex;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-transition: visibility 0.5s;
  -moz-transition: visibility 0.5s;
  transition: visibility 0.5s;
}

.config-modulos-options:hover,
.group-configmodulo .form-control:hover~.config-modulos-options {
  visibility: visible;
}

.group-configmodulo li {
  cursor: pointer;
}

.group-configmodulo .label-config {
  cursor: hand;
}

.group-configmodulo .text-config {
  font-weight: bold;
  margin-bottom: -1px;
}

.select2-disabled {
  display: none !important;
}

.exibicao-link {
  word-break: break-word;
  line-height: 185%;
  overflow: hidden;
  cursor: pointer !important;
}

.btn-novo-financeiro.open {
  margin-bottom: 44px !important;
}

#dropzone {
  margin-bottom: 3rem;
}

.dropzone {
  border: 2px dashed #0087F7;
  border-radius: 5px;
  background: white;
}

.dropzone .dz-message {
  font-weight: 400;
}

.dropzone .dz-message .note {
  font-size: 0.8em;
  font-weight: 200;
  display: block;
  margin-top: 1.4rem;
}

/* --- TEMA 5: OVERRIDES ESPECÍFICOS (POPOVER, BADGES, CHECKBOX) --- */

/* Badge gridRecords com sombra verde */
.theme-5 .gridRecords.badge,
.theme-5 #badgeTrava.badge {
  background-color: #b3ff2b !important;
  background: #b3ff2b !important;
  color: #0b0f19 !important;
  box-shadow: 0 0 15px rgba(179, 255, 43, 0.6) !important;
  font-weight: bold !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  text-shadow: none !important;
}

/* Popover Dark Mode Premium */
.theme-5 .popover {
  background-color: #0f172a !important;
  border: 1px solid #b3ff2b !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

.theme-5 .popover-title {
  background-color: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  color: #b3ff2b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 15px !important;
  border-radius: 8px 8px 0 0 !important;
}

.theme-5 .popover-content {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
  padding: 12px !important;
}

.theme-5 .popover.top>.arrow:after {
  border-top-color: #b3ff2b !important;
}

.theme-5 .popover.bottom>.arrow:after {
  border-bottom-color: #b3ff2b !important;
}

.theme-5 .popover.left>.arrow:after {
  border-left-color: #b3ff2b !important;
}

.theme-5 .popover.right>.arrow:after {
  border-right-color: #b3ff2b !important;
}

/* Tabela dentro do popover (Visualização de Publicações Próximas) */
.theme-5 .popover .table {
  margin-bottom: 0 !important;
  background-color: transparent !important;
  border-collapse: separate !important;
}

.theme-5 .popover .table thead th {
  background-color: #1a2333 !important;
  color: #b3ff2b !important;
  border-bottom: 2px solid #334155 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.theme-5 .popover .table tbody td {
  border-color: #334155 !important;
  color: #e2e8f0 !important;
  font-size: 11px !important;
}

.theme-5 .popover .table-bordered {
  border: 1px solid #334155 !important;
}

.theme-5 .popover a {
  color: #b3ff2b !important;
  text-decoration: underline !important;
}

/* Checkbox Global para Modo Dark (Filtro de Inversão Refinado) */
.theme-5 input[type="checkbox"] {
  cursor: pointer !important;
  filter: invert(0.9) hue-rotate(150deg) brightness(1.1) contrast(1.2) !important;
  width: 15px !important;
  height: 15px !important;
}

/* Ajuste para labels e spans de status */
.theme-5 .popover .label-danger {
  background-color: #ef4444 !important;
  color: #fff !important;
  font-weight: bold !important;
}

.theme-5 .popover .label-success {
  background-color: #10b981 !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   TinyMCE 4 — Dark Theme (theme-5)
   Cobre: toolbar, botões, menus, janelas de diálogo, statusbar.
   O conteúdo do <iframe> é tratado via JS (layout.js).
══════════════════════════════════════════════════════════════ */

/* Contêiner principal e painéis */
.theme-5 .mce-tinymce,
.theme-5 .mce-panel,
.theme-5 .mce-container,
.theme-5 .mce-container-body {
  background-color: #1a2333 !important;
  border-color: #2d3142 !important;
}

/* Toolbar */
.theme-5 .mce-top-part,
.theme-5 .mce-toolbar-grp,
.theme-5 .mce-toolbar,
.theme-5 .mce-btn-group {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

/* Divisor entre grupos de botões */
.theme-5 .mce-btn-group:not(:first-child) {
  border-left-color: #2d3142 !important;
}

/* Botões */
.theme-5 .mce-btn {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

.theme-5 .mce-btn:hover,
.theme-5 .mce-btn:focus,
.theme-5 .mce-btn.mce-active,
.theme-5 .mce-btn.mce-active:hover {
  background: #2d3142 !important;
  border-color: #4d5870 !important;
}

.theme-5 .mce-btn.mce-disabled,
.theme-5 .mce-btn.mce-disabled:hover {
  opacity: 0.35 !important;
}

/* Ícones e texto nos botões */
.theme-5 .mce-ico {
  color: #d1d5db !important;
}

.theme-5 .mce-btn .mce-txt {
  color: #d1d5db !important;
}

/* Caret dos dropdowns */
.theme-5 .mce-caret {
  border-top-color: #9ca3af !important;
}

/* Área de edição (wrapper do iframe) */
.theme-5 .mce-edit-area {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

/* Statusbar */
.theme-5 .mce-statusbar {
  background: #0b0f19 !important;
  border-color: #2d3142 !important;
}

.theme-5 .mce-statusbar .mce-path,
.theme-5 .mce-wordcount,
.theme-5 .mce-path .mce-path-item {
  color: #6b7280 !important;
}

/* Menus flutuantes (dropdown do toolbar) */
.theme-5 .mce-floatpanel,
.theme-5 .mce-menu,
.theme-5 .mce-menu-item {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

.theme-5 .mce-menu-item .mce-text,
.theme-5 .mce-menu-item .mce-ico {
  color: #e5e7eb !important;
}

.theme-5 .mce-menu-item:hover,
.theme-5 .mce-menu-item.mce-selected,
.theme-5 .mce-menu-item.mce-menu-item-normal.mce-active {
  background: #2d3142 !important;
}

.theme-5 .mce-menu-item-sep {
  border-top-color: #2d3142 !important;
  background: #2d3142 !important;
}

.theme-5 .mce-divider {
  background: #2d3142 !important;
  border-top-color: #2d3142 !important;
}

/* Janelas de diálogo (inserir imagem, link, etc.) */
.theme-5 .mce-window {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

.theme-5 .mce-window-head {
  background: #0b0f19 !important;
  border-color: #2d3142 !important;
}

.theme-5 .mce-window-head .mce-title {
  color: #c1ff73 !important;
}

.theme-5 .mce-foot {
  background: #0b0f19 !important;
  border-color: #2d3142 !important;
}

.theme-5 .mce-close .mce-ico {
  color: #9ca3af !important;
}

/* Inputs e combos dentro das janelas */
.theme-5 .mce-textbox,
.theme-5 .mce-combobox .mce-textbox,
.theme-5 .mce-listbox .mce-txt {
  background: #0b0f19 !important;
  border-color: #2d3142 !important;
  color: #e5e7eb !important;
}

.theme-5 .mce-label {
  color: #9ca3af !important;
}

/* Tab strips */
.theme-5 .mce-tab {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
  color: #9ca3af !important;
}

.theme-5 .mce-tab.mce-active {
  background: #0b0f19 !important;
  color: #c1ff73 !important;
}

/* Tabelas de grid dentro de diálogos */
.theme-5 .mce-container .mce-table-striped thead>tr th {
  color: #c1ff73 !important;
}

.theme-5 .mce-container .mce-table-striped tr:nth-child(even) {
  background-color: #141c28 !important;
}

.theme-5 .mce-container .mce-table-striped tbody>tr:hover {
  background-color: #2d3142 !important;
}

/* Fundo do modal-overlay */
.theme-5 #mce-modal-block {
  background: #000 !important;
}

/* =========================================================================
   MODERNIZAÇÃO VISUAL (mesclada) — navbar + atalhos (#shortcut) + home
   Anexado sobre a base + tema escuro (.theme-5) já existentes neste arquivo.
   Origem: versão de modernização enviada. Mantém o dark theme intacto;
   a diferenciação do tema escuro está no bloco final deste arquivo.
   ========================================================================= */

#show-shortcut .dropdown-menu,
#show-shortcut-mobile .dropdown-menu {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

header#pc.navbar,
header#mobile.navbar {
  box-shadow: none !important;
}

/* linear-gradient(180deg, rgba(5,51,69,1) 0%, rgba(3,36,48,1) 100%) */

#shortcut {
  background: linear-gradient(180deg, rgba(5, 51, 69, 1) 0%, rgba(3, 36, 48, 1) 100%) !important;
  padding: 18px 20px 34px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  /* separação suave do fim do menu */
  outline: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  /* leve sombra atrás da borda (light) */
  border-radius: 0 !important;
}

#shortcut::before,
#shortcut::after {
  content: none !important;
  display: none !important;
}

#shortcut .shortcut-close {
  position: absolute !important;
  top: 14px !important;
  right: 20px !important;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  opacity: .8;
}

#shortcut .shortcut-close i {
  font-size: 15px !important;
  line-height: 30px !important;
}

#shortcut .shortcut-close:hover,
#shortcut .shortcut-close:focus {
  opacity: 1;
  outline: 0 !important;
}

#shortcut-mobile {
  background: linear-gradient(180deg, rgba(5, 51, 69, 1) 0%, rgba(3, 36, 48, 1) 100%) !important;
  padding: 14px 14px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  /* separação suave do fim do menu */
  outline: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  /* leve sombra atrás da borda (light) */
  border-radius: 0 !important;
}

#shortcut-mobile::before,
#shortcut-mobile::after {
  content: none !important;
  display: none !important;
}

#shortcut>ul {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#shortcut #ulmodulos {
  --cols: 8;
  --gap: 18px;
  --cell: 112px;

  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) !important;
  gap: var(--gap) !important;

  max-width: calc((var(--cols) * var(--cell)) + ((var(--cols) - 1) * var(--gap))) !important;
  margin: 0 auto !important;

  list-style: none !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#shortcut #ulmodulos>li {
  display: flex !important;
  justify-content: center !important;
}

#shortcut #ulmodulos>li>a.shortcut-tile {
  float: none !important;
  display: block !important;

  width: 100% !important;
  max-width: 140px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

#shortcut #ulmodulos .shortcut-tile .iconbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  gap: 10px !important;
}

#shortcut #ulmodulos .shortcut-tile .iconbox>i {
  width: 68px !important;
  height: 68px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(0deg,
      rgba(73, 156, 94, 1) 0%,
      rgba(147, 250, 143, 1) 100%) !important;
  box-shadow:
    inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.05),
    inset 0.5px 0.5px 0.5px rgba(25, 255, 255, 0.20),
    0 10px 20px rgba(0, 0, 0, 0.18) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0px 4.48px 5.8px rgba(0, 0, 0, 0.20)) drop-shadow(0px 1.32px 2.11px rgba(0, 0, 0, 0.20));
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#shortcut #ulmodulos a.shortcut-tile.selected .iconbox>i::after {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  border-radius: inherit !important;
  pointer-events: none !important;

  background:
    linear-gradient(130deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 38%,
      rgba(255, 255, 255, 0.34) 46%,
      rgba(255, 255, 255, 0.10) 54%,
      rgba(255, 255, 255, 0.00) 62%,
      rgba(255, 255, 255, 0.00) 100%) !important;

  transform: translateX(-28%) rotate(0.0001deg) !important;
  opacity: 0.95 !important;
  mix-blend-mode: overlay;
}

#shortcut #ulmodulos .shortcut-tile .iconbox>img,
#shortcut #ulmodulos .shortcut-tile .iconbox>svg {
  width: 68px !important;
  height: 68px !important;
  border-radius: 15px !important;
  object-fit: contain;

  background: linear-gradient(0deg,
      rgba(73, 156, 94, 1) 0%,
      rgba(147, 250, 143, 1) 100%) !important;

  box-shadow:
    inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.05),
    inset 0.5px 0.5px 0.5px rgba(25, 255, 255, 0.20),
    0 10px 20px rgba(0, 0, 0, 0.18) !important;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/*   color: rgba(255,255,255,0.88) !important; */


#shortcut #ulmodulos .shortcut-tile .iconbox>span.label {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;

  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  color: linear-gradient(0deg, rgba(73, 156, 94, 1) 0%, rgba(147, 250, 143, 1) 100%) !important;
  opacity: 1 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  transition: color .18s ease, text-shadow .18s ease, font-weight .18s ease;
}

#shortcut #ulmodulos>li>a.shortcut-tile:hover .iconbox>i,
#shortcut #ulmodulos>li>a.shortcut-tile:hover .iconbox>img,
#shortcut #ulmodulos>li>a.shortcut-tile:hover .iconbox>svg {
  transform: translateY(-2px);
  box-shadow:
    inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.05),
    inset 0.5px 0.5px 0.5px rgba(25, 255, 255, 0.20),
    0 14px 26px rgba(0, 0, 0, 0.22) !important;
}

#shortcut #ulmodulos>li>a.shortcut-tile:active .iconbox>i,
#shortcut #ulmodulos>li>a.shortcut-tile:active .iconbox>img,
#shortcut #ulmodulos>li>a.shortcut-tile:active .iconbox>svg {
  transform: translateY(0px) scale(0.98);
}

#shortcut a.shortcut-tile.selected {
  border: 0 !important;
}

#shortcut a.shortcut-tile.selected::before,
#shortcut a.shortcut-tile.selected::after {
  content: none !important;
  display: none !important;
}

#shortcut #ulmodulos a.shortcut-tile.selected .iconbox>i,
#shortcut #ulmodulos a.shortcut-tile.selected .iconbox>img,
#shortcut #ulmodulos a.shortcut-tile.selected .iconbox>svg {
  background: linear-gradient(0deg,
      rgba(56, 132, 72, 0.6) 0%,
      rgba(122, 232, 128, 0.6) 100%) !important;
}

#shortcut #ulmodulos a.shortcut-tile.selected .iconbox>span.label {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
}

#shortcut #ulmodulos>li>a.shortcut-tile.selected:hover .iconbox>i,
#shortcut #ulmodulos>li>a.shortcut-tile.selected:hover .iconbox>img,
#shortcut #ulmodulos>li>a.shortcut-tile.selected:hover .iconbox>svg {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.06),
    inset 0.5px 0.5px 0.5px rgba(25, 255, 255, 0.22),
    0 16px 30px rgba(0, 0, 0, 0.28) !important;
}

#shortcut #ulmodulos>li>a.shortcut-tile.selected:hover .iconbox>i::after {
  transform: translateX(-20%) !important;
  opacity: 1 !important;
  transition: transform .22s ease, opacity .22s ease !important;
}

#shortcut #ulmodulos>li>a.shortcut-tile.selected:active .iconbox>i,
#shortcut #ulmodulos>li>a.shortcut-tile.selected:active .iconbox>img,
#shortcut #ulmodulos>li>a.shortcut-tile.selected:active .iconbox>svg {
  transform: translateY(-1px) scale(0.99) !important;
}

/* MOBILE */

#shortcut-mobile #ulmodulos-mobile {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 420px) {
  #shortcut-mobile #ulmodulos-mobile {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

#shortcut-mobile #ulmodulos-mobile>.atalho {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}

#shortcut-mobile #ulmodulos-mobile>.atalho>a.shortcut-tile {
  display: block !important;
  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>i {
  width: 62px !important;
  height: 62px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: linear-gradient(0deg,
      rgba(73, 156, 94, 0.5) 0%,
      rgba(147, 250, 143, 0.5) 100%) !important;
  box-shadow:
    inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.05),
    inset 0.5px 0.5px 0.5px rgba(25, 255, 255, 0.20),
    0 8px 14px rgba(0, 0, 0, 0.16) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0px 4.48px 5.8px rgba(0, 0, 0, 0.20)) drop-shadow(0px 1.32px 2.11px rgba(0, 0, 0, 0.20));
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  position: relative !important;
  overflow: hidden !important;
}

#shortcut-mobile #ulmodulos-mobile a.shortcut-tile.selected .iconbox>i::after {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  border-radius: inherit !important;
  pointer-events: none !important;

  background:
    linear-gradient(130deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 38%,
      rgba(255, 255, 255, 0.34) 46%,
      rgba(255, 255, 255, 0.10) 54%,
      rgba(255, 255, 255, 0.00) 62%,
      rgba(255, 255, 255, 0.00) 100%) !important;

  transform: translateX(-28%) rotate(0.0001deg) !important;
  opacity: 0.95 !important;
  mix-blend-mode: overlay !important;
}

#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>span.label {
  width: 100% !important;

  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;

  line-height: 1.15 !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  text-align: center !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  transition: color .18s ease, text-shadow .18s ease, font-weight .18s ease;
}

#shortcut-mobile a.shortcut-tile.selected {
  border: 0 !important;
}

#shortcut-mobile a.shortcut-tile.selected::before,
#shortcut-mobile a.shortcut-tile.selected::after {
  content: none !important;
  display: none !important;
}

#shortcut-mobile #ulmodulos-mobile a.shortcut-tile.selected .iconbox>i {
  background: linear-gradient(0deg,
      rgba(56, 132, 72, 1) 0%,
      rgba(122, 232, 128, 1) 100%) !important;
}

#shortcut-mobile #ulmodulos-mobile a.shortcut-tile.selected .iconbox>span.label {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
}

#shortcut-mobile #ulmodulos-mobile a.shortcut-tile.selected:hover .iconbox>i {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.06),
    inset 0.5px 0.5px 0.5px rgba(25, 255, 255, 0.22),
    0 12px 22px rgba(0, 0, 0, 0.24) !important;
}

#shortcut-mobile #ulmodulos-mobile a.shortcut-tile.selected:hover .iconbox>i::after {
  transform: translateX(-8%) !important;
  opacity: 1 !important;
  transition: transform .22s ease, opacity .22s ease !important;
}

/* =========================================================
   BARRA SUPERIOR (TOP NAVBAR) — MODERNIZAÇÃO
   - Fundo: gradiente azul (o mesmo do #shortcut)
   - Altura levemente maior (variável --topbar-h)
   - TODOS os itens centralizados verticalmente de forma
     uniforme: home, acesso rápido, ícones de notificação,
     menu do usuário.
   Estratégia: bloco ADITIVO (não altera regras acima).
   Escopo por ID (header#pc) p/ vencer o tema sem efeitos
   colaterais. Os '!important' ficam só nos espaçamentos
   VERTICAIS (precisam vencer estilos inline e o mobile.css).
   Reversível: basta apagar este bloco. Backup: site-new.css
   ========================================================= */
:root {
  --topbar-h: 58px;
  /* antes 50px (.navbar do Bootstrap) */
}

/* Compensa a barra fixa mais alta (desktop). No mobile o
   mobile.css zera o padding-top depois deste arquivo. */
body {
  padding-top: var(--topbar-h);
}

/* Fundo gradiente azul nas duas barras (igual ao #shortcut) */
header#pc.navbar,
header#pc.navbar-default,
header#mobile.navbar,
header#mobile.navbar-default {
  background: linear-gradient(180deg, rgba(5, 51, 69, 1) 0%, rgba(3, 36, 48, 1) 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Altura da barra desktop + remove a margem inferior do navbar */
header#pc.navbar {
  min-height: var(--topbar-h) !important;
  margin-bottom: 0 !important;
}

/* Wrappers acompanham a altura para não criar "degraus" */
header#pc .container-fluid,
header#pc .navbar-header,
header#pc nav.navbar-collapse {
  min-height: var(--topbar-h);
}

header#pc nav.navbar-collapse {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

header#pc .navbar-nav {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* NÚCLEO DO CENTRAMENTO VERTICAL
   Cada item ocupa a altura total da barra e centraliza o
   conteúdo, anulando paddings/margens verticais próprios.
   O '>' (filho direto) preserva os itens dos dropdowns. */
header#pc .navbar-nav>li {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

header#pc .navbar-nav>li>a,
header#pc .navbar-brand {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  /* remove o cinza do tema (theme-material-1 / .theme-3) */
  color: #fff !important;
}

/* "Acesso rápido": o input vinha empurrado por padding-top
   (mobile.css). Neutraliza o vertical p/ centralizar junto. */
header#pc .autocompletar-acesso-rapido {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ícone "home"/módulo atual: a casinha do FontAwesome "desenha"
   menor que o sino/usuário no mesmo tamanho, parecendo menor.
   Subimos um pouco p/ casar visualmente com os ícones da direita. */
header#pc .navbar-brand i,
header#mobile .navbar-brand i {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* "Acesso rápido": cantos arredondados (o select2 vinha 100% quadrado).
   Escopo na classe do widget p/ NÃO afetar os demais select2 do sistema.
   A setinha (.select2-arrow) acompanha o arredondamento à direita. */
header#pc .autocompletar-acesso-rapido .select2-choice,
header#mobile .autocompletar-acesso-rapido .select2-choice {
  border-radius: 8px !important;
}

header#pc .autocompletar-acesso-rapido .select2-arrow,
header#mobile .autocompletar-acesso-rapido .select2-arrow {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Hover / dropdown aberto: troca o cinza do tema por realce sutil claro */
header#pc .navbar-nav>li>a:hover,
header#pc .navbar-nav>li>a:focus,
header#pc .navbar-nav>.open>a,
header#pc .navbar-nav>.open>a:hover,
header#pc .navbar-nav>.open>a:focus,
header#pc .navbar-brand:hover,
header#pc .navbar-brand:focus {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

/* Mesma limpeza de fundo na barra mobile (#mobile) */
header#mobile .navbar-nav>li>a,
header#mobile .navbar-brand {
  background: transparent !important;
  color: #fff !important;
}

header#mobile .navbar-nav>li>a:hover,
header#mobile .navbar-nav>li>a:focus,
header#mobile .navbar-nav>.open>a {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

/* =========================================================
   REFINO: PARTES "ABERTAS" + ESPAÇAMENTO DOS ÍCONES
   ========================================================= */

/* ---- 1a) Dropdown do "acesso rápido" (select2): mantido no
   padrão por decisão do usuário (o select2 renderiza o drop no
   <body>, sem hook próprio, então não dá pra escopar só ele). */

/* ---- 1b) Menu do usuário (Bootstrap dropdown) -----------
   Escopo em #usuario-menu-content p/ NÃO afetar o overlay
   #show-shortcut nem os dropdowns de notificação. */
header#pc #usuario-menu-content .dropdown-menu {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20) !important;
  margin-top: 10px !important;
  padding: 6px !important;
  min-width: 210px !important;
  overflow: hidden;
}

header#pc #usuario-menu-content .dropdown-menu>li>a {
  border-radius: 7px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
}

header#pc #usuario-menu-content .dropdown-menu>li>a:hover,
header#pc #usuario-menu-content .dropdown-menu>li>a:focus {
  background: rgba(73, 156, 94, 0.12) !important;
  color: #1f2937 !important;
}

header#pc #usuario-menu-content .dropdown-menu .divider {
  margin: 6px 4px !important;
}

/* ---- 2) Espaçamento uniforme dos ícones de notificação --
   Padding horizontal SIMÉTRICO + badge de contagem ancorado
   (absolute) p/ não "empurrar" os vizinhos. Escopo: ul da
   direita do #pc. */
header#pc .navbar-nav.pull-right>li>a {
  position: relative !important;
}

/* ÍCONES (tudo menos o menu do usuário): LARGURA PADRÃO fixa,
   conteúdo centralizado e margem lateral uniforme. Assim o gap
   NÃO depende mais da largura do glifo (acaba a "instabilidade"). */
header#pc .navbar-nav.pull-right>li:not(#usuario-menu-content)>a {
  width: 40px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 5px !important;
  justify-content: center !important;
}

/* 2026-07-16: badge com mais contraste SEM crescer (o contador avisa "tem coisa nova",
   não pode sumir — mas a 1ª tentativa aumentou a caixa e ela desceu SOBRE o ícone; a
   regra da pílula lá embaixo até documenta essa armadilha). A geometria volta ao
   original; a força vem de onde não ocupa espaço: número em BOLD (espessura), vermelho
   mais vivo que o #d9534f do .label-danger, e um ANEL da cor da navbar — é o anel que
   descola o badge do ícone branco atrás (contraste de borda, não só de cor). Vale p/
   TODOS os badges do topo (sino, workflow 999+, financeiro 1047…). */
header#pc .navbar-nav.pull-right .label-badge-notify {
  position: absolute !important;
  top: 9px !important;
  right: 2px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  min-width: 17px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  border-radius: 9px !important;
  text-align: center !important;
  background: #e5484d !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(3, 36, 48, .95) !important;
}

/* Ícones DENTRO do badge (refresh do sino, exclamação do alerta): a ~10px o wght 250
   da barra vira fio de cabelo — aqui a ESPESSURA é o destaque, então traço bem grosso. */
header#pc .navbar-nav.pull-right .label-badge-notify .fa:before {
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20 !important;
}

/* ---- 3) Tiles de módulo (overlay #shortcut) -------------
   O label reaproveita a classe .label do Bootstrap, que força
   white-space:nowrap → nomes longos ("Config. Dashboard") eram
   cortados numa linha só, anulando o -webkit-line-clamp:2.
   Liberamos a quebra (o mobile já tinha). */
#shortcut #ulmodulos .shortcut-tile .iconbox>span.label {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   HOME (#tabelaresultado.modulos): replica o layout dos tiles
   do overlay #shortcut — grade centralizada (8 col → 8+7, sem
   item órfão) + tiles de ícone com gradiente verde.
   MANTÉM o fundo da PÁGINA claro e o rótulo escuro/legível.
   Escopo por #tabelaresultado.modulos (não afeta tabelas de
   resultado de outras telas, que não têm .modulos).
   ========================================================= */
#tabelaresultado.modulos {
  /* tokens responsivos (alterados nas media queries lá embaixo).
     Spec 0005 (2026-07-21, maquete aprovada pelo Matheus): grade densa —
     célula 84px, gap de COLUNA maior que o de LINHA (o rótulo ocupa a faixa
     vertical; col 44 / row 20 deixa o espaço ENTRE os quadrados igual nos
     dois eixos) e teto de 9 colunas (layout.js) => 36 módulos em 4 linhas. */
  --cols: 5;
  /* fallback (o balanceador do layout.js seta inline) */
  --colgap: 64px;
  /* gap entre COLUNAS (maior: equilíbrio visual c/ rótulo) */
  --rowgap: 32px;
  /* gap entre LINHAS (folga p/ rótulo de 2 linhas) */
  --cell: 120px;
  /* largura de referência da célula */
  --tile: 120px;
  /* largura máx. do tile */
  --icon: 104px;
  /* lado do quadrado do ícone */
  --iconfont: 48px;
  /* tamanho do glifo */
  --radius: 20px;
  /* raio do tile */
  --label: 12.5px;
  /* fonte do rótulo */
  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  /* anula linhas fixas herdadas */
  height: auto !important;
  /* remove o height:400px legado (tabela de resultado) */
  max-height: none !important;
  /* ...que fazia os tiles transbordarem no mobile */
  gap: var(--rowgap) var(--colgap) !important;
  max-width: calc((var(--cols) * var(--cell)) + ((var(--cols) - 1) * var(--colgap))) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  /* o #tabelaresultado tinha bg próprio que
                                         só apareceu ao virar grid (com float a
                                         altura era ~0); mantém o fundo da página */
  border: 0 !important;
  box-shadow: none !important;
}

/* Neutraliza o padding legado do theme.css (`.theme-2/.theme-4 .black-eagle
   div#tabelaresultado { padding: 0 12em 2em !important }`): 12em = 168px de
   cada lado POR DENTRO do grid — as colunas calculavam em cima de 772px em vez
   de 1108px e o espaçamento entre tiles desabava (bug pego na bench fiel da
   spec 0005). Mesma especificidade (1,2,1) + site.css carrega depois => vence.
   Mantém só o respiro inferior de 2em que a regra legada dava. */
.black-eagle div#tabelaresultado.modulos {
  padding: 0 0 2em !important;
}

/* tile vira item de grade: zera float/tamanho/borda/sombra legados */
#tabelaresultado.modulos>.shortcut-tile {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--tile) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  justify-self: center !important;
  text-decoration: none !important;
  position: relative !important;
  /* âncora do balão .hm-full (spec 0005) */
}

#tabelaresultado.modulos>.shortcut-tile:hover {
  transform: none !important;
  /* anula o scale(1.07) legado */
}

#tabelaresultado.modulos .iconbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ÍCONE: mesmo tile de gradiente verde do overlay */
#tabelaresultado.modulos .iconbox>i {
  width: var(--icon) !important;
  height: var(--icon) !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(16, 78, 100, 1) 0%, rgba(5, 51, 69, 1) 100%) !important;
  /* azul informado */
  box-shadow:
    inset 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
  font-size: var(--iconfont) !important;
  line-height: 1 !important;
  filter: none !important;
  /* removido o halo (drop-shadow duplo) */
  transition: transform .18s ease, box-shadow .18s ease;
}

/* glifo INTERNO do ícone: gradiente lime aplicado ao texto (clip) */
#tabelaresultado.modulos .iconbox>i::before {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%);
  /* #BBF451 -> #D8F999 */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  transition: filter .18s ease;
}

#tabelaresultado.modulos>.shortcut-tile:hover .iconbox>i {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow:
    inset 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 14px rgba(187, 244, 81, 0.10),
    /* brilho interno lime (bem sutil) */
    0 12px 24px rgba(0, 0, 0, 0.20) !important;
}

/* glifo "acende" no hover (bem sutil) */
#tabelaresultado.modulos>.shortcut-tile:hover .iconbox>i::before {
  filter: drop-shadow(0 0 4px rgba(187, 244, 81, 0.28)) !important;
}

/* RÓTULO: legível no fundo claro, centralizado, com quebra.
   Spec 0005: CLAMP em 2 linhas + altura FIXA de 2 linhas => todas as células
   têm a mesma altura (linhas do grid uniformes, sem "degrau" de rótulo longo).
   Nome completo de quem truncar aparece no balão .hm-full (home_modulos.js). */
#tabelaresultado.modulos .iconbox>span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.6em !important;
  /* 2 × line-height 1.3 */
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: var(--label) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: rgba(5, 51, 69, 1) !important;
  /* azul escuro (extremo do gradiente informado) */
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* neutraliza artefatos legados de "selected" (check/canto) se houver */
#tabelaresultado.modulos .shortcut-tile.selected {
  border: 0 !important;
}

#tabelaresultado.modulos .shortcut-tile.selected::before,
#tabelaresultado.modulos .shortcut-tile.selected::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   OVERLAY #shortcut (barra superior): INVERTIDO da home —
   quadrado VERDE LIME + glifo AZUL ESCURO (a barra já é azul
   escuro). No lugar do verde + glifo branco originais.
   Override aditivo (não altera a regra original). Desktop + mobile.
   ========================================================= */
#shortcut #ulmodulos .shortcut-tile .iconbox>i,
#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>i {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  /* quadrado LIME #BBF451 -> #D8F999 */
}

/* glifo AZUL ESCURO (clip no texto), no lugar do branco */
#shortcut #ulmodulos .shortcut-tile .iconbox>i::before,
#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>i::before {
  background: linear-gradient(180deg, rgba(16, 78, 100, 1) 0%, rgba(5, 51, 69, 1) 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* módulo 'selected' (atual): quadrado lime + leve sombra interna azul como destaque */
#shortcut #ulmodulos a.shortcut-tile.selected .iconbox>i,
#shortcut-mobile #ulmodulos-mobile a.shortcut-tile.selected .iconbox>i {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  box-shadow:
    inset 0 0 20px rgba(5, 51, 69, 0.30),
    0 10px 20px rgba(0, 0, 0, 0.18) !important;
}

/* =========================================================
   HOME: ocupar a altura da tela (100vh - navbar), centralizar
   os módulos verticalmente e jogar o "Utilizar painel do
   usuário" (.pull-left) pro rodapé.
   Escopo via :has(> #gridmodulos) -> pega SÓ o container-fluid
   da home (os outros .container-fluid do app não têm #gridmodulos).
   Degrada sem efeito em navegadores sem :has (sem quebrar nada).
   ========================================================= */
.container-fluid:has(> #gridmodulos) {
  display: grid !important;
  grid-template-rows: 1fr auto 1fr !important;
  /* linha do meio = centro vertical EXATO */
  min-height: calc(100vh - var(--topbar-h, 58px)) !important;
  padding-top: 40px !important;
  /* margem mínima topo: logo nunca cola na navbar */
  padding-bottom: 40px !important;
  /* simétrico p/ manter os ícones centralizados */
  box-sizing: border-box !important;
}

/* logo: encolhe pro conteúdo e fica no FIM da 1ª linha (logo acima
   dos ícones), com um respiro generoso até eles. */
.container-fluid:has(> #gridmodulos)>.logo_portal {
  grid-row: 1 !important;
  align-self: end !important;
  height: auto !important;
  margin: 0 0 112px 0 !important;
  /* respiro logo -> ícones (dobro) */
}

/* ÍCONES na 2ª linha (auto, entre as duas 1fr) => centro vertical exato.
   width/max-width: solta o cap de 1170px do .container (Bootstrap) — em
   monitor largo o grid usa a tela (spec 0005, 3ª rodada: "tela muito
   centralizada, usando pouquíssimo espaço"). O limite real vem do max-width
   calculado do próprio grid (#tabelaresultado.modulos). */
.container-fluid:has(> #gridmodulos)>#gridmodulos {
  grid-row: 2 !important;
  align-self: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  /* 100% (não auto!): auto encolhe pro conteúdo e o
                               balanceador, que mede a largura pelo container,
                               entra em circularidade e trava em poucas colunas */
  max-width: none !important;
}

/* aviso de segurança (normalmente oculto) não atrapalha a grade */
.container-fluid:has(> #gridmodulos)>#msgSeguranca {
  grid-row: 2 !important;
  align-self: start !important;
}

/* toggle no rodapé, à esquerda (3ª linha). Em tela baixa as linhas
   1fr encolhem; como são faixas separadas, NADA sobrepõe e gera SCROLL. */
.container-fluid:has(> #gridmodulos)>.pull-left {
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: start !important;
  float: none !important;
  margin: 0 !important;
}

/* =========================================================
   TEXTURA 3D (estilo ícone macOS): leve brilho no canto
   superior-esquerdo e inferior-direito + sheen diagonal.
   Tiles da home e do overlay. O brilho vem de um ::after;
   o glifo (::before) fica ACIMA dele (z-index).
   ========================================================= */
#tabelaresultado.modulos .iconbox>i,
#shortcut #ulmodulos .shortcut-tile .iconbox>i,
#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>i {
  position: relative !important;
}

#tabelaresultado.modulos .iconbox>i::before,
#shortcut #ulmodulos .shortcut-tile .iconbox>i::before,
#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>i::before {
  z-index: 2 !important;
  /* glifo acima do brilho */
}

#tabelaresultado.modulos .iconbox>i::after,
#shortcut #ulmodulos .shortcut-tile .iconbox>i::after,
#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>i::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  /* CAMADA DE VIDRO (glassmorphia):
     1) reflexo "domo" pooling no topo (luz batendo no vidro curvo);
     2) leve luz nos cantos sup-esq/inf-dir (bisel);
     ambos fadeiam antes do miolo -> centro fica a cor pura, sem glow/cinza. */
  background:
    radial-gradient(120% 82% at 50% -18%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(66% 66% at 0% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(66% 66% at 100% 100%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 48%) !important;
  /* aresta superior do vidro (rim de luz fino) */
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.30) !important;
}

/* =========================================================
   RESPONSIVO da home: grade + tamanhos por dispositivo.
   Só trocam as variáveis (--cols/--icon/...) por breakpoint.
   Ordem do maior p/ o menor (max-width) -> o menor vence.
   ========================================================= */
/* Notebook (≤1279): ícone um pouco menor que desktop */
@media (max-width: 1279px) {
  #tabelaresultado.modulos {
    --cell: 104px;
    --tile: 104px;
    --colgap: 48px;
    --rowgap: 26px;
    --icon: 92px;
    --iconfont: 42px;
    --radius: 18px;
    --label: 12px;
  }
}

/* Tablet (≤991): 4 colunas */
@media (max-width: 991px) {
  #tabelaresultado.modulos {
    --cols: 4;
    --cell: 104px;
    --tile: 104px;
    --colgap: 36px;
    --rowgap: 22px;
    --icon: 84px;
    --iconfont: 38px;
    --radius: 17px;
    --label: 11.5px;
  }

  /* mantém a centralização do desktop (1fr auto 1fr) também no
     tablet/mobile — agora funciona sem transbordar porque o cap de
     400px do #tabelaresultado foi removido. Toggle volta pro rodapé. */
  .container-fluid:has(> #gridmodulos)>.logo_portal {
    margin-bottom: 72px !important;
  }
}

/* Celular grande (≤767): 3 colunas */
@media (max-width: 767px) {
  #tabelaresultado.modulos {
    --cols: 3;
    --cell: 100px;
    --tile: 100px;
    --colgap: 24px;
    --rowgap: 18px;
    --icon: 72px;
    --iconfont: 34px;
    --radius: 15px;
    --label: 11px;
  }

  .container-fluid:has(> #gridmodulos)>.logo_portal {
    margin-bottom: 48px !important;
  }

  .container-fluid:has(> #gridmodulos) {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* Celular pequeno (≤479): 2 colunas */
@media (max-width: 479px) {
  #tabelaresultado.modulos {
    --cols: 2;
    --cell: 120px;
    --tile: 120px;
    --colgap: 20px;
    --rowgap: 16px;
    --icon: 66px;
    --iconfont: 32px;
    --radius: 14px;
    --label: 11px;
  }
}

/* NAVBAR — switch limpo em 990px. O legado deixava #pc e #mobile
   aparecerem JUNTOS entre 768–989px (dois "acesso rápido").
   Abaixo de 990 mostramos só a navbar mobile. */
@media (max-width: 989px) {
  header#pc {
    display: none !important;
  }

  /* header#mobile TAMBÉM é .navbar-fixed-top (position:fixed) — não fica no
     fluxo como o comentário antigo desta regra presumia (por isso o
     conteúdo, ex.: a logo da home, nascia atrás da navbar). --mobile-topbar-h
     é calculado e mantido atualizado via JS (bloco-menu-topo.php), com a
     altura REAL da navbar mobile (pode variar: 1 ou 2 linhas de ícones). O
     fallback 58px cobre o instante antes do JS rodar.
     Precisa de !important aqui pra bater com o !important desta mesma regra
     (senão o padding-top setado via JS no <body> perde pra esse !important,
     mesmo sendo inline, já que !important de stylesheet sempre vence inline
     sem !important). */
  body {
    padding-top: var(--mobile-topbar-h, 58px) !important;
  }
}

/* Hambúrguer (#mobile): hover/foco/ABERTO em LIME (era cinza),
   com as barras escuras pra contraste. */
header#mobile .navbar-toggle {
  background: transparent !important;
  /* remove o cinza padrão do tema */
  border-color: rgba(255, 255, 255, 0.30) !important;
  /* borda sutil visível na navbar escura */
  transition: background .15s ease, border-color .15s ease;
}

header#mobile .navbar-toggle .icon-bar {
  background-color: rgba(255, 255, 255, 0.9) !important;
  /* barras claras no estado padrão */
}

header#mobile .navbar-toggle:hover,
header#mobile .navbar-toggle:not(.collapsed) {
  /* sem :focus -> não fica preso ativo após fechar */
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  border-color: rgba(187, 244, 81, 0.7) !important;
}

header#mobile .navbar-toggle:hover .icon-bar,
header#mobile .navbar-toggle:not(.collapsed) .icon-bar {
  background-color: #0a2a38 !important;
  /* barras escuras sobre o lime */
}

/* #mobile: acesso rápido + hambúrguer alinhados verticalmente
   (eram col-xs-6 com float, alinhando pelo topo). */
header#mobile .navbar-header>div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* acesso à ESQUERDA, hambúrguer à DIREITA */
  min-height: 50px !important;
}

header#mobile .navbar-header>div:first-child>.col-xs-6 {
  float: none !important;
  width: auto !important;
  /* não força 50%; o space-between separa os dois extremos */
  display: flex !important;
  align-items: center !important;
}

/* o acesso rápido vinha empurrado por margin-top/padding-top (mobile.css)
   -> saía do centro. Neutraliza pra centralizar de fato. */
header#mobile .autocompletar-acesso-rapido,
header#mobile .input-acessorapido>.autocompletar-acesso-rapido {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

header#mobile .input-acessorapido {
  display: flex !important;
  align-items: center !important;
}

/* largura PADRONIZADA do acesso rápido no #mobile: mesma no celular
   E no tablet (o mobile.css deixava 15em no celular e indefinida no
   tablet). Teto em vw evita estourar em telas bem estreitas. */
header#mobile .autocompletar-acesso-rapido,
header#mobile .input-acessorapido .autocompletar-acesso-rapido {
  width: 280px !important;
  max-width: 70vw !important;
}

/* dropdown do acesso rápido (select2) acima da navbar (z-index 9999999),
   senão abre "embaixo" do menu */
.select2-drop {
  z-index: 10000000 !important;
}

/* PERFIL no mobile (é um popover, não o dropdown do desktop) — visual de
   "action sheet" mobile: largura quase cheia (left/right setados via JS,
   ver bloco-menu-topo.php) em vez da caixinha estreita flutuando à direita,
   cantos mais arredondados, alvos de toque maiores (~44px, guideline de
   toque mobile). Escopo via :has p/ não afetar outros popovers. */
.popover:has(#usuario-menu-mobile) {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
  padding: 10px !important;
}

.popover:has(#usuario-menu-mobile) .arrow {
  display: none !important;
}

.popover:has(#usuario-menu-mobile) #usuario-menu-mobile h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 4px 0 8px !important;
  padding: 8px 14px !important;
  color: #1f2937 !important;
}

.popover:has(#usuario-menu-mobile) #usuario-menu-mobile span {
  display: block !important;
}

.popover:has(#usuario-menu-mobile) #theme-mode-toggle-mobile {
  padding: 8px 14px !important;
}

.popover:has(#usuario-menu-mobile) .theme-toggle-label span {
  font-size: 15px !important;
}

.popover:has(#usuario-menu-mobile) .theme-toggle-label i {
  font-size: 18px !important;
}

/* botões viram itens limpos (igual ao dropdown moderno do desktop), com
   altura de alvo de toque confortável pro dedo (não pro cursor de mouse) */
.popover:has(#usuario-menu-mobile) .botaoLogoff {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 13px 14px !important;
  color: #1f2937 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

.popover:has(#usuario-menu-mobile) .botaoLogoff i {
  font-size: 17px !important;
  width: 18px !important;
  text-align: center !important;
}

.popover:has(#usuario-menu-mobile) .btn-primary.botaoLogoff:active {
  background: rgba(73, 156, 94, 0.18) !important;
  color: #1f2937 !important;
}

.popover:has(#usuario-menu-mobile) .btn-danger.botaoLogoff {
  color: #c0392b !important;
}

.popover:has(#usuario-menu-mobile) .btn-danger.botaoLogoff:active {
  background: rgba(231, 76, 60, 0.14) !important;
  color: #c0392b !important;
}

.popover:has(#usuario-menu-mobile) .hrmenu {
  margin: 6px 4px !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Tema escuro: as regras acima cravam texto escuro (#1f2937) pensado pro fundo
   branco padrão do Bootstrap — sob body.theme-5 o popover vira fundo azul-marinho
   (.theme-5 .popover, site.css ~1756) e esse texto escuro ficava ilegível
   (cinza-sobre-marinho quase invisível). Reaplica as mesmas regras com cores
   claras, igual ao resto do tema escuro do sistema. */
body.theme-5 .popover:has(#usuario-menu-mobile) #usuario-menu-mobile h4 {
  color: #b3ff2b !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .theme-toggle-label span {
  color: #d4d8e2 !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .theme-toggle-label i {
  color: #9ca3af !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .theme-toggle-label i.fa-sun-o {
  color: #f59e0b !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .botaoLogoff {
  color: #d4d8e2 !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .btn-primary.botaoLogoff:active {
  background: rgba(179, 255, 43, 0.14) !important;
  color: #d4d8e2 !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .btn-danger.botaoLogoff {
  color: #ff8577 !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .btn-danger.botaoLogoff:active {
  background: rgba(255, 107, 91, 0.16) !important;
  color: #ff8577 !important;
}

body.theme-5 .popover:has(#usuario-menu-mobile) .hrmenu {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* #mobile: ícones do menu expandido espalhados na horizontal */
header#mobile #navbar {
  width: 100% !important;
}

/* collapse full-width p/ os ícones espalharem */
header#mobile #navbar .barra {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-around !important;
  width: 100% !important;
}

/* mantém ocultos os itens marcados como .hide (ex.: "Guia") —
   meu flex anterior estava des-ocultando eles por engano */
header#mobile #navbar .barra>.hide {
  display: none !important;
}

/* células iguais, com o ícone centralizado dentro de cada uma */
header#mobile #navbar .barra>*:not(.hide) {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  margin: 0 !important;
}

header#mobile #navbar .barra a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  height: auto !important;
}

header#mobile #navbar .barra a i {
  font-size: 22px !important;
  /* normaliza (o "?" era fa-2x) */
  line-height: 1 !important;
}

/* =========================================================
   TEMA ESCURO (.theme-5): diferenciação da barra superior
   e do overlay de atalhos — mantém o azul-petróleo da
   modernização, porém num tom MAIS ESCURO (leve mudança).
   Vem por último p/ vencer as regras de modernização acima;
   especificidade .theme-5 + #id + .class garante precedência.
   ========================================================= */
.theme-5 header#pc.navbar,
.theme-5 header#pc.navbar-default,
.theme-5 header#mobile.navbar,
.theme-5 header#mobile.navbar-default {
  background: linear-gradient(180deg, rgba(4, 40, 54, 1) 0%, rgba(2, 28, 37, 1) 100%) !important;
}

.theme-5 #shortcut,
.theme-5 #shortcut-mobile {
  background: linear-gradient(180deg, rgba(4, 40, 54, 1) 0%, rgba(2, 28, 37, 1) 100%) !important;
  /* dark: troca a sombra escura (invisível no escuro) por um leve glow que separa o fim do menu */
  box-shadow: 0 5px 22px rgba(255, 255, 255, 0.07) !important;
}

/* =========================================================
   TEMA ESCURO (.theme-5): padroniza os RÓTULOS dos módulos
   com o MESMO gradiente lime dos ícones (#BBF451 -> #D8F999),
   aplicado ao texto via background-clip. O menu (#shortcut)
   também fica com peso/tamanho mais discretos.
   OBS: o rótulo real é ".iconbox > span" — o HTML usa
   <span data-nome> (NÃO span.label), por isso o seletor sem
   .label (com .label as regras da modernização não pegavam).
   ========================================================= */

/* gradiente lime no TEXTO: home + menu de atalhos (desktop e mobile) */
.theme-5 #tabelaresultado.modulos .iconbox>span,
.theme-5 #shortcut #ulmodulos .shortcut-tile .iconbox>span,
.theme-5 #shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>span {
  background: linear-gradient(180deg, #BBF451 0%, #D8F999 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* menu de atalhos: peso/tamanho do rótulo — SEM escopo de tema, para
   manter o claro e o escuro CONSISTENTES (mesmo tamanho/peso; só a cor
   muda por tema). Seletor correto: .iconbox > span (o HTML não usa .label). */
#shortcut #ulmodulos .shortcut-tile .iconbox>span,
#shortcut-mobile #ulmodulos-mobile .shortcut-tile .iconbox>span {
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* =========================================================
   TEMA ESCURO (.theme-5): hover/aberto dos itens da barra
   superior. O realce branco 10% (modernização) virava um
   "bloco claro" que destoava do petróleo escuro e não casava
   com o dropdown. Aqui: hover = realce bem sutil; item ABERTO
   = escurece (parece "pressionado" e conecta com o dropdown).
   ========================================================= */
.theme-5 header#pc .navbar-nav>li>a:hover,
.theme-5 header#pc .navbar-nav>li>a:focus,
.theme-5 header#pc .navbar-brand:hover,
.theme-5 header#pc .navbar-brand:focus {
  background: rgba(255, 255, 255, 0.06) !important;
}

.theme-5 header#pc .navbar-nav>.open>a,
.theme-5 header#pc .navbar-nav>.open>a:hover,
.theme-5 header#pc .navbar-nav>.open>a:focus {
  background: rgba(0, 0, 0, 0.22) !important;
  color: #fff !important;
}

/* =========================================================
   TEMA ESCURO (.theme-5): hover dos ITENS do dropdown de perfil
   (Alterar minha senha / Sair). A modernização punha color:#1f2937
   (texto escuro) no hover — ilegível sobre o fundo escuro. Aqui:
   texto claro + realce lime sutil (ícone herda a cor clara).
   ========================================================= */
.theme-5 header#pc #usuario-menu-content .dropdown-menu>li>a:hover,
.theme-5 header#pc #usuario-menu-content .dropdown-menu>li>a:focus {
  background: rgba(187, 244, 81, 0.12) !important;
  color: #e6edf3 !important;
}

/* =========================================================
   LOADING GLOBAL (#loading, bloco-superior.php): substituir o
   "3D Galaxy Loader" (logo 3D + partículas em canvas, theme.js)
   por um spinner SUAVE 100% CSS — o canvas fica oculto (o JS
   continua rodando invisível, inofensivo). Anel girando via
   ::before + LOGO iiLEX (SVG embutido em data: URI) parado no
   centro via ::after, com "respiração" sutil. O #loadingText
   ("Carregando…") continua igual. REVERSÍVEL: apagar este bloco
   restaura o galaxy. Cores iiLEX: verde #9AE600 no claro;
   lime #BBF451 no escuro (.theme-5).
   ========================================================= */
#loading #canvasLoading {
  display: none !important;
}

/* anel girando */
#loading #modalLoading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border: 4px solid rgba(154, 230, 0, 0.22);
  /* anel base (light) */
  border-top-color: #9AE600;
  /* arco verde iiLEX */
  border-radius: 50%;
  animation: ixLoadingSpin 0.8s linear infinite;
}

.theme-5 #loading #modalLoading::before {
  border-color: rgba(255, 255, 255, 0.15);
  /* anel base (dark) */
  border-top-color: #BBF451;
  /* arco lime */
}

/* logo iiLEX no centro do anel (proporção do SVG 2601:1797 ≈ 58x40) */
#loading #modalLoading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 40px;
  margin: -20px 0 0 -29px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2601 1797'%3E%3Cpath d='M1041.6 898.5C1214.18 599 1386.82 299.5 1559.4 0H519.598L0 898.5H1041.6C1214.18 1198 1386.82 1497.5 1559.4 1797H2601C2427.83 1497.5 2254.65 1198 2081.4 898.5H1041.53H1041.6Z' fill='%239AE600'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: ixLoadingPulse 2s ease-in-out infinite;
}

.theme-5 #loading #modalLoading::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2601 1797'%3E%3Cpath d='M1041.6 898.5C1214.18 599 1386.82 299.5 1559.4 0H519.598L0 898.5H1041.6C1214.18 1198 1386.82 1497.5 1559.4 1797H2601C2427.83 1497.5 2254.65 1198 2081.4 898.5H1041.53H1041.6Z' fill='%23BBF451'/%3E%3C/svg%3E");
}

@keyframes ixLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ixLoadingPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.65;
  }
}

/* respeita quem pediu menos movimento no SO */
@media (prefers-reduced-motion: reduce) {
  #loading #modalLoading::before {
    animation-duration: 1.6s;
  }

  #loading #modalLoading::after {
    animation: none;
  }
}

/* =========================================================
   SKELETON LOADING DOS SUBMÓDULOS (editardados.php/layout.js):
   os submódulos carregam em paralelo depois da ficha principal
   (~1s cada) — usar o #loading de tela cheia pra isso trava a
   sensação de "já carregou" mesmo o usuário nem tendo rolado até
   lá ainda. Skeleton shimmer local (só na área do painel/grid que
   está carregando) passa a sensação de app mais rápido sem
   bloquear a tela toda. Cores neutras (cinza claro/escuro conforme
   tema), nada de verde/lime aqui — é só placeholder de estrutura.
   ========================================================= */
.skeleton-linha {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #eceff1 25%, #f6f7f8 37%, #eceff1 63%);
  background-size: 400% 100%;
  animation: ixSkeletonShimmer 1.4s ease infinite;
}

.theme-5 .skeleton-linha {
  background: linear-gradient(90deg, #1c2733 25%, #263241 37%, #1c2733 63%);
  background-size: 400% 100%;
}

.skeleton-submodulo-panel {
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.theme-5 .skeleton-submodulo-panel {
  border-color: rgba(255, 255, 255, 0.08);
}

.skeleton-submodulo-panel .skeleton-linha:first-child {
  width: 35%;
  height: 18px;
}

.skeleton-submodulo-panel .skeleton-linha:not(:first-child) {
  width: 100%;
}

.skeleton-submodulo-panel .skeleton-linha:last-child {
  width: 70%;
  margin-bottom: 0;
}

.skeleton-grid-linha {
  padding: 4px 0;
}

@keyframes ixSkeletonShimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-linha {
    animation-duration: 2.4s;
  }
}

/* =========================================================
   SIDEBAR MODERNO (menu lateral dos módulos) + REFINOS NAVBAR
   Aprovado via mockup (proposta B): rail com gradiente da
   marca, itens realinhados, ativo verde (classe
   .menu-item-ativo adicionada pelo layout.js), "Recolher" com
   texto no topo (restyle do .hide-menu existente — sem tocar
   no PHP). Refinos navbar: hover em pílula, respiro do
   acesso rápido e ícones outline (FA 4.7).
   REVERSÍVEL: apagar este bloco (e o bloco do layout.js).
   ========================================================= */

/* ---- Sidebar: fundo = gradiente da marca (coluna via ::before) ---- */
#menu.menu-lateral .sidebar {
  background: transparent !important;
  border-color: transparent !important;
}

#menu.menu-lateral .sidebar::before {
  background: linear-gradient(180deg, #104E64 0%, #053345 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* No dark, o bloco base pinta #menu, .sidebar E o ul#sidebar de
   #0b0f19 !important — cobria o gradiente do ::before. Zera os três
   no escopo do menu lateral (o gradiente escuro fica no ::before). */
.theme-5 #menu.menu-lateral,
.theme-5 #menu.menu-lateral .sidebar,
.theme-5 #menu.menu-lateral #sidebar {
  background: transparent !important;
  border-color: transparent !important;
}

.theme-5 #menu.menu-lateral .sidebar::before {
  background: linear-gradient(180deg, #0c3b4d 0%, #032430 100%) !important;
  border-color: #1a2333 !important;
}

/* mobile: o ::before some (base), o fundo vai direto no .sidebar */
@media (max-width: 991px) {

  #menu.menu-lateral .sidebar,
  .theme-5 #menu.menu-lateral .sidebar {
    background: linear-gradient(180deg, #104E64 0%, #053345 100%) !important;
  }
}

/* ---- Itens: alinhados, arredondados, coluna fixa de ícone ---- */
#sidebar>li>a {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  color: rgba(255, 255, 255, 0.95) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  margin: 2px 6px;
  line-height: 1.3 !important;
  font-size: 13px;
}

#sidebar>li>a .icon-menu {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 15px !important;
  width: 18px !important;
  height: auto !important;
  margin-right: 0 !important;
  text-align: center;
  flex: 0 0 auto;
}

#sidebar>li>a:hover,
#sidebar>li>a:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* Badge de notificação DENTRO do item (ex.: Notas Pendentes):
   o JS dá prepend no <a> com left:8px inline + top/left relativos
   do layout.css — no flex virava o 1º filho e quebrava a linha.
   Vira flex-item normal, empurrado pro fim (direita) do item. */
#sidebar>li>a {
  position: relative;
}

#sidebar>li>a .label-badge-notify {
  position: static !important;
  top: auto !important;
  left: auto !important;
  order: 99;
  margin-left: auto !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  flex: 0 0 auto;
}

/* recolhido: bolinha no canto superior direito do item */
.menu-minimized #sidebar>li>a .label-badge-notify {
  position: absolute !important;
  top: 0 !important;
  right: 2px !important;
  margin: 0 !important;
}

/* ativo (marcado pelo layout.js): realce verde, sem barra */
#sidebar>li>a.menu-item-ativo {
  background: rgba(154, 230, 0, 0.16) !important;
  color: #fff !important;
  font-weight: 600;
}

#sidebar>li>a.menu-item-ativo .icon-menu {
  color: #9AE600 !important;
}

.theme-5 #sidebar>li>a.menu-item-ativo {
  background: rgba(187, 244, 81, 0.15) !important;
}

.theme-5 #sidebar>li>a.menu-item-ativo .icon-menu {
  color: #BBF451 !important;
}

/* conteúdo extra do sidebar (filtros da agenda etc.) legível no petróleo */
#sidebar .menu-text label,
#sidebar li .form-group label {
  color: rgba(255, 255, 255, 0.9) !important;
}

#sidebar .fa-info-circle {
  color: rgba(255, 255, 255, 0.8) !important;
}

#menu.menu-lateral hr {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---- "Recolher": de caixote cinza a item com texto no topo ---- */
#menu.menu-lateral .hide-menu {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  margin: 2px 6px 8px;
  padding: 8px 10px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  text-align: left !important;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

#menu.menu-lateral .hide-menu:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

#menu.menu-lateral .hide-menu i {
  font-size: 15px !important;
  padding: 0 !important;
  width: 18px;
  text-align: center;
}

#menu.menu-lateral .hide-menu::after {
  content: "Recolher";
}

#menu.menu-minimized .hide-menu::after {
  content: none;
}

#menu.menu-minimized .hide-menu {
  justify-content: center;
  margin: 2px 4px 8px;
}

/* setas do Recolher/Expandir: Material Symbols (fonte declarada mais abaixo) */
#menu .icone-menu-lateral.fa-arrow-circle-left:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e5c4";
}

#menu .icone-menu-lateral.fa-arrow-circle-right:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e5c8";
}

/* ---- Minimizado: rail de 56px (45px ficava magro e "colado"),
   tudo centralizado de verdade; rótulo segue no popover ---- */
#menu.menu-minimized,
.menu-minimized .sidebar,
.menu-minimized .sidebar::before {
  width: 56px !important;
}

.menu-minimized #sidebar {
  margin-top: 0;
}

.menu-minimized #sidebar>li>a {
  justify-content: center !important;
  padding: 9px 0 !important;
  margin: 2px 8px;
  gap: 0;
}

.menu-minimized #sidebar>li>a .icon-menu {
  width: auto !important;
  font-size: 16px !important;
}

/* "Expandir": pill com borda p/ se diferenciar dos itens de navegação */
#menu.menu-minimized .hide-menu {
  justify-content: center;
  margin: 2px 8px 10px;
  padding: 8px 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#menu.menu-minimized .hide-menu:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

/* Tooltip/popover SÓ no recolhido: a regra antiga dependia da classe
   .menu-expanded, que o toggle às vezes não devolve — invertendo a
   lógica, escondemos sempre que NÃO estiver minimizado. */
#menu:not(.menu-minimized) .popover {
  display: none !important;
}

/* ---- Conteúdo × menu lateral: fim da SOBREPOSIÇÃO ----
   Telas de importação/notas/multiconta reciclam o .stack-container
   (nascido p/ o login: card centrado na LARGURA TOTAL, width 80%
   inline; ≤1199px vira 100%) — ele ignorava o float do menu e
   desenhava por cima. Nas páginas COM menu lateral, o container
   passa a viver AO LADO do menu (250px expandido / 56px recolhido). */
body:has(#menu.menu-lateral) .stack-container {
  width: auto !important;
  margin-left: 274px !important;
  /* 250px do menu + respiro */
  margin-right: 24px !important;
  transition: margin-left .18s ease;
}

body:has(#menu.menu-minimized) .stack-container {
  margin-left: 80px !important;
  /* 56px do rail + respiro */
}

@media (max-width: 991px) {

  /* mobile: o menu deixa de flutuar (fica acima) — volta ao normal */
  body:has(#menu.menu-lateral) .stack-container,
  body:has(#menu.menu-minimized) .stack-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- [INATIVO] Tabler Icons 2.47 (fonte LOCAL, MIT) — mantido só como ROLLBACK ----
   SUBSTITUÍDO pelo Material Symbols Rounded (bloco logo abaixo). Nenhuma regra usa
   mais 'tabler-icons'. A fonte fica no disco pra rollback rápido; remover quando
   a migração estiver validada. */
@font-face {
  font-family: 'tabler-icons';
  src: url('../fonts/tabler/tabler-icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ---- ÍCONES: Material Symbols Rounded (fonte LOCAL, Apache 2.0) — SUBSTITUI o Tabler ----
   SUBSET com só os ícones que usamos: v55 = 306 glifos / 400KB (inclui o catálogo ms-* de 291 ícones dos módulos) (a variável completa tem 15MB).
   Gerado com fontTools/pyftsubset a partir da variável do Google, mantendo os EIXOS.
   >>> CALIBRAGEM NUM LUGAR SÓ: o --ms-axes abaixo. <<<
     FILL 0=outline/1=preenchido · wght 100..700 (200=fino; 300/400 se ficar lavado)
     GRAD 0=fundo claro (o -25 é p/ fundo ESCURO) · opsz = casar com o tamanho renderizado
   O Tabler segue no disco como rollback até a validação.

   >>> PRA ADICIONAR UM ÍCONE NOVO — LEIA, senão ele sai como quadradinho vazio: <<<
   1. A fonte é um SUBSET: só tem os glifos listados. Codepoint fora da lista NÃO renderiza.
   2. Pegue o codepoint na tabela OFICIAL (nome + código), nunca de memória:
      github.com/google/material-design-icons → variablefont/MaterialSymbolsRounded[...].codepoints
   3. Regere o subset a partir da variável completa (mesmo repo), somando o novo codepoint
      aos que já existem:  python3 -m fontTools.subset FONTE.ttf --unicodes-file=lista.txt
                           --flavor=woff2 --output-file=material-symbols-rounded.woff2
      Confira depois que o fvar sobreviveu (FILL/GRAD/opsz/wght) — sem ele o --ms-axes morre.
   4. SUBA O ?v= ABAIXO. O arquivo troca de conteúdo mas não de nome: sem versão nova, quem
      tem a fonte velha em cache (navegador guarda fonte por MUITO tempo) fica sem os
      glifos novos e não tem como saber disso. */
/* 2026-07-27 — v58: +5 glifos (334 -> 339, +2280 bytes): link \e157, home \e88a,
   work \e0af (maleta), autorenew \e86a e auto_fix \e663 (varinha) — os que faltavam
   p/ trocar os icones da tela de publicacoes. fvar intacto, zero glifo perdido.

   2026-07-27 — v57: +4 glifos (330 -> 334, +884 bytes): chevron_left \e5cb,
   chevron_right \e5cc, arrow_upward \e5d8 e arrow_downward \e5db — as setas
   legadas (`fa-chevron-*`, `fa-arrow-up/down`) que apareciam em 4-5 arquivos cada
   e nao tinham equivalente no subset. Conferido: fvar intacto e ZERO glifo
   perdido. Rollback = commit c6255ff3c (versao de 330 glifos).

   2026-07-27 — v56: subset regerado 306 -> 330 glifos (+84 bytes apenas, de 409380
   p/ 409464). Somados os que faltavam e travavam trocas de glifo: zoom_in \e8ff e
   search \e8b6 (a LUPA — antes so dava p/ desenhar em SVG), edit \e3c9 / create \e150
   (LAPIS, o `glyphicon-pencil` que ficara sem equivalente), more_horiz \e5d3 (que
   renderizou QUADRADO VAZIO numa tentativa), mais um conjunto de UI comum (filtros,
   setas, visibility, close, print, lock...) p/ nao ter de regerar a cada ajuste.
   Conferido antes de trocar: fvar intacto (FILL/GRAD/opsz/wght) e ZERO glifo do
   arquivo anterior perdido. Backup: material-symbols-rounded-old-20260727.woff2 */
@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../fonts/material-symbols/material-symbols-rounded.woff2?v=58') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

/* CALIBRADO na tela real: 'wght' 200 + 'opsz' 24 sumia nos ícones pequenos (lupa do
   Pesquisar, sino da navbar, "i" da Máscara ~16-18px). 300 + opsz 20 = traço legível
   no pequeno sem pesar no grande. */
:root {
  --ms-axes: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* As DUAS BARRAS agora rodam os ícones a 24px (subiram de 21). O 300/opsz20 acima foi
   calibrado p/ os PEQUENOS in-page (lupa, "i" da máscara) e a 24 lê grosso. Redefinir
   --ms-axes NO ESCOPO das barras afina só elas (todo ícone de lá usa var(--ms-axes),
   inclusive o flowchart) e deixa o :root 300 intacto para os pequenos. opsz casa com 24.
   Valor final (200 vs 250) escolhido pelo Matheus no bench. */
header#pc,
header#mobile,
#menu .sidebar {
  /* GRAD -25: recomendação da doc oficial p/ FUNDO ESCURO — glifo claro no escuro
     parece opticamente mais grosso (irradiação); a grade negativa compensa o brilho.
     As barras são petróleo escuro em todos os temas. (Matheus aprovou, 2026-07-16.) */
  --ms-axes: 'FILL' 0, 'wght' 250, 'GRAD' -25, 'opsz' 24;
}

/* Sidebar (#menu) — mapa fa/glyphicon -> Material Symbols */
#menu .glyphicon-home:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e9b2";
}

#menu .glyphicon-circle-arrow-right:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\eaaa";
}

#menu .fa-list:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e896";
}

#menu .fa-line-chart:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e6e1";
}

#menu .fa-calendar:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ebcc";
}

#menu .fa-search:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ef7a";
}

#menu .fa-plus:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e145";
}

#menu .fa-exchange:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e8d4";
}

#menu .fa-money:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ef63";
}

#menu .fa-bar-chart:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e26b";
}

#menu .fa-calculator:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ea5f";
}

#menu .fa-exclamation-circle:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\f8b6";
}

#menu .fa-address-book-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e0ba";
}

#menu .fa-retweet:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e040";
}

#menu .fa-upload:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\f09b";
}

#menu .fa-file:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e873";
}

/* fa-code-fork: SEM swap Material Symbols — o layout.css (merge nova-visão-workflow)
   troca o fork por SVG mask globalmente; adotamos o deles (forma igual). */
#menu .fa-cogs:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e8b8";
}

/* =========================================================
   NAVBAR — refinos aprovados junto com o sidebar
   ========================================================= */

/* 1) Hover em pílula: respiro vertical + cantos arredondados
   (a altura menor que a barra centraliza pelo flex do <li>) */
header#pc .navbar-nav>li>a,
header#pc .navbar-brand {
  height: calc(var(--topbar-h) - 16px) !important;
  border-radius: 10px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
}

/* 2) Acesso rápido: respiro interno; flecha descolada da borda.
   Centralização VERTICAL por flex (line-height perdia p/ outras
   regras e o texto caía no rodapé do campo). */
header#pc .autocompletar-acesso-rapido .select2-choice,
header#mobile .autocompletar-acesso-rapido .select2-choice {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 34px 0 14px !important;
}

header#pc .autocompletar-acesso-rapido .select2-chosen,
header#mobile .autocompletar-acesso-rapido .select2-chosen {
  margin-right: 0 !important;
  line-height: normal !important;
  flex: 1 1 auto;
}

header#pc .autocompletar-acesso-rapido .select2-choice .select2-arrow,
header#mobile .autocompletar-acesso-rapido .select2-choice .select2-arrow {
  right: 10px !important;
  border-left: 0 !important;
  background: transparent !important;
}

/* 2c) Placeholder do atalho de teclado (Ctrl+K / ⌘K no Mac) do acesso
   rápido, ao lado da seta do select2. Só no desktop — sem sentido no
   campo mobile (sem teclado físico / espaço apertado). `currentColor` +
   opacity em vez de branco fixo: o texto do .select2-choice muda de cor
   entre o tema claro (#444, base do select2.css) e o escuro (.theme-5),
   e o badge precisa acompanhar os dois. */
header#pc .autocompletar-acesso-rapido .acesso-rapido-atalho {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 1px 5px;
  border: 0.1px solid #95A7AF;
  border-radius: 5px;
  font-size: 9.5px;
  line-height: 1.4;
  color: #95A7AF;
  opacity: .9;
  white-space: nowrap;
}

header#mobile .autocompletar-acesso-rapido .acesso-rapido-atalho {
  display: none;
}

/* 2b) Badge de notificação: o top/right antigo era calibrado
   p/ âncora de 58px; com a pílula (topbar-h - 16px) ele caía
   SOBRE o ícone. Vai para o canto sup. direito da pílula. */
header#pc .navbar-nav.pull-right .label-badge-notify {
  top: -4px !important;
  right: -4px !important;
}

/* 3) Ícones da navbar em Material Symbols outline (mesma fonte local) */
header#pc .fa-home:before,
header#mobile .fa-home:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e9b2";
}

header#pc .fa-bell:before,
header#mobile .fa-bell:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e7f5";
}

/* (2026-07-16: houve aqui um bloco deixando o SINO em 26px/wght 400 — revertido no mesmo
   dia. O pedido era destacar o BADGE vermelho, não o ícone; sino segue os 24px da barra.) */
header#pc .fa-calendar:before,
header#mobile .fa-calendar:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ebcc";
}

header#pc .fa-inbox:before,
header#mobile .fa-inbox:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e156";
}

header#pc .fa-warning:before,
header#mobile .fa-warning:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\f083";
}

/* fa-code-fork da navbar: idem — fica com o SVG mask do layout.css */
header#pc .fa-newspaper-o:before,
header#mobile .fa-newspaper-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\eb81";
}

header#pc .fa-question-circle-o:before,
header#mobile .fa-question-circle-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e8fd";
}

header#pc .fa-envelope:before,
header#pc .fa-envelope-o:before,
header#mobile .fa-envelope:before,
header#mobile .fa-envelope-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e159";
}

/* o markup do canto direito usa GLYPHICON-user, não fa-user (bloco-menu-topo.php:165):
   a regra só de .fa-user existia e nunca casava — a pessoa seguia Glyphicon puro. */
header#pc .fa-user:before,
header#pc .glyphicon-user:before,
header#mobile .fa-user:before,
header#mobile .glyphicon-user:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\f0d3";
}

header#pc .fa-balance-scale:before,
header#mobile .fa-balance-scale:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\eaf6";
}

/* dropdown do usuário: tema claro/escuro e as duas ações. A COR vem inline do
   markup (#f59e0b no sol, #6b7280 na lua) e continua valendo — não tocamos em PHP. */
header#pc .fa-sun-o:before,
header#mobile .fa-sun-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e518";
}

header#pc .fa-moon-o:before,
header#mobile .fa-moon-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e51c";
}

header#pc .glyphicon-lock:before,
header#mobile .glyphicon-lock:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e899";
}

header#pc .glyphicon-off:before,
header#mobile .glyphicon-off:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e9ba";
}

header#pc .fa-database:before,
header#mobile .fa-database:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\f20e";
}

/* 2026-07-16 — auditoria do Matheus achou 2 ÓRFÃOS na navbar (caíam no FontAwesome,
   por isso a espessura destoava dos vizinhos):
   · fa-money (notificação do financeiro) → payments \ef63, o MESMO glifo do sidebar
   · fa-exclamation (dentro do badge de alerta) → priority_high \e645 (subset v52) */
header#pc .fa-money:before,
header#mobile .fa-money:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ef63";
}

header#pc .fa-exclamation:before,
header#mobile .fa-exclamation:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e645";
}

header#pc .fa-bolt:before,
header#mobile .fa-bolt:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ea0b";
}

header#pc .fa-refresh:before,
header#mobile .fa-refresh:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e5d5";
}

/* =========================================================
   BOTÕES DE AÇÃO — identidade lime iiLEX
   Pedido: mesmo visual dos glifos do menu superior — gradiente
   lime (BBF451→D8F999), texto no azul-petróleo interno dos
   tiles e borda finíssima (0.5px). Aplicado a .btn-success e
   .btn-primary (ações positivas, que hoje disputavam o papel);
   .btn-danger e .btn-default preservados pela semântica
   (perigo/neutro). REVERSÍVEL: apagar esta seção.
   ========================================================= */
.btn-success,
.btn-primary {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  color: #053345 !important;
  border-inline: 0.5px solid rgba(5, 51, 69, 0.45) !important;
  text-shadow: none !important;
  font-weight: 600;
}

.btn-success:hover,
.btn-success:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(180deg, rgba(172, 232, 60, 1) 0%, rgba(203, 244, 124, 1) 100%) !important;
  color: #032430 !important;
  border-color: rgba(5, 51, 69, 0.65) !important;
}

.btn-success:active,
.btn-success.active,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-success,
.open>.dropdown-toggle.btn-primary {
  background: linear-gradient(180deg, rgba(160, 222, 48, 1) 0%, rgba(187, 244, 81, 1) 100%) !important;
  color: #032430 !important;
  box-shadow: inset 0 1px 2px rgba(3, 36, 48, 0.25) !important;
}

.btn-success.disabled,
.btn-success[disabled],
.btn-primary.disabled,
.btn-primary[disabled] {
  opacity: 0.55 !important;
}

/* Ícone sobreposto dos botões compostos (.btn-pesquisa/.btn-icon —
   ex.: lupa do "Pesquisar"): era branco (#fff, do botão verde-escuro
   antigo) e deslocado por margin fixa. Cor petróleo + centro real. */
.btn-pesquisa .glyphicon,
.btn-icon .glyphicon {
  color: #053345 !important;
  margin: 0 !important;
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%);
  line-height: 1;
}

/* a lupa acompanha o novo set de ícones */
.btn-pesquisa .glyphicon-search:before,
.btn-icon .glyphicon-search:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ef7a";
}

/* =========================================================
   CAMPOS DE PREENCHIMENTO — cantos 8px em TODOS os campos
   (inputs, selects, textareas, filtros, tabaux/select2 e
   telas de configurações). Grupos compostos mantêm o miolo
   reto (só as pontas arredondam).
   ========================================================= */
.form-control {
  border-radius: 8px;
}

/* input + addon (datas com calendário etc.): pontas 8px */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child>.btn {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child>.btn {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* select2 (filtros, tabaux) — single e multi */
.select2-container .select2-choice {
  border-radius: 8px;
}

.select2-container-multi .select2-choices {
  border-radius: 8px;
}

/* aberto: o campo casa com o painel do dropdown */
.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
  border-radius: 8px 8px 0 0;
}

.select2-drop {
  border-radius: 0 0 8px 8px;
}

.select2-drop.select2-drop-above {
  border-radius: 8px 8px 0 0;
}

/* =========================================================
   RODADA 7 — raio 8px À PROVA DE CASCATA + respiro dos botões
   (mobile.css/layout.css carregam DEPOIS do site.css e
   re-zeravam o raio em parte dos campos; aqui com !important
   e miolos retos preservados nos grupos)
   ========================================================= */
.form-control {
  border-radius: 8px !important;
}

/* grupos (data + check + calendário): pontas 8px, miolo reto */
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child)>.btn {
  border-radius: 0 !important;
}

.input-group .form-control:first-child:not(:last-child),
.input-group-addon:first-child:not(:last-child),
.input-group-btn:first-child:not(:last-child)>.btn {
  border-radius: 8px 0 0 8px !important;
}

.input-group .form-control:last-child:not(:first-child),
.input-group-addon:last-child:not(:first-child),
.input-group-btn:last-child:not(:first-child)>.btn {
  border-radius: 0 8px 8px 0 !important;
}

/* select2 idem, blindado */
.select2-container .select2-choice {
  border-radius: 8px !important;
}

.select2-container-multi .select2-choices {
  border-radius: 8px !important;
}

.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
  border-radius: 8px 8px 0 0 !important;
}

.select2-drop {
  border-radius: 0 0 8px 8px !important;
}

.select2-drop.select2-drop-above {
  border-radius: 8px 8px 0 0 !important;
}

/* Select2 v3 reaproveita um único #select2-drop pra qualquer instância aberta
   (não é irmão do input, é appended solto) — por isso o seletor é global, não
   escopado ao Acesso Rápido. Resultado pode vir como uma linha só bem comprida
   (nome de processo com várias partes/CPFs); sem quebra de linha isso é o que
   fazia o dropdownAutoWidth calcular uma largura gigante (>1800px, visto em
   produção) e jogar o dropdown inteiro pra fora da tela (left negativo).
   dropdownAutoWidth:false (JS) já evita esse cálculo quebrado; aqui a largura
   fica width:fit-content — encolhe pro texto de verdade (ex.: "Digite mais 3
   caracteres" fica pequeno, não ocupa a tela toda) e só cresce até o teto de
   max-width quando o resultado precisar, com o texto quebrando dentro disso
   em vez de forçar overflow horizontal. !important pra vencer o width inline
   que o Select2 ainda define (ele só não erra mais o CÁLCULO, mas continua
   escrevendo um width:Npx no style).
   min-width/max-width SEM !important aqui de propósito: o JS (mesmo arquivo,
   listener de 'select2-open') calcula o teto/piso reais por campo — largura do
   próprio campo (mínimo) e espaço livre à direita na tela até 70vw (máximo) —
   e aplica via setProperty(...,'important'), que só vence uma regra de CSS
   estático se esta aqui NÃO for important também. Os valores abaixo só entram
   em cena antes do JS rodar (evita um flash sem limite nenhum). */
#select2-drop {
  width: fit-content !important;
  min-width: 220px;
  max-width: 70vw;
}

#select2-drop .select2-result-label {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Zebra striping: linhas de resultado muito parecidas (mesmo nome de módulo,
   textos longos) grudavam visualmente sem nenhuma referência de onde uma
   termina e a outra começa. :not(.select2-highlighted) pra nunca brigar com
   a cor de seleção/hover, que sempre tem que vencer (o Select2 v3 garante um
   único .select2-highlighted por vez — reportaram "2 selecionados" ao navegar
   por teclado, mas era só a listra AZULADA de uma linha vizinha parecendo uma
   segunda seleção; troquei pra um cinza neutro, sem nada de azul, que não tem
   como ser confundido com a cor de destaque real). */
#select2-drop .select2-results li.select2-result:nth-child(even):not(.select2-highlighted) {
  background-color: #f7f7f9;
}

.theme-5 #select2-drop .select2-results li.select2-result:nth-child(even):not(.select2-highlighted) {
  background-color: #171b26;
}

/* SELECT nativo: a seta do sistema colava na borda direita.
   Troca por chevron próprio com respiro (right 12px). O
   [multiple] fica intacto (não tem seta). */
select.form-control:not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 13px 13px !important;
  padding-right: 34px !important;
}

.theme-5 select.form-control:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab6c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ---- Botões: raio 8px + respiro ---- */
.btn {
  border-radius: 8px !important;
}

/* grupos de botões continuam colados e com miolo reto */
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0 !important;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-radius: 8px 0 0 8px !important;
}

.btn-group>.btn:last-child:not(:first-child),
.btn-group>.dropdown-toggle:not(:first-child) {
  border-radius: 0 8px 8px 0 !important;
}

/* espaço entre botões vizinhos (grupos seguem colados por design) */
.btn+.btn {
  margin-left: 8px;
}

.btn-group>.btn+.btn,
.btn-group-vertical>.btn+.btn,
.input-group-btn>.btn+.btn {
  margin-left: -1px;
}

/* Grid de campos do relatório (.campos-relatorio, modal "Relatório" — ver
   includes/bloco-inferior.php:tpl-painel-campos-relatorio): não é uma barra
   de ferramentas colada, é um grid de checkboxes que QUEBRA linha (col-md-3
   dentro do mesmo .btn-group). As regras acima de btn-group (margem
   negativa + cantos retos no meio) fazem sentido pra um grupo numa linha só,
   mas aqui colam os botões de cor sólida uns nos outros e o grid vira um
   bloco verde sem separação nenhuma entre os campos. */
/* border sempre 2px (mesma espessura marcado/não marcado — só muda de
   cor): com espessura variável (1px -> 2px) o botão "crescia" 2px no total
   ao selecionar, empurrando os vizinhos e dando um pulo de layout. */
/* :not(.dropdown-toggle):not(.disabled) no fim são só pra ganhar
   especificidade da regra global .btn-group>.btn:not(:first-child):not
   (:last-child):not(.dropdown-toggle){border-radius:0}, que tem mais peso
   (2 classes + 3 pseudo-classes) que .campos-relatorio.btn-group>.btn
   sozinho (3 classes) — sem isso o cantos retos "do meio do grupo" vencia
   pra quase todos os botões (só o 1º/último da grade escapavam), e a grade
   inteira ficava quadrada apesar do border-radius abaixo. */
/* Grid fluido: preenche 100% da largura disponível sempre (auto-fit + 1fr
   esticam as colunas até não sobrar espaço morto), com a quantidade de
   colunas crescendo sozinha em telas largas — nunca fixo num número "errado"
   pra outra largura nem deixando faixa em branco na direita. minmax em
   190px (não 240px) garante NO MÍNIMO 3 colunas mesmo no modal mais
   estreito (ex.: "Relatório Agendado"); em telas largas cresce pra 4, 5+. */
.campos-relatorio.btn-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 8px !important;
}

.campos-relatorio.btn-group>.btn.btn-primary:not(.dropdown-toggle):not(.disabled) {
  border-radius: 8px !important;
  margin: 0 !important;
  width: auto !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  /* trunca pela largura REAL do botão (agora variável, grid responsivo) em
     vez de confiar só no corte manual em 28 caracteres feito no JS (que
     assumia os antigos 290px fixos e vazava "..." pra fora do botão em
     colunas mais estreitas). */
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Não marcado: verde da paleta iiLEX (não o verde/gradiente padrão do tema
   pro .btn-primary, que vence o style inline do JS por causa do !important
   dele). Campo de submódulo (classe campo-relatorio-submodulo, setada pelo
   JS junto com o cabeçalho azul marinho da seção) já nasce na cor de
   selecionado, pra bater com o cabeçalho da própria seção. */
.campos-relatorio.btn-group>.btn.btn-primary:not(.active) {
  background: #b2e84d !important;
  color: #053345 !important;
}

.campos-relatorio.btn-group>.btn.btn-primary.campo-relatorio-submodulo:not(.active) {
  background: #0a2540 !important;
  color: #fff !important;
}

/* Contraste de seleção: marcado (.active) vira azul marinho — troca de cor
   inteira, não só um tom mais escuro do mesmo verde, que antes ficava quase
   imperceptível numa grade de 60 botões todos verdes. */
.campos-relatorio.btn-group>.btn.active {
  background: linear-gradient(180deg, #0a2540 0%, #143a5c 100%) !important;
  color: #fff !important;
  border: 2px solid #041625 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  font-weight: 700 !important;
}

/* Select "Valores Separados/Agrupados" do cabeçalho da seção
   (processofornecedores) — vinha com o quadrado padrão do <select> nativo,
   destoando do resto do modal (tudo arredondado). */
.select-valores-agrupados {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  padding: 4px 10px !important;
  color: #053345 !important;
  background-color: #fff !important;
  font-weight: 600 !important;
}

/* O select acima é montado (layout.js) como filho do <h3 class="panel-title">,
   junto do texto do título, com classe "pull-right" (float). O float
   desalinhava verticalmente e vazava pra fora da barra do cabeçalho, ficando
   "pendurado" na borda entre o cabeçalho colorido e o corpo do painel — flex
   no h3 centraliza e ignora o float (flex item não flutua). */
h3.panel-title:has(.select-valores-agrupados) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Cabeçalho do relatório "Sem Andamento" (modal Relatório, layout.js): antes
   eram só 2 inputs soltos ("Título"/"Quantidade de dias"), sem deixar claro
   que esse relatório serve pra achar processo parado — uso comum de
   escritório. Mesma linguagem visual do banner de instrução dos campos
   (verde neutro), pra ficar óbvio que é uma explicação, não um campo. */
.alerta-relatorio-sem-andamento {
  background: #f4f9f2;
  border: 1px solid #e2ede0;
  border-radius: 8px;
  padding: 12px 14px 10px;
}

.alerta-relatorio-sem-andamento label {
  color: #053345;
  font-weight: 600;
}

.alerta-relatorio-sem-andamento .form-control {
  border-radius: 8px;
}

.alerta-relatorio-sem-andamento .input-group-addon {
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: #5a6b5d;
  font-weight: 600;
}

.alerta-relatorio-sem-andamento__dica {
  font-size: 11px;
  color: #5a6b5d;
  margin-top: 6px;
}

/* respiro interno no tamanho padrão (xs/sm dos grids intactos) */
.btn:not(.btn-xs):not(.btn-sm):not(.btn-lg) {
  padding: 7px 16px;
}

/* o "Pesquisar" composto reserva espaço da lupa sobreposta */
.btn-pesquisa .btn,
.btn-icon .btn {
  padding-left: 35px !important;
}

/* fôlego entre ícone e texto, e o caret respira longe do rótulo */
.btn:not(.btn-xs):not(.btn-sm)>.fa,
.btn:not(.btn-xs):not(.btn-sm)>.glyphicon {
  margin-right: 6px;
}

.btn .caret {
  margin-left: 6px;
}

/* =========================================================
   RODADA 9 — espaçamento entre botões EMBRULHADOS + painéis 8px
   ========================================================= */
/* Os filtros embrulham botões (span.btn-pesquisa, div.btn-group
   dropup) — a regra .btn + .btn não os via e ficavam colados. */
.btn-pesquisa+.btn,
.btn-pesquisa+.btn-group,
.btn-pesquisa+.btn-pesquisa,
.btn-pesquisa+.btn-icon,
.btn+.btn-pesquisa,
.btn+.btn-group,
.btn-group+.btn,
.btn-group+.btn-group,
.btn-group+.btn-pesquisa,
.btn-icon+.btn,
.btn-icon+.btn-group {
  margin-left: 8px;
}

/* inputs hidden no meio da fileira quebravam a adjacência (ex.:
   Relatório -> [hidden] -> Voltar em publicações) — pula até 2 */
.btn-group+input[type="hidden"]+.btn,
.btn+input[type="hidden"]+.btn,
.btn-group+input[type="hidden"]+input[type="hidden"]+.btn,
.btn-pesquisa+input[type="hidden"]+.btn-group {
  margin-left: 8px;
}

/* Painéis/accordions ("Pesquisa Avançada", "Configurações",
   seções de formulário): cantos 8px acompanhando os campos.
   Cabeçalho arredonda inteiro quando o corpo está fechado. */
.panel {
  border-radius: 8px !important;
}

.panel>.panel-heading {
  border-radius: 7px 7px 0 0 !important;
}

.panel:not(:has(> .panel-collapse.in)):not(:has(> .panel-body))>.panel-heading {
  border-radius: 7px !important;
}

.panel>.panel-footer {
  border-radius: 0 0 7px 7px !important;
}

/* =========================================================
   RODADA 11 — LOGO iiLEX NO SIDEBAR + verdes antigos → paleta
   Assets: public/img/logo-iilex-simbolo.svg (recolhido) e
   logo-iilex-completa.svg (expandido), tamanhos padronizados.
   Verdes legados (#22823a do panel-primary, família #55b56d/
   #419656/#49a861) migrados p/ lime com texto petróleo #053345
   (contraste) no claro; no escuro, acentos lime translúcidos.
   ========================================================= */

/* ---- Logo no TOPO = ATALHO PARA A HOME ----
   Âncora .menu-logo-home injetada pelo layout.js como 1º filho do
   .sidebar (acima do Recolher), com tooltip nos DOIS estados.
   O item "Home" da lista some — a logo assume o papel. */
a.menu-logo-home {
  display: block;
  height: 30px;
  margin: 10px 8px 12px;
  background: url("../img/logo-iilex-completa.svg") no-repeat center / auto 26px;
  cursor: pointer;
}

a.menu-logo-home:hover {
  opacity: 0.85;
}

#menu.menu-minimized a.menu-logo-home {
  background: url("../img/logo-iilex-simbolo.svg") no-repeat center / auto 22px;
  margin: 10px 4px 12px;
}

#sidebar>li[data-idcomponente="item-menu-lateral-home"] {
  display: none !important;
}

/* ---- CLARO (.theme-3): seções da ficha (panel-primary #22823a) ----
   TESTE em avaliação: degradê AZUL-PETRÓLEO (o lime chapava demais).
   Se preferir voltar ao lime: trocar o gradiente por
   linear-gradient(180deg, #BBF451, #D8F999) e o color por #053345. */
.theme-3 .panel-primary {
  border-color: rgba(5, 51, 69, 0.3) !important;
}

.theme-3 .panel-primary>.panel-heading {
  background: linear-gradient(180deg, rgba(35, 128, 165, 1) 0%, rgba(16, 78, 100, 1) 100%) !important;
  color: #fff !important;
  border-color: rgba(5, 51, 69, 0.3) !important;
}

/* título/links do header em branco — MENOS botões (o "+ Novo" âncora
   é .btn-success lime, tem sua própria cor petróleo). */
.theme-3 .panel-primary>.panel-heading a:not(.btn),
.theme-3 .panel-primary>.panel-heading .panel-title {
  color: #fff !important;
}

.theme-3 .panel-primary>.panel-heading a.btn {
  color: #053345 !important;
}

.theme-3 .panel-primary>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: rgba(5, 51, 69, 0.2) !important;
}

/* links do tema claro: verde #55b56d → petróleo (contraste real) */
.theme-3 a {
  color: #104E64;
}

.theme-3 a:hover,
.theme-3 a:focus {
  color: #053345;
}

/* item ativo de dropdown (gradiente verde antigo) */
.theme-3 .dropdown-menu>.active>a,
.theme-3 .dropdown-menu>.active>a:hover,
.theme-3 .dropdown-menu>.active>a:focus {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  color: #053345 !important;
  text-shadow: none !important;
}

/* barras de progresso verdes */
.theme-3 .progress-bar,
.theme-3 .progress-bar-success {
  background: linear-gradient(180deg, #BBF451 0%, #9AE600 100%) !important;
  color: #053345 !important;
  text-shadow: none !important;
}

/* list-group ativo */
.theme-3 .list-group-item.active,
.theme-3 .list-group-item.active:hover,
.theme-3 .list-group-item.active:focus {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  color: #053345 !important;
  border-color: rgba(5, 51, 69, 0.3) !important;
  text-shadow: none !important;
}

/* paginação */
.theme-3 .pagination>li>a,
.theme-3 .pagination>li>span {
  color: #104E64;
}

.theme-3 .pagination>.active>a,
.theme-3 .pagination>.active>span,
.theme-3 .pagination>.active>a:hover,
.theme-3 .pagination>.active>span:hover,
.theme-3 .pagination>.active>a:focus,
.theme-3 .pagination>.active>span:focus {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  border-color: rgba(5, 51, 69, 0.3) !important;
  color: #053345 !important;
}

/* tiles de atalho legados + ícones de agrupamento */
.theme-3 .shortcut-tile {
  background: linear-gradient(135deg, rgba(16, 78, 100, 1) 0%, rgba(5, 51, 69, 1) 100%) !important;
  color: #BBF451 !important;
}

.theme-3 .shortcut-tile.selected {
  border-color: #BBF451 !important;
}

.theme-3 .shortcut-tile:after {
  border-top-color: #BBF451 !important;
}

.icones-agrupamento {
  color: #104E64 !important;
}

.theme-5 .icones-agrupamento {
  color: #BBF451 !important;
}

/* ---- ESCURO (.theme-5): verdes antigos de paginação/list/panel ---- */
.theme-5 .pagination>li>a,
.theme-5 .pagination>li>span {
  color: #BBF451;
}

.theme-5 .pagination>li>a:hover,
.theme-5 .pagination>li>span:hover {
  color: #D8F999;
}

.theme-5 .pagination>.active>a,
.theme-5 .pagination>.active>span,
.theme-5 .pagination>.active>a:hover,
.theme-5 .pagination>.active>span:hover,
.theme-5 .pagination>.active>a:focus,
.theme-5 .pagination>.active>span:focus {
  background-color: #BBF451 !important;
  border-color: #BBF451 !important;
  color: #053345 !important;
}

.theme-5 .list-group-item.active,
.theme-5 .list-group-item.active:hover,
.theme-5 .list-group-item.active:focus {
  background-color: rgba(187, 244, 81, 0.9) !important;
  border-color: #BBF451 !important;
  color: #053345 !important;
}

.theme-5 .panel-primary>.panel-heading {
  background: rgba(187, 244, 81, 0.14) !important;
  color: #BBF451 !important;
  border-color: rgba(187, 244, 81, 0.3) !important;
}

.theme-5 .panel-primary>.panel-heading a:not(.btn),
.theme-5 .panel-primary>.panel-heading .panel-title {
  color: #BBF451 !important;
}

.theme-5 .panel-primary>.panel-heading a.btn {
  color: #053345 !important;
}

/* =========================================================
   RODADA 12 — proporções e alinhamentos finos
   ========================================================= */

/* Margem interna SIMÉTRICA em todas as telas: a base do
   .main-content fazia padding:0 + padding-left:3em — o lado
   direito nunca existiu (conteúdo espremido na borda). Espelha
   o 3em; abaixo de 1200px a base zera a esquerda, zeramos a
   direita junto. */
.main-content {
  padding-right: 3em;
}

@media (max-width: 1200px) {
  .main-content {
    padding-right: 0;
  }
}

/* =========================================================
   RODADA 14 — pós-merge nova-visão-workflow: reconciliação
   do fork (SVG mask global do layout.css) + chip contador
   ========================================================= */

/* 1) Sidebar: o fork mascarado virou caixa (não glifo) e o nosso
   height:auto do .icon-menu ZERAVA a caixa — o ícone do item "Novo"
   sumia. Caixa de 1em restaurada só para ele. */
#sidebar>li>a .icon-menu.fa-code-fork {
  height: 1em !important;
  width: 18px !important;
}

/* 2) Tiles de módulo: a mask global recortava o QUADRADO petróleo
   inteiro em silhueta de fork (o <i> é o próprio tile). Exceção:
   desliga a mask/box aqui e desenha o fork como GLIFO Material Symbols no
   ::before (mesma forma do SVG deles), com o gradiente lime padrão. */
#tabelaresultado.modulos .iconbox>i.fa-code-fork,
#shortcut #ulmodulos .shortcut-tile .iconbox>i.fa-code-fork,
#shortcut-mobile .iconbox>i.fa-code-fork {
  -webkit-mask: none !important;
  mask: none !important;
}

/* 2026-07-16: era content:"\eb8f" — codepoint escrito DE MEMÓRIA na rodada 14; na tabela
   oficial \eb8f é o logo do "php" e nunca esteve no subset ⇒ o tile renderizava o .notdef
   (caixa com X). Achado numa varredura de TODOS os content:"\xxxx" do CSS contra o cmap
   da fonte (só este estava quebrado). Agora usa o MESMO flowchart \f38d do resto do app. */
#tabelaresultado.modulos .iconbox>i.fa-code-fork::before,
#shortcut #ulmodulos .shortcut-tile .iconbox>i.fa-code-fork::before,
#shortcut-mobile .iconbox>i.fa-code-fork::before {
  content: "\f38d" !important;
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
}

/* 3) Chip "Exibindo X de Y registro(s)": cinza -> degradê petróleo
   (mesmo dos headers de seção), texto branco e respiro interno. */
.badge.gridRecords {
  background: linear-gradient(180deg, rgba(35, 128, 165, 1) 0%, rgba(16, 78, 100, 1) 100%) !important;
  color: #fff !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  border-radius: 999px !important;
  line-height: 1.3 !important;
}

/* 4) Paginação: cantos 8px nas pontas + setas/links no petróleo
   (o theme-material-1 carrega DEPOIS e devolvia o verde — !important). */
.pagination>li:first-child>a,
.pagination>li:first-child>span {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* blindado com body: theme.css (9708) pinta verde e o material-1
   carrega depois — especificidade maior fecha a disputa. */
body.theme-3 .pagination>li>a,
body.theme-3 .pagination>li>span,
body.theme-3 .pagination>li>a>span {
  color: #104E64 !important;
}

body.theme-3 .pagination>.active>a,
body.theme-3 .pagination>.active>span,
body.theme-3 .pagination>.active>a:hover,
body.theme-3 .pagination>.active>a:focus {
  background: linear-gradient(180deg, rgba(187, 244, 81, 1) 0%, rgba(216, 249, 153, 1) 100%) !important;
  border-color: rgba(5, 51, 69, 0.3) !important;
  color: #053345 !important;
  text-shadow: none !important;
}

/* 5) Painéis cinza (panel-default: submódulos da ficha, Pesquisa
   Avançada, Configurações…): títulos no azul-escuro de texto. */
.theme-3 .panel-default>.panel-heading,
.theme-3 .panel-default>.panel-heading a,
.theme-3 .panel-default>.panel-heading .panel-title {
  color: #053345 !important;
}

/* =========================================================
   RODADA 14c — TELA DE PUBLICAÇÕES: fileira de ações, tags,
   barra de progresso e "Ler mais"
   ========================================================= */

/* Ações da linha (.td-vinculado): SEM mexer no fluxo (os floats
   pull-right ficam — mudá-los quebrou o layout). Só geometria por
   botão: tamanho travado, raio 8 nos 4 cantos (vencendo as regras
   de canto de .btn-group na MESMA especificidade) e respiro por
   margem entre os floats. */
.td-vinculado .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 28px !important;
  padding: 0 !important;
  margin-left: 5px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
}

.td-vinculado .btn-group>.btn,
.td-vinculado .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle),
.td-vinculado .btn-group>.btn:last-child:not(:first-child),
.td-vinculado .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.td-vinculado .btn-group>.dropdown-toggle:not(:first-child) {
  border-radius: 8px !important;
  margin-left: 5px !important;
}

.td-vinculado .btn .fa,
.td-vinculado .btn .glyphicon {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.td-vinculado .btn.vinculados-agendas {
  width: auto !important;
  padding: 0 8px !important;
}

.td-vinculado .label.sombra {
  vertical-align: middle !important;
}

/* Respiro ENTRE publicações: cada registro é um par de linhas
   (fileira de ações .tr-vinculado + linha de dados) — padding no
   topo do par e no pé do par, para todas as publicações da lista. */
#tabelaresultado>tbody>tr.tr-vinculado>td {
  padding-top: 24px !important;
}

#tabelaresultado>tbody>tr.tr-vinculado+tr>td {
  padding-bottom: 24px !important;
}

/* =========================================================
   RODADA 15 — DATEPICKER (jQuery UI) com a identidade da casa
   Painel NEUTRO e leve (azul/verde chapado pesaria aqui):
   raios + sombra padrão + hovers sutis; só o dia SELECIONADO
   ganha petróleo (par do checkbox marcado). Fins de semana
   seguem VERMELHOS (regra histórica preservada, agora com
   raio). Skin transitória — o ix-datefield continua no P0 do
   design system p/ telas novas.
   ========================================================= */
#ui-datepicker-div,
.ui-datepicker {
  background: #fff !important;
  border: 1px solid #d7dde3 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
  padding: 10px !important;
}

.ui-datepicker .ui-datepicker-header {
  background: linear-gradient(180deg, rgba(35, 128, 165, 1) 0%, rgba(16, 78, 100, 1) 100%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 6px 4px !important;
  margin-bottom: 8px !important;
}

.ui-datepicker .ui-datepicker-title {
  color: #F5F5F5 !important;
  font-weight: 600 !important;
  line-height: 26px !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  top: 6px !important;
  width: 26px !important;
  height: 26px !important;
}

.ui-datepicker .ui-datepicker-prev {
  left: 6px !important;
}

.ui-datepicker .ui-datepicker-next {
  right: 6px !important;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* setas: sprite legado -> chevron (mask + currentColor claro) */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  background: #F5F5F5 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / 15px !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / 15px !important;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

.ui-datepicker th {
  color: #6b7280 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.ui-datepicker td {
  padding: 2px !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  text-align: center !important;
  color: #334155 !important;
  padding: 6px !important;
  height: auto !important;
  line-height: normal !important;
}

/* Blindagem: regras legadas soltas tipo ".ui-state-highlight{height:1.5em}"
   (de sortables) vazam pro dia de HOJE do datepicker e esmagam a celula.
   Forcamos altura/line-height normais nas celulas de hoje/selecionado. */
.ui-datepicker td .ui-state-highlight,
.ui-datepicker td .ui-state-active {
  height: auto !important;
  line-height: normal !important;
}

.ui-datepicker td a:hover {
  background: rgba(16, 78, 100, 0.08) !important;
  color: #053345 !important;
}

/* hoje: contorno petróleo fino */
.ui-datepicker td a.ui-state-highlight,
.ui-datepicker td .ui-state-highlight {
  border-color: #2380A5 !important;
  color: #053345 !important;
  font-weight: 600 !important;
}

/* selecionado: petróleo + texto claro (par do checkbox) */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td .ui-state-active {
  background: #104E64 !important;
  color: #F5F5F5 !important;
  border-color: #104E64 !important;
  font-weight: 600 !important;
}

/* botões Hoje/Fechar (quando habilitados) */
.ui-datepicker .ui-datepicker-buttonpane {
  background: transparent !important;
  border-top: 1px solid #eef1f4 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  border-radius: 8px !important;
  border: 1px solid #d7dde3 !important;
  background: #fff !important;
  color: #104E64 !important;
}

/* selects de mês/ano (quando changeMonth/Year) */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  border-radius: 8px !important;
  border: 1px solid #d7dde3 !important;
  padding: 2px 6px !important;
}

/* ---- Dark (.theme-5): mesmo desenho, superfícies da casa ---- */
.theme-5 #ui-datepicker-div,
.theme-5 .ui-datepicker {
  background: #0b0f19 !important;
  border-color: #2d3142 !important;
}

.theme-5 .ui-datepicker .ui-datepicker-header {
  border-bottom-color: #1a2333 !important;
}

.theme-5 .ui-datepicker .ui-datepicker-title {
  color: #e6edf3 !important;
}

.theme-5 .ui-datepicker th {
  color: #8b94a3 !important;
}

.theme-5 .ui-datepicker td span,
.theme-5 .ui-datepicker td a {
  color: #d4d8e2 !important;
}

.theme-5 .ui-datepicker td a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

.theme-5 .ui-datepicker td a.ui-state-highlight {
  border-color: #BBF451 !important;
  color: #e6edf3 !important;
}

.theme-5 .ui-datepicker td a.ui-state-active {
  background: #2380A5 !important;
  color: #F5F5F5 !important;
  border-color: #2380A5 !important;
}

.theme-5 .ui-datepicker .ui-datepicker-prev-hover,
.theme-5 .ui-datepicker .ui-datepicker-next-hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* FINS DE SEMANA seguem vermelhos (a regra histórica perdia para o
   transparent do skin — re-afirmada aqui, com o raio novo). */
.ui-datepicker td.ui-datepicker-week-end>a,
.ui-datepicker td.ui-datepicker-week-end>span {
  background: #ffd4d4 !important;
}

.theme-5 .ui-datepicker td.ui-datepicker-week-end>a,
.theme-5 .ui-datepicker td.ui-datepicker-week-end>span {
  background: rgba(217, 83, 79, 0.22) !important;
  color: #f3b9b7 !important;
}

/* selecionado vence inclusive no fim de semana */
.ui-datepicker td.ui-datepicker-week-end>a.ui-state-active {
  background: #104E64 !important;
  color: #F5F5F5 !important;
}

.theme-5 .ui-datepicker td.ui-datepicker-week-end>a.ui-state-active {
  background: #2380A5 !important;
  color: #F5F5F5 !important;
}

/* =========================================================
   RODADA 16 — ÍCONES DE AÇÃO DOS SUBMÓDULOS (editardados)
   As tabelas de submódulo (Gatilhos/Fluxo etc., dentro de
   .painel-interno) usam FA legado GIGANTE (fa-2x): lixeira
   cheia, seta "external-link-square", engrenagem. Trocamos por
   Material Symbols outline, tamanho sensato e cor petróleo (lixeira com
   dica de perigo no hover). Escopado ao submódulo — não vaza. */
:is(.painel-interno, .submodulo) :is(.fa-trash-o, .fa-trash, .fa-external-link-square, .fa-cog, .fa-gear, .glyphicon-cog, .fa-info-circle, .fa-plus-square, .fa-check-square-o) {
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  color: #104E64 !important;
  transition: color .15s ease;
}

:is(.painel-interno, .submodulo) :is(.fa-trash-o, .fa-trash):before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e92e";
}

:is(.painel-interno, .submodulo) .fa-external-link-square:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e89e";
}

:is(.painel-interno, .submodulo) :is(.fa-cog, .fa-gear, .glyphicon-cog):before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e8b8";
}

/* a engrenagem legada vinha 1.5em (inline) — normaliza no set dos 18px;
   o .glyphicon base tem position:relative + top:1px (empurra 1px p/ baixo
   e desalinha da lixeira/link) → zera. height/width fixos = mesmo centro. */
:is(.painel-interno, .submodulo) .glyphicon-cog {
  font-size: 18px !important;
  position: static !important;
  top: 0 !important;
  height: 18px !important;
  width: 18px !important;
}

/* os 3 ícones da fileira no MESMO centro: vertical-align middle + altura
   travada (fa-2x trazia line-height/vertical-align próprios) */
:is(.painel-interno, .submodulo) :is(.excluir, a)> :is(.fa-trash-o, .fa-trash, .fa-external-link-square, .glyphicon-cog) {
  vertical-align: middle !important;
  height: 18px !important;
  line-height: 18px !important;
}

/* CAUSA RAIZ (achado do usuário): o tema faz .table td{vertical-align:top}
   — com trash e link+gear em <td> diferentes e alturas de célula distintas
   (texto das outras colunas), o conteúdo "gruda" no topo e desalinha.
   Centraliza o conteúdo das células do grid de submódulo na vertical. */
:is(.painel-interno, .submodulo) .table>tbody>tr>td,
:is(.painel-interno, .submodulo) table>tbody>tr>td {
  vertical-align: middle !important;
}

/* célula de AÇÕES (a que tem os ícones): nowrap p/ os ícones não
   empilharem, e conteúdo alinhado ao meio da linha. */
:is(.painel-interno, .submodulo) td:has(> .excluir),
:is(.painel-interno, .submodulo) td:has(> a > .fa-external-link-square),
:is(.painel-interno, .submodulo) td:has(> a > .glyphicon-cog) {
  white-space: nowrap !important;
}

/* wrappers dos ícones (span.excluir / <a>): inline-block no MESMO
   baseline-middle (o inline-flex empilhava em célula estreita). */
:is(.painel-interno, .submodulo) td>.excluir,
:is(.painel-interno, .submodulo) td>a {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 18px !important;
}

:is(.painel-interno, .submodulo) .fa-info-circle:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e88e";
}

:is(.painel-interno, .submodulo) .fa-plus-square:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e146";
}

:is(.painel-interno, .submodulo) .fa-check-square-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e9de";
}

/* a engrenagem e a seta abrem "config/abrir" → hover petróleo escuro */
:is(.painel-interno, .submodulo) a:hover :is(.fa-external-link-square, .fa-cog, .glyphicon-cog, .fa-info-circle, .fa-plus-square) {
  color: #053345 !important;
}

/* lixeira = destrutivo: hover vermelho (semântica preservada) */
:is(.painel-interno, .submodulo) :is(.excluir, a):hover :is(.fa-trash-o, .fa-trash) {
  color: #d9534f !important;
}

/* espaço uniforme entre os ícones da célula de ações */
:is(.painel-interno, .submodulo) td> :is(.excluir, a) {
  margin-right: 6px;
}

/* dark */
.theme-5 :is(.painel-interno, .submodulo) :is(.fa-trash-o, .fa-external-link-square, .fa-cog, .fa-gear, .fa-info-circle, .fa-plus-square) {
  color: #9fc6d6 !important;
}

/* =========================================================
   RODADA 19 — SUBMÓDULOS colapsados: redistribuição fluida
   (verificada NA PÁGINA REAL via medição do usuário no console).
   Estrutura: #submodulos > div[wrapper vazio, full-width] >
     .panel-group.submodulo.col-md-4 (colapsado) / col-md-12 (aberto).
   ⚠️ O BUG que quebrou 2x: o PAI do #submodulos é float:left, e um
   filho display:flex SEM largura explícita vira shrink-to-fit e
   ZERA (medido: natural=1445px → flex=0px). A blindagem é o
   width:100% (medido: flex+width100 → 1445px de volta). A bancada
   não reproduzia o colapso; só o DOM/medição real revelou.
   Lógica (flex-wrap + :has): colapsados 1→100%, 2→50%, 3→33%
   (crescem p/ preencher); aberto/loader = linha inteira → isola os
   fechados ao redor (cada um 100%). Gap = respiro. Medido no real:
   container 1445 (não zera) + 1 colapsado isolado = 100% + abertos
   100%. REVERSÍVEL: apagar este bloco.
   ========================================================= */
#submodulos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  /* BLINDAGEM: sem isto, o flex zera dentro do pai float:left */
}

/* wrappers (filhos diretos) = flex items; padrão 100% (seguro) */
#submodulos>div {
  min-width: 0;
  flex: 1 1 100%;
}

/* só o wrapper com painel COLAPSADO (col-md-4) vira ~1/3 e cresce */
#submodulos>div:has(> .submodulo.col-md-4) {
  flex: 1 1 calc(33.333% - 11px);
}

/* painel interno preenche o wrapper (era col-md-4 float 33% fixo) */
#submodulos>div>.panel-group.submodulo {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* mobile: empilha 1 por linha */
@media (max-width: 991px) {
  #submodulos>div:has(> .submodulo.col-md-4) {
    flex-basis: 100%;
  }
}

/* Tags da linha (nome/tagDeBusca, Vinculada, INTIMAÇÃO): respiro,
   raio de pill e MESMA ALTURA (28px) dos botões de ação da fileira —
   ficam niveladas na linha. Cores semânticas mantidas. */
.label.sombra {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Barra de progresso da trava ("100%"): CINZA neutro (pedido do
   usuário) e centragem por FLEX — imune a inline styles e a
   disputas de height/line-height entre temas. */
#record-count-container .progress {
  display: flex !important;
  align-items: stretch !important;
  height: 31px !important;
  /* mesma altura do chip "Exibindo X de Y" */
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
  /* .sombra, como os vizinhos */
  border: 1px solid #e2e8f0 !important;
  /* o azul-claro de antes vira a borda */
  margin: 8px 0 !important;
  background: #fff !important;
}

#record-count-container .progress-bar,
#progresso {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  height: 100% !important;
  /* preenche o trilho (auto deixava 15px em 22px) */
  align-self: stretch !important;
  margin: 0 !important;
  /* layout.css:1666 empurrava 5px top/left (o "cinza atrás") */
  border-radius: 999px !important;
  /* o preenchimento é pill também: zero frestas nos cantos */
  line-height: 1 !important;
  background: linear-gradient(180deg, rgba(35, 128, 165, 1) 0%, rgba(16, 78, 100, 1) 100%) !important;
  /* gradiente azul da casa */
  color: #F5F5F5 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-shadow: none !important;
  min-width: 42px;
  /* o "0%" cabe mesmo no início */
}

/* o JS injeta um <hr> junto da barra — era a "linha fantasma" que
   quebrava o layout do conjunto */
#record-count-container>hr {
  display: none !important;
}

/* "Ler mais"/"Ler menos": de texto verde legado (#27AE60 inline) a
   BOTÃO-PÍLULA — affordance nítida no meio do texto corrido. */
.btnLerMais {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  margin: 0 4px !important;
  padding: 3px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #104E64 !important;
  /* invertido: fundo petróleo p/ chamar atenção */
  color: #F5F5F5 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  vertical-align: baseline;
  white-space: nowrap;
  transition: background .15s ease;
}

.btnLerMais b {
  font-weight: 600 !important;
  color: #F5F5F5 !important;
}

.btnLerMais .fa {
  color: #F5F5F5 !important;
  font-size: 12px !important;
}

.btnLerMais:hover {
  background: #053345 !important;
  color: #F5F5F5 !important;
}

.theme-5 .btnLerMais {
  background: #2380A5 !important;
  /* um tom acima p/ destacar no dark */
}

.theme-5 .btnLerMais:hover {
  background: #104E64 !important;
}

/* =========================================================
   RODADA 14d — dropdowns modernos (claro) + checkbox da casa
   ========================================================= */

/* Menus dropdown (ex.: "Relatório" dropup): estética da casa —
   raio 8, borda suave, sombra padrão, itens com respiro e hover
   petróleo translúcido. Só no claro (o dark já tem skin própria). */
.theme-3 .dropdown-menu {
  border-radius: 8px !important;
  border: 1px solid #d7dde3 !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
  padding: 6px !important;
}

.theme-3 .dropdown-menu>li>a {
  border-radius: 6px;
  padding: 8px 14px;
  color: #104E64;
}

.theme-3 .dropdown-menu>li>a:hover,
.theme-3 .dropdown-menu>li>a:focus {
  background: rgba(16, 78, 100, 0.08) !important;
  color: #053345 !important;
}

.theme-3 .dropdown-menu .divider {
  margin: 6px 4px;
}

/* Checkbox padrão da casa: 20px (par do ícone "abrir" da linha),
   cantos suaves; MARCADO = fundo petróleo com check #F5F5F5. */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid #c3cdd6 !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  margin: 0 !important;
  flex: 0 0 auto;
}

input[type="checkbox"]:checked {
  background: #104E64 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") no-repeat center / 13px !important;
  border-color: #104E64 !important;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(35, 128, 165, 0.45);
  outline-offset: 1px;
}

.theme-5 input[type="checkbox"] {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

.theme-5 input[type="checkbox"]:checked {
  background: #104E64 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") no-repeat center / 13px !important;
  border-color: #2380A5 !important;
}

/* Submódulos da ficha (Histórico/Endereços/Contatos/Arquivos…):
   as seções do formulário são panel-group SEM coluna, mas os
   submódulos vêm com col-md-12/col-md-4 — os 15px de padding da
   coluna desalinhavam as laterais. Zera; o respiro entre os
   col-md-4 vem do vizinho (padding-left no 2º em diante). */
.panel-group.submodulo {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.panel-group.submodulo.col-md-4+.panel-group.submodulo.col-md-4 {
  padding-left: 15px !important;
}

/* Botões pequenos: 8px neles virava meia-lua — raio proporcional */
.btn-xs {
  border-radius: 5px !important;
}

.btn-sm {
  border-radius: 6px !important;
}

/* Ações por linha do #tabelaresultado (lupa/lixeira/abrir).
   ANATOMIA (util/formulario-class.php:969 e :3080): cada ação vive no SEU
   PRÓPRIO <td> (width:2.5% inline) — lupa em a.expandir-filtro-submodulo,
   lixeira em span.excluir, abrir em <a>. Logo o VÃO entre os ícones é o
   padding das CÉLULAS, não margin do <i>: não existem irmãos dentro do td.
   Tamanhos de fábrica caóticos: a lupa sem classe de tamanho (herda o td,
   ~13px) "compensada" com padding:25% inline; lixeira e abrir com fa-2x
   (o dobro). Aqui: mesmo corpo (24px), mesma família (Material Symbols),
   vão igual entre os 3 e respiro na borda esquerda da tabela. */
#tabelaresultado td .fa-search,
#tabelaresultado td .fa-trash-o,
#tabelaresultado td .fa-trash,
#tabelaresultado td .fa-external-link-square {
  font-size: 24px !important;
  padding: 0 !important;
  /* mata o padding:25% inline da lupa */
  line-height: 1 !important;
  vertical-align: middle !important;
}

#tabelaresultado td .fa-search:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\ef7a";
}

#tabelaresultado td .fa-trash-o:before,
#tabelaresultado td .fa-trash:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e92e";
}

#tabelaresultado td .fa-external-link-square:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\e89e";
}

/* VÃO PADRÃO: a tabela é .table-condensed (padding 5px/célula = só 10px entre
   ícones, apertado). Padding lateral IGUAL nas 3 células de ação = distância
   igual entre os 3 ícones (8 + 8 = 16px de vão), estável em qualquer largura.
   :has(> ...) com filho DIRETO de propósito: não pega o <td colspan> do
   submódulo expandido, e não existe td no div#tabelaresultado.modulos (home). */
#tabelaresultado td:has(> a > .fa-search),
#tabelaresultado td:has(> .excluir),
#tabelaresultado td:has(> .fa-trash),
#tabelaresultado td:has(> a > .fa-external-link-square) {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* RESPIRO na borda esquerda: a 1ª coluna (a lupa, ou o que a página puser lá)
   não fica socada na borda. thead junto pra header e dados alinharem.
   ESPECIFICIDADE: este seletor é (1,1,3) e vence o vão acima, que é (1,1,2).
   Se um dia mexer no seletor do VÃO, mantenha-o ABAIXO de (1,1,3) — se ele
   passar (ex.: ganhando "> tbody > tr"), este respiro some silenciosamente. */
#tabelaresultado>thead>tr>th:first-child,
#tabelaresultado>tbody>tr>td:first-child {
  padding-left: 16px !important;
}

#tabelaresultado td a {
  vertical-align: middle;
}

/* rede de segurança pra células que DE FATO têm 2+ links/ícones lado a lado
   (não é o caso das 3 ações acima, cada uma no seu td). */
#tabelaresultado td a+a,
#tabelaresultado td a+i,
#tabelaresultado td i+a,
#tabelaresultado td i+i {
  margin-left: 8px;
}

/* Fileira de botões da ficha (editardados: .row.buttons):
   espaçamento DETERMINÍSTICO com flex+gap (o whitespace do markup
   fazia os vãos variarem). */
.row.buttons>.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.row.buttons>.form-group .btn,
.row.buttons>.form-group .btn+.btn,
.row.buttons>.form-group .btn-pesquisa+.btn,
.row.buttons>.form-group .btn+.btn-group,
.row.buttons>.form-group .btn-pesquisa+.btn-group,
.row.buttons>.form-group .btn-group+.btn,
.row.buttons>.form-group .btn-group+.btn-group,
.row.buttons>.form-group .btn-group+.btn-pesquisa,
.row.buttons>.form-group .btn-group+input[type="hidden"]+.btn,
.row.buttons>.form-group .btn+input[type="hidden"]+.btn,
.row.buttons>.form-group .btn-pesquisa+input[type="hidden"]+.btn-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   RODADA 10 — select2: lista destravada do max-width fantasma
   O select2.css VENDORADO foi editado no passado com
   .select2-results{max-width:600px} (não existe no select2
   original). Em campos largos a lista ficava com 600px dentro
   de um painel na largura do campo — "lista quebrada" em todo
   o app. Aqui soltamos o teto; o painel volta a casar com o
   campo (largura definida pelo JS do select2, como sempre).
   ========================================================= */
.select2-results {
  max-width: none !important;
}

/* Upload Dropzone no modo dark */
.theme-5 .dropzone {
  background: #1a2333 !important;
  border-color: #2d3142 !important;
}

.theme-5 .dropzone .dz-message .dz-button {
  color: #e5e7eb !important;
}

.theme-5 .dropzone .dz-preview .dz-details {
  color: #e5e7eb !important;
}

.theme-5 .dropzone .dz-preview .dz-details .dz-filename span,
.theme-5 .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(11, 15, 25, .7) !important;
}

.theme-5 .dropzone .dz-preview .dz-progress {
  background: rgba(11, 15, 25, .9) !important;
}

/* ==========================================================================
   RESPIRO INFERIOR — telas de edicao (rota /editardados/)           [Rodada 20]
   --------------------------------------------------------------------------
   O conteúdo (#main › #div-submodulo-para-guia › #submodulos) colava no rodapé,
   sem margem inferior. NB: a versão anterior deste bloco (e o per-view
   editardados.css) tinham a sequência de FECHAR-COMENTÁRIO dentro do próprio
   comentário, que o encerrava no meio e grudava a palavra seguinte na regra como
   seletor descendente — a regra nunca casava. Aqui o texto não contém essa
   sequência no meio.
   Escopo: só o #main que CONTÉM o container de submódulos da edição — não vaza
   pras demais telas. Verificado na página real (console, snippet auto-limpante):
   margin-bottom no #main cresce a página +64px (float contido; #main é o fim do
   documento — fimY == docHeight). Calibrar aqui se quiser mais/menos respiro. */
#main:has(#div-submodulo-para-guia) {
  margin-bottom: 64px !important;
}

/* =========================================================
   CARET dos dropdowns -> chevron do Material Symbols (GLOBAL)
   ---------------------------------------------------------
   O .caret do Bootstrap 3 NÃO é ícone de fonte: é um TRIÂNGULO DESENHADO COM
   BORDAS (theme.css:3715 — width:0; height:0; border-top:4px solid; laterais
   transparentes). Por isso ele não aparecia em nenhuma varredura por classe de
   FontAwesome ou Glyphicon: não tem glifo, não tem família, não tem codepoint.
   É o último símbolo de 2011 sobrando ao lado dos glifos novos. Em 33 views
   (todo dropdown do app), então o escopo aqui é o COMPONENTE, não a página.

   Trocamos por CHEVRON (expand_more/expand_less) e não pelo triângulo sólido
   (arrow_drop_down \e5c5, que seria o equivalente literal): o chevron é o que já
   usamos no seletor de <select> do ADM Módulos (editardadosmodulos.css desenha
   um chevron em SVG), então mantém a linha. Se preferir o triângulo, é trocar os
   dois content abaixo por \e5c5 / \e5c7 e somar os codepoints ao subset.

   COMO FUNCIONA: mata as bordas (o triângulo some), devolve caixa ao <span>
   vazio e põe o glifo no ::before. As 5 variantes do legado morrem juntas
   porque todas dependiam de border-width, e border:0 !important vence todas:
     .caret (base, aponta baixo) · .dropup .caret + .navbar-fixed-bottom
     .dropdown .caret (apontam cima) · .btn-lg .caret e .dropup .btn-lg .caret
     (só mudavam a espessura). Há ainda um .btn>.caret{border-top-color:#000}
     dentro de @media print: inofensivo, a borda já é 0.

   ALINHAMENTO: aqui NÃO entra o nudge de -1.5px do filtro.css. Aquele existe pra
   casar ícone com a MAIÚSCULA do texto ao lado; o caret é seta de controle, mora
   colado no rótulo do botão e o vertical-align:middle do próprio legado já o
   posiciona bem. Ver a regra de dois baldes documentada no filtro.css.
   REVERSÍVEL: apagar este bloco devolve o triângulo.
   ========================================================= */
.caret {
  border: 0 !important;
  /* mata o triângulo (vence o border-width de todas as variantes) */
  width: auto !important;
  height: auto !important;
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.caret::before {
  content: "\e5cf";
}

/* expand_more — dropdown abre pra baixo */
/* dropup e navbar de rodapé: o menu abre pra CIMA, a seta acompanha */
.dropup .caret::before,
.navbar-fixed-bottom .dropdown .caret::before {
  content: "\e5ce";
}

/* expand_less */

/* =========================================================
   TAMANHO dos ícones das DUAS BARRAS (navbar + sidebar) — 24px
   ---------------------------------------------------------
   Medido na tela real: as duas barras tinham CINCO tamanhos, todos herdados de
   onde o ícone caiu — sidebar 14px (num rail de 56px), sino 13px, ambiente 13px,
   usuário 13px, caret 18px, home 20px e a ajuda 26px (fa-2x do legado). Daí a
   sensação de "muito pequenos": ninguém definia tamanho, cada um herdava.
   21px → 24px, escolhido pelo Matheus na tela real (ainda pareciam pequenos a 21).

   ⚠️ RISCO CONFERIDO: a navbar é .navbar-fixed-top. Se o ícone maior esticasse a
   barra, o conteúdo de TODAS as telas descia junto. Por isso os ícones levam
   line-height:1 e vertical-align:middle — a caixa do glifo (1.2em) não empurra a
   altura da linha. Medido no bench: altura da navbar IGUAL antes e depois.

   O caret fica FORA (segue 18px): é seta de controle, não ícone de conteúdo —
   acompanhar o corpo do ícone ao lado deixaria a seta grande demais.
   Os ícones do DROPDOWN do usuário (sol/lua/cadeado/sair) também ficam fora:
   são itens de menu, não da barra. Se um dia padronizarmos menus, é lá.
   ========================================================= */
#menu .sidebar #sidebar>li>a>i,
#menu .sidebar #minimize-menu>i,
header#pc .navbar-nav>li>a>i,
header#pc .navbar-brand>i,
header#mobile .navbar-nav>li>a>i,
header#mobile .navbar-brand>i {
  font-size: 24px !important;
  line-height: 1 !important;
  /* não deixa a caixa de 1.2em esticar a barra */
  vertical-align: middle !important;
}

/* =========================================================
   ÍCONES DE MÓDULO "ms-*" — Material Symbols p/ o campo imagem (modulos.texto3)
   ---------------------------------------------------------
   Spec: specs/0004-seletor-icones-material-modulos/spec.md. Os renderers cravam
   <i class="fa ${texto3}"> (home_modulos:180, bloco-menu-topo:451/473) e NÃO são
   tocados: o valor novo é uma classe "ms-<nome oficial>" e estas regras vencem a
   base .fa com !important — o mesmo padrão dos remaps das barras.
   🔒 INVARIANTE: o font-awesome.min.css NUNCA sai do global — TODAS as bases de
   clientes têm valores fa-* salvos neste campo (dado de produção, invisível ao
   repo). As duas bibliotecas coexistem PARA SEMPRE. (Matheus, 2026-07-16)
   GERADO do catálogo public/js/ms-icon-catalog.js (fonte única, tabela oficial,
   291 ícones em 14 categorias); ícone novo => regenerar o subset (instruções no
   bloco do @font-face acima).
   ========================================================= */
i[class^="ms-"]::before,
i[class*=" ms-"]::before,
span[class^="ms-"]::before,
span[class*=" ms-"]::before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  vertical-align: middle;
}

.ms-account_balance::before {
  content: "\e84f";
}

.ms-account_balance_wallet::before {
  content: "\e850";
}

.ms-account_circle::before {
  content: "\f20b";
}

.ms-account_tree::before {
  content: "\e97a";
}

.ms-add_circle::before {
  content: "\e990";
}

.ms-add_task::before {
  content: "\f23a";
}

.ms-admin_panel_settings::before {
  content: "\ef3d";
}

.ms-agriculture::before {
  content: "\ea79";
}

.ms-alarm::before {
  content: "\e855";
}

.ms-alarm_on::before {
  content: "\e858";
}

.ms-analytics::before {
  content: "\ef3e";
}

.ms-apartment::before {
  content: "\ea40";
}

.ms-api::before {
  content: "\f1b7";
}

.ms-approval::before {
  content: "\e982";
}

.ms-apps::before {
  content: "\e5c3";
}

.ms-architecture::before {
  content: "\ea3b";
}

.ms-archive::before {
  content: "\e149";
}

.ms-article::before {
  content: "\ef87";
}

.ms-assignment::before {
  content: "\e85d";
}

.ms-assignment_ind::before {
  content: "\e85e";
}

.ms-assignment_turned_in::before {
  content: "\e862";
}

.ms-assured_workload::before {
  content: "\eb6f";
}

.ms-attach_file::before {
  content: "\e226";
}

.ms-attach_money::before {
  content: "\e227";
}

.ms-auto_stories::before {
  content: "\e666";
}

.ms-autorenew::before {
  content: "\e863";
}

.ms-badge::before {
  content: "\ea67";
}

.ms-balance::before {
  content: "\eaf6";
}

.ms-bar_chart::before {
  content: "\e26b";
}

.ms-barcode::before {
  content: "\e70b";
}

.ms-block::before {
  content: "\f08c";
}

.ms-bolt::before {
  content: "\ea0b";
}

.ms-book::before {
  content: "\e86e";
}

.ms-bookmark::before {
  content: "\e8e7";
}

.ms-brush::before {
  content: "\e3ae";
}

.ms-bubble_chart::before {
  content: "\e6dd";
}

.ms-build::before {
  content: "\f8cd";
}

.ms-calculate::before {
  content: "\ea5f";
}

.ms-calendar_month::before {
  content: "\ebcc";
}

.ms-calendar_today::before {
  content: "\e935";
}

.ms-call::before {
  content: "\f0d4";
}

.ms-campaign::before {
  content: "\ef49";
}

.ms-cancel::before {
  content: "\e888";
}

.ms-card_giftcard::before {
  content: "\e8f6";
}

.ms-cases::before {
  content: "\e992";
}

.ms-category::before {
  content: "\e72c";
}

.ms-chat::before {
  content: "\e0c9";
}

.ms-chat_bubble::before {
  content: "\e0cb";
}

.ms-check_circle::before {
  content: "\f0be";
}

.ms-checklist::before {
  content: "\e6b1";
}

.ms-child_care::before {
  content: "\eb41";
}

.ms-cloud::before {
  content: "\f15c";
}

.ms-cloud_download::before {
  content: "\e2c0";
}

.ms-cloud_sync::before {
  content: "\eb5a";
}

.ms-cloud_upload::before {
  content: "\e2c3";
}

.ms-code::before {
  content: "\e86f";
}

.ms-computer::before {
  content: "\e31e";
}

.ms-construction::before {
  content: "\ea3c";
}

.ms-contact_mail::before {
  content: "\e0d0";
}

.ms-contact_phone::before {
  content: "\f0c0";
}

.ms-contacts::before {
  content: "\e0ba";
}

.ms-content_copy::before {
  content: "\e14d";
}

.ms-content_paste::before {
  content: "\e14f";
}

.ms-credit_card::before {
  content: "\e8a1";
}

.ms-currency_exchange::before {
  content: "\eb70";
}

.ms-dashboard::before {
  content: "\e871";
}

.ms-data_usage::before {
  content: "\eff2";
}

.ms-database::before {
  content: "\f20e";
}

.ms-date_range::before {
  content: "\e916";
}

.ms-delete::before {
  content: "\e92e";
}

.ms-dentistry::before {
  content: "\e0a6";
}

.ms-description::before {
  content: "\e873";
}

.ms-design_services::before {
  content: "\f10a";
}

.ms-devices::before {
  content: "\e326";
}

.ms-directions_car::before {
  content: "\eff7";
}

.ms-diversity_3::before {
  content: "\f8d9";
}

.ms-dns::before {
  content: "\e875";
}

.ms-document_scanner::before {
  content: "\e5fa";
}

.ms-domain::before {
  content: "\e7ee";
}

.ms-done_all::before {
  content: "\e877";
}

.ms-donut_large::before {
  content: "\e917";
}

.ms-download::before {
  content: "\f090";
}

.ms-draft::before {
  content: "\e674";
}

.ms-drafts::before {
  content: "\e151";
}

.ms-ecg_heart::before {
  content: "\f6e9";
}

.ms-eco::before {
  content: "\ea35";
}

.ms-edit_note::before {
  content: "\e745";
}

.ms-elderly::before {
  content: "\f21a";
}

.ms-emergency::before {
  content: "\e1eb";
}

.ms-encrypted::before {
  content: "\e593";
}

.ms-engineering::before {
  content: "\ea3d";
}

.ms-error::before {
  content: "\f8b6";
}

.ms-event::before {
  content: "\e878";
}

.ms-event_available::before {
  content: "\e614";
}

.ms-event_busy::before {
  content: "\e615";
}

.ms-event_note::before {
  content: "\e616";
}

.ms-explore::before {
  content: "\e87a";
}

.ms-extension::before {
  content: "\e87b";
}

.ms-face::before {
  content: "\f008";
}

.ms-fact_check::before {
  content: "\f0c5";
}

.ms-factory::before {
  content: "\ebbc";
}

.ms-family_restroom::before {
  content: "\f1a2";
}

.ms-favorite::before {
  content: "\e87e";
}

.ms-feed::before {
  content: "\f009";
}

.ms-fence::before {
  content: "\f1f6";
}

.ms-file_copy::before {
  content: "\e173";
}

.ms-filter_alt::before {
  content: "\ef4f";
}

.ms-fingerprint::before {
  content: "\e90d";
}

.ms-flag::before {
  content: "\f0c6";
}

.ms-flowchart::before {
  content: "\f38d";
}

.ms-folder::before {
  content: "\e2c7";
}

.ms-folder_open::before {
  content: "\e2c8";
}

.ms-folder_shared::before {
  content: "\e2c9";
}

.ms-forum::before {
  content: "\e8af";
}

.ms-foundation::before {
  content: "\f200";
}

.ms-functions::before {
  content: "\e24a";
}

.ms-garage::before {
  content: "\f011";
}

.ms-gavel::before {
  content: "\e90e";
}

.ms-group::before {
  content: "\ea21";
}

.ms-group_add::before {
  content: "\e7f0";
}

.ms-groups::before {
  content: "\f233";
}

.ms-handshake::before {
  content: "\ebcb";
}

.ms-healing::before {
  content: "\e3f3";
}

.ms-health_and_safety::before {
  content: "\e1d5";
}

.ms-help::before {
  content: "\e8fd";
}

.ms-history::before {
  content: "\e8b3";
}

.ms-history_edu::before {
  content: "\ea3e";
}

.ms-home::before {
  content: "\e9b2";
}

.ms-home_repair_service::before {
  content: "\f100";
}

.ms-home_work::before {
  content: "\f030";
}

.ms-hourglass_empty::before {
  content: "\e88b";
}

.ms-house::before {
  content: "\ea44";
}

.ms-http::before {
  content: "\e902";
}

.ms-image::before {
  content: "\e3f4";
}

.ms-import_contacts::before {
  content: "\e0e0";
}

.ms-info::before {
  content: "\e88e";
}

.ms-insights::before {
  content: "\f092";
}

.ms-integration_instructions::before {
  content: "\ef54";
}

.ms-inventory::before {
  content: "\e179";
}

.ms-inventory_2::before {
  content: "\e1a1";
}

.ms-key::before {
  content: "\e73c";
}

.ms-label::before {
  content: "\e893";
}

.ms-label_important::before {
  content: "\e948";
}

.ms-language::before {
  content: "\ea07";
}

.ms-laptop_mac::before {
  content: "\e320";
}

.ms-leaderboard::before {
  content: "\f20c";
}

.ms-library_books::before {
  content: "\e02f";
}

.ms-lightbulb::before {
  content: "\e90f";
}

.ms-link::before {
  content: "\e250";
}

.ms-list_alt::before {
  content: "\e677";
}

.ms-local_atm::before {
  content: "\e53e";
}

.ms-local_hospital::before {
  content: "\e548";
}

.ms-local_mall::before {
  content: "\e54c";
}

.ms-local_offer::before {
  content: "\f05b";
}

.ms-local_shipping::before {
  content: "\e558";
}

.ms-location_city::before {
  content: "\e7f1";
}

.ms-location_on::before {
  content: "\f1db";
}

.ms-lock::before {
  content: "\e899";
}

.ms-lock_open::before {
  content: "\e898";
}

.ms-login::before {
  content: "\ea77";
}

.ms-logout::before {
  content: "\e9ba";
}

.ms-low_priority::before {
  content: "\e16d";
}

.ms-mail::before {
  content: "\e159";
}

.ms-map::before {
  content: "\e55b";
}

.ms-medical_services::before {
  content: "\f109";
}

.ms-medication::before {
  content: "\f033";
}

.ms-memory::before {
  content: "\e322";
}

.ms-menu_book::before {
  content: "\ea19";
}

.ms-mic::before {
  content: "\e31d";
}

.ms-money_off::before {
  content: "\f038";
}

.ms-monitor_heart::before {
  content: "\eaa2";
}

.ms-monitoring::before {
  content: "\f190";
}

.ms-more_time::before {
  content: "\ea5d";
}

.ms-movie::before {
  content: "\e684";
}

.ms-music_note::before {
  content: "\e405";
}

.ms-newspaper::before {
  content: "\eb81";
}

.ms-note_add::before {
  content: "\e89c";
}

.ms-notifications::before {
  content: "\e7f5";
}

.ms-notifications_active::before {
  content: "\e7f7";
}

.ms-open_in_new::before {
  content: "\e89e";
}

.ms-package_2::before {
  content: "\f569";
}

.ms-paid::before {
  content: "\f041";
}

.ms-palette::before {
  content: "\e40a";
}

.ms-pallet::before {
  content: "\f86a";
}

.ms-password::before {
  content: "\f042";
}

.ms-payments::before {
  content: "\ef63";
}

.ms-pending::before {
  content: "\ef64";
}

.ms-pending_actions::before {
  content: "\f1bb";
}

.ms-percent::before {
  content: "\eb58";
}

.ms-person::before {
  content: "\f0d3";
}

.ms-person_add::before {
  content: "\ea4d";
}

.ms-pets::before {
  content: "\e91d";
}

.ms-phone_in_talk::before {
  content: "\e61d";
}

.ms-photo_camera::before {
  content: "\e412";
}

.ms-picture_as_pdf::before {
  content: "\e415";
}

.ms-pie_chart::before {
  content: "\f0da";
}

.ms-place::before {
  content: "\f1db";
}

.ms-playlist_add_check::before {
  content: "\e065";
}

.ms-podcasts::before {
  content: "\f048";
}

.ms-point_of_sale::before {
  content: "\f17e";
}

.ms-policy::before {
  content: "\ea17";
}

.ms-post_add::before {
  content: "\ea20";
}

.ms-precision_manufacturing::before {
  content: "\f049";
}

.ms-price_check::before {
  content: "\f04b";
}

.ms-print::before {
  content: "\e8ad";
}

.ms-priority_high::before {
  content: "\e645";
}

.ms-privacy_tip::before {
  content: "\f0dc";
}

.ms-psychology::before {
  content: "\ea4a";
}

.ms-public::before {
  content: "\e80b";
}

.ms-push_pin::before {
  content: "\f10d";
}

.ms-qr_code_2::before {
  content: "\e00a";
}

.ms-query_stats::before {
  content: "\e4fc";
}

.ms-question_answer::before {
  content: "\e8af";
}

.ms-real_estate_agent::before {
  content: "\e73a";
}

.ms-receipt::before {
  content: "\e8b0";
}

.ms-receipt_long::before {
  content: "\ef6e";
}

.ms-record_voice_over::before {
  content: "\e91f";
}

.ms-recycling::before {
  content: "\e760";
}

.ms-redeem::before {
  content: "\e8f6";
}

.ms-remove_circle::before {
  content: "\f08f";
}

.ms-reply::before {
  content: "\e15e";
}

.ms-report::before {
  content: "\f052";
}

.ms-request_quote::before {
  content: "\f1b6";
}

.ms-router::before {
  content: "\e328";
}

.ms-rss_feed::before {
  content: "\e0e5";
}

.ms-rule::before {
  content: "\f1c2";
}

.ms-savings::before {
  content: "\e2eb";
}

.ms-scale::before {
  content: "\eb5f";
}

.ms-scatter_plot::before {
  content: "\e268";
}

.ms-schedule::before {
  content: "\efd6";
}

.ms-schema::before {
  content: "\e4fd";
}

.ms-school::before {
  content: "\e80c";
}

.ms-search::before {
  content: "\ef7a";
}

.ms-security::before {
  content: "\e32a";
}

.ms-sell::before {
  content: "\f05b";
}

.ms-send::before {
  content: "\e163";
}

.ms-settings::before {
  content: "\e8b8";
}

.ms-share::before {
  content: "\e80d";
}

.ms-shield::before {
  content: "\e9e0";
}

.ms-shopping_bag::before {
  content: "\f1cc";
}

.ms-shopping_cart::before {
  content: "\e8cc";
}

.ms-show_chart::before {
  content: "\e6e1";
}

.ms-smart_toy::before {
  content: "\f06c";
}

.ms-smartphone::before {
  content: "\e7ba";
}

.ms-sms::before {
  content: "\e625";
}

.ms-sort::before {
  content: "\e164";
}

.ms-stacked_bar_chart::before {
  content: "\e9e6";
}

.ms-star::before {
  content: "\f09a";
}

.ms-sticky_note_2::before {
  content: "\f1fc";
}

.ms-storage::before {
  content: "\e1db";
}

.ms-store::before {
  content: "\e8d1";
}

.ms-storefront::before {
  content: "\ea12";
}

.ms-summarize::before {
  content: "\f071";
}

.ms-support_agent::before {
  content: "\f0e2";
}

.ms-sync::before {
  content: "\e627";
}

.ms-table_chart::before {
  content: "\e265";
}

.ms-table_view::before {
  content: "\f1be";
}

.ms-task::before {
  content: "\f075";
}

.ms-task_alt::before {
  content: "\e2e6";
}

.ms-terminal::before {
  content: "\eb8e";
}

.ms-text_snippet::before {
  content: "\f1c6";
}

.ms-thumb_up::before {
  content: "\f577";
}

.ms-timeline::before {
  content: "\e922";
}

.ms-timer::before {
  content: "\e425";
}

.ms-today::before {
  content: "\e8df";
}

.ms-topic::before {
  content: "\f1c8";
}

.ms-travel_explore::before {
  content: "\e2db";
}

.ms-trending_down::before {
  content: "\e8e3";
}

.ms-trending_up::before {
  content: "\e8e5";
}

.ms-tune::before {
  content: "\e429";
}

.ms-two_wheeler::before {
  content: "\e9f9";
}

.ms-unarchive::before {
  content: "\e169";
}

.ms-update::before {
  content: "\e923";
}

.ms-upload_file::before {
  content: "\e9fc";
}

.ms-vaccines::before {
  content: "\e138";
}

.ms-verified::before {
  content: "\ef76";
}

.ms-verified_user::before {
  content: "\f013";
}

.ms-videocam::before {
  content: "\e04b";
}

.ms-view_kanban::before {
  content: "\eb7f";
}

.ms-villa::before {
  content: "\e586";
}

.ms-visibility::before {
  content: "\e8f4";
}

.ms-visibility_off::before {
  content: "\e8f5";
}

.ms-vpn_key::before {
  content: "\e0da";
}

.ms-wallet::before {
  content: "\f8ff";
}

.ms-warehouse::before {
  content: "\ebb8";
}

.ms-warning::before {
  content: "\f083";
}

.ms-webhook::before {
  content: "\eb92";
}

.ms-widgets::before {
  content: "\e1bd";
}

.ms-wifi::before {
  content: "\e63e";
}

.ms-work::before {
  content: "\e943";
}

.ms-workspace_premium::before {
  content: "\e7af";
}

/* =========================================================
   BUSCA DE MÓDULOS no overlay de atalhos (#shortcut e
   #shortcut-mobile) — spec 0005. O campo é injetado pelo
   layout.js ANTES do #ulmodulos. Overlay é escuro (petróleo):
   input translúcido claro + foco lime, mesmo padrão da busca
   da home (public/css/views/home_modulos.css).
   ========================================================= */
#shortcut .atalhos-busca,
#shortcut-mobile .atalhos-busca {
  position: relative;
  width: 340px;
  max-width: 90vw;
  margin: 6px auto 22px;
}

#shortcut .atalhos-busca>.fa-search,
#shortcut-mobile .atalhos-busca>.fa-search {
  position: absolute;
  left: 13px;
  top: 19px;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(230, 240, 242, .55);
  pointer-events: none;
}

#shortcut .atalhos-busca>input,
#shortcut-mobile .atalhos-busca>input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #e6f0f2;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#shortcut .atalhos-busca>input::placeholder,
#shortcut-mobile .atalhos-busca>input::placeholder {
  color: rgba(230, 240, 242, .45);
}

#shortcut .atalhos-busca>input:focus,
#shortcut-mobile .atalhos-busca>input:focus {
  border-color: rgba(187, 244, 81, .9);
  box-shadow: 0 0 0 3px rgba(187, 244, 81, .25);
}

#shortcut .atalhos-busca-vazio,
#shortcut-mobile .atalhos-busca-vazio {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(230, 240, 242, .6);
  margin: 10px 0 0;
}

/* filtro do overlay: esconde item que não casa (CLASSE + !important porque os
   tiles do atalho podem ter display forçado por regra legada) */
#shortcut #ulmodulos>.atalhos-oculto,
#shortcut-mobile #ulmodulos-mobile>.atalhos-oculto {
  display: none !important;
}

.wrapper-field-label {
  display: flex;
  justify-content: space-between;
}

.wrapper-field-label__action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
}

.wrapper-field-label__action>a,
.wrapper-field-label__action>button {
  margin-left: unset !important;
}

/* ============================================================================
   2026-07-27 — Rotulo x botoes de acao (+ / i / copiar) alinhados pelo CENTRO
   ----------------------------------------------------------------------------
   SINTOMA: em campos como "Cliente" e "Parte Adversa" os botoes pareciam
   desalinhados (mais baixos) em relacao ao texto do rotulo.

   CAUSA (medida na tela real, nao inferida): o <label> tem `margin-bottom:5px`.
   No flex a MARGEM entra no calculo do alinhamento -> a caixa-com-margem do
   label fica com 23px e estica o `.wrapper-field-label`; o bloco `__action`
   (que ja tem align-items:center) centra o botao nesses 23px. Resultado medido:
       centro do TEXTO do label = 196   |   centro do botao = 199   -> 3px fora.

   FIX: tira a margem do label e passa a MESMA margem para o wrapper. Assim o
   label volta a 18px, o wrapper idem, e o botao (18px) centra no mesmo ponto
   do texto (197 = 197). O espaco ate o campo nao muda -> nada se move, nenhuma
   altura cresce, o grid do Bootstrap nao se reorganiza.

   Tentativas descartadas (registradas p/ nao repetir): mexer no `line-height`
   do label INCHA a linha e quebra o grid, porque so atinge campos QUE TEM botao;
   e seletores `.form-group > .btn` nao alcancam nada -- os botoes ficam dois
   niveis abaixo, dentro de `.wrapper-field-label__action` (estrutura vinda do
   commit 1c1be29d2). Convivem no app campos COM e SEM esse wrapper.

   Classe propria do componente (nao vaza) e sem escopo de tema de proposito:
   vale para theme-3 / theme-4 / theme-5 de uma vez. Aditivo; reverter = apagar
   este bloco (backup: site-old-20260727.css).
   ============================================================================ */
.wrapper-field-label {
  align-items: center;
  margin-bottom: 5px;
}
.wrapper-field-label > label {
  margin-bottom: 0 !important;
}

/* ============================================================================
   2026-07-27 — Icone de DOWNLOAD das grids entra no padrao dos vizinhos
   ----------------------------------------------------------------------------
   O bloco de icones de grid (linha ~4990 deste arquivo) ja normaliza lixeira,
   "abrir em nova aba", engrenagem etc. para 18px + Material Symbols outline +
   petrol. O `fa-download` NAO estava naquela lista, entao continuou `fa-2x`
   solido: era o unico icone pesado e fora de escala da fileira.

   Ancorado em `a[download]` (o atributo que o proprio markup ja usa para
   renomear o arquivo baixado, formulario-class.php:3214-3218) em vez da classe
   do icone — mais estavel do que depender de `.fa-download`.

   NAO se mexe no alinhamento da celula de proposito: aquela coluna e a do NOME
   do arquivo (config `visualizacao-nome-arquivo-upload-documentos`); o icone vem
   DEPOIS do nome. Com a config desligada o nome fica vazio e o icone parece
   solto — e comportamento esperado, nao desalinhamento. Zerar o font-size do
   link (usado num teste) esconderia o nome quando a config estiver ligada.

   Aditivo; reverter = apagar este bloco (backup: site-old-20260727-posmerge.css).
   ============================================================================ */
td > a[download] > :is(i, span) {
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  color: #104E64 !important;
}

td > a[download] > :is(i, span):before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  content: "\f090" !important;
}

/* ============================================================================
   2026-07-27 — "Excluir" do cabecalho de submodulo: conteudo LEGIVEL
   ----------------------------------------------------------------------------
   Na faixa lime do cabecalho, o texto e o icone do botao vinham escuros sobre o
   fundo vermelho — o fundo nunca foi o problema, o conteudo e que sumia.
   Mantem o vermelho do Bootstrap e forca BRANCO no texto, no glifo e em
   qualquer filho (inclui `fill` caso a lixeira seja SVG). ~4.5:1 de contraste.

   Escopado a `[id^="sub-"] .panel-heading` (mesmo seletor que o projeto ja usa
   para essa faixa): `.btn-danger` puro e global do Bootstrap e mudaria todo
   botao vermelho do sistema. Aditivo; reverter = apagar este bloco.
   ============================================================================ */
[id^="sub-"] .panel-heading .btn-danger {
  background-color: #D9534F !important;
  border-color: #C9302C !important;
  color: #fff !important;
}

[id^="sub-"] .panel-heading .btn-danger *,
[id^="sub-"] .panel-heading .btn-danger .fa,
[id^="sub-"] .panel-heading .btn-danger .glyphicon,
[id^="sub-"] .panel-heading .btn-danger svg {
  color: #fff !important;
  fill: #fff !important;
}

/* ============================================================================
   2026-07-27 — Historico: "+" circulado vira LUPA COM "+", em traco fino
   ----------------------------------------------------------------------------
   O texto do andamento e cortado em 50 caracteres e o resto abre num popover ao
   passar o mouse NO ICONE (formulario-class.php:3254). O glifo era
   `fa-plus-circle`, que sugere "adicionar" — nao "ver o resto do texto".

   POR QUE SVG e nao fonte (importante p/ nao refazer a investigacao):
     · FontAwesome tem `fa-search-plus`, mas SO na versao solida/pesada — nao ha
       eixo de peso, entao nao da p/ afinar (ficou "muito espessa").
     · A fonte Material Symbols do projeto (public/fonts/material-symbols/) e um
       SUBSET com apenas 306 glifos: `zoom_in` (\e8ff) e `search` (\e8b6) NAO
       existem nela. Conferido com fontTools no proprio .woff2.
       (Foi por isso que `\e5d3` more_horiz renderizou QUADRADO VAZIO antes.)
   Desenhar em SVG resolve os dois: da a lupa COM "+" e deixa a espessura sob
   controle no `stroke-width` (1.5 = fino, aprovado). Cor casada com os demais
   icones de grid (#104E64) e variante clara no tema escuro, igual a linha 5095.

   Ajuste de espessura: mexer SO no stroke-width (1.2 mais fino / 1.8 mais forte).
   Aditivo; reverter = apagar este bloco (backup: site-old-20260727-posmerge.css).
   ============================================================================ */
.plus-grid-historico:before {
  content: '' !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23104E64' stroke-width='1.5' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.4' y1='15.4' x2='20.5' y2='20.5'/><line x1='10.5' y1='7.6' x2='10.5' y2='13.4'/><line x1='7.6' y1='10.5' x2='13.4' y2='10.5'/></svg>") no-repeat center/contain;
}

.theme-5 .plus-grid-historico:before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc6d6' stroke-width='1.5' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.4' y1='15.4' x2='20.5' y2='20.5'/><line x1='10.5' y1='7.6' x2='10.5' y2='13.4'/><line x1='7.6' y1='10.5' x2='13.4' y2='10.5'/></svg>") no-repeat center/contain;
}

/* ============================================================================
   2026-07-27 — Barra de acoes (.row.buttons): glifos legados -> biblioteca
   ----------------------------------------------------------------------------
   Salvar/Clonar/Excluir/Modelos/Novo usavam glyphicon (Bootstrap 3) e fa solidos,
   destoando dos icones ja modernizados. Passam a Material Symbols outline 18px.
   Codepoints CONFERIDOS na fonte com fontTools (o .woff2 do projeto e um SUBSET
   de 306 glifos — codepoint ausente renderiza QUADRADO VAZIO).

   ⚠️ O seletor exige classe de icone (`[class*="glyphicon"]`/`[class*="fa-"]`).
   Uma versao anterior usava `.btn > span` e pegou tambem o <span> do TEXTO dos
   botoes, inflando os rotulos a 18px. Nao repetir.

   `position:static;top:0` porque o .glyphicon base traz position:relative +
   top:1px, que empurra o icone 1px e o desalinha do texto (mesmo acerto que o
   bloco de icones de grid ja faz na engrenagem).
   ============================================================================ */
/* icone e rotulo no MESMO eixo vertical, em TODO botao com os dois.
   `vertical-align:middle` nao basta: ele alinha pela LINHA DE BASE, e como o
   glifo e maior que o texto (18px vs 12px) o icone descia para o rodape do
   botao. inline-flex + align-items:center centra os dois seja qual for a
   diferenca de tamanho. Em botao SEM icone (Voltar, Log de Eventos) o efeito e
   nulo — nao ha o que alinhar. `gap` substitui o respiro que vinha dos `&nbsp;`. */
.row.buttons .btn,
:is(.painel-interno, .submodulo) .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
}

/* Botao "Concluir" do filtro de agenda (views/filtro.php) fica escondido ate
   marcar um checkbox na grade — mas a regra acima, `!important` + 3 classes,
   ganhava do `display:none` inline que o jQuery .hide()/.show() aplicava (sem
   !important, inline sozinho nao vence !important de nenhuma especificidade).
   4 classes aqui garante especificidade maior que a regra acima. */
.row.buttons .btn.concluir-compromissos-oculto {
  display: none !important;
}

.row.buttons .btn > [class*="glyphicon"],
.row.buttons .btn > [class*="fa-"] {
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

.row.buttons .glyphicon-save:before,
.row.buttons .fa-clone:before,
.row.buttons .glyphicon-trash:before,
.row.buttons .fa-clipboard:before,
.row.buttons .glyphicon-plus:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  font-weight: 400 !important;
}

.row.buttons .glyphicon-save:before { content: "\e161" !important; }
.row.buttons .fa-clone:before { content: "\e14d" !important; }
.row.buttons .glyphicon-trash:before { content: "\e92e" !important; }
.row.buttons .fa-clipboard:before { content: "\e873" !important; }
.row.buttons .glyphicon-plus:before { content: "\e145" !important; }

/* ============================================================================
   2026-07-27 — Rodape do WorkFlow: SVG desenhado a mao -> biblioteca
   ----------------------------------------------------------------------------
   "Trocar de Fase" e "Ver tudo" traziam SVG inline proprio (stroke-width 1.9),
   mais pesado que o resto e fora da familia de icones do app. Esconde o SVG e
   poe o glifo no ::before — sem tocar no markup do componente.

   "Ver tudo" usa `list` e nao lupa: `search`/`zoom_in` NAO existem no subset
   (mesma limitacao que levou a lupa do Historico a ser desenhada em SVG).
   Semanticamente cabe — "ver tudo" abre a lista completa.
   ============================================================================ */
.wf-foot__btn svg {
  display: none !important;
}

.wf-foot__btn--troca:before,
.wf-foot__btn--ver:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  font-weight: 400 !important;
  font-size: 17px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 6px;
}

.wf-foot__btn--troca:before { content: "\e8d4"; }
.wf-foot__btn--ver:before { content: "\e896"; }

/* ============================================================================
   2026-07-27 — Botoes de rodape dos SUBMODULOS (Novo / Ver Todos / Ver
   Vinculados / Filtrar por tipo de andamento)
   ----------------------------------------------------------------------------
   Usavam `fa-search` (lupa solida) e `glyphicon-plus` — pesados perto dos icones
   ja modernizados.

   A LUPA CONTINUA LUPA, de proposito: os TRES botoes de busca/filtro compartilham
   a MESMA classe `.fa-search`, entao nao ha como dar glifos diferentes a cada um
   por CSS (so o texto os distingue). E a lupa e semanticamente correta nos tres.
   Como `search`/`zoom_in` NAO existem no subset da fonte, vem em SVG — mesmo
   desenho e traco (1.5) da lupa do Historico, sem o "+" (aqui e buscar, nao
   "ver mais texto").

   "Novo" usa a biblioteca (`add`), pois o glifo existe no subset.
   ============================================================================ */
:is(.painel-interno, .submodulo) .btn .fa-search:before {
  content: '' !important;
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23053345' stroke-width='1.5' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.4' y1='15.4' x2='20.5' y2='20.5'/></svg>") no-repeat center/contain;
}

.theme-5 :is(.painel-interno, .submodulo) .btn .fa-search:before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc6d6' stroke-width='1.5' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.4' y1='15.4' x2='20.5' y2='20.5'/></svg>") no-repeat center/contain;
}

:is(.painel-interno, .submodulo) .btn .glyphicon-plus {
  font-size: 17px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

:is(.painel-interno, .submodulo) .btn .glyphicon-plus:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes);
  font-weight: 400 !important;
  content: "\e145" !important;
}

/* ============================================================================
   2026-07-27 — CABECALHO dos submodulos: "+ Novo" e lixeira -> biblioteca
   ----------------------------------------------------------------------------
   Fecha o padrao: os mesmos `add`/`delete` ja usados na barra de acoes e nos
   botoes de rodape.

   ⚠️ O prefixo `body` NAO e redundante — nao remover. Existem regras
   `.theme-N [id^="sub-"] .panel-heading .btn .glyphicon-*:before` no
   `theme-4-vars.css` (linhas ~722 / ~2988 / ~5156) que trocam esses glifos por
   FontAwesome solido, e AQUELE arquivo carrega DEPOIS deste (bloco-superior:137
   vs :72). Com a mesma especificidade a regra de la vence; o `body` desempata.
   (O arquivo se chama "theme-4-vars" por origem, mas contem blocos para os tres
   temas — o nome nao indica o tema em uso.)

   A cor do glifo nao e tocada aqui: no botao Excluir ela vem do bloco que forca
   branco sobre o vermelho.
   ============================================================================ */
body:is(.theme-3, .theme-4, .theme-5) [id^="sub-"] .panel-heading .btn .glyphicon-plus:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e145" !important;
}

body:is(.theme-3, .theme-4, .theme-5) [id^="sub-"] .panel-heading .btn .glyphicon-trash:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e92e" !important;
}

body:is(.theme-3, .theme-4, .theme-5) [id^="sub-"] .panel-heading .btn :is(.glyphicon-plus, .glyphicon-trash) {
  font-size: 17px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

/* ============================================================================
   2026-07-27 🐛 — CAUSA RAIZ do botao com aparencia "quebrada" (relevo 3D)
   ----------------------------------------------------------------------------
   O bloco de `.btn-success/.btn-primary` (linha ~4151) usa `border-inline`, que
   declara SO as laterais. Topo e base ficam SEM declaracao — e ai vale o padrao
   do user-agent para <button>: `2px OUTSET`, o relevo 3D estilo Windows 98.

   Por isso o defeito parecia irregular pelo app: <a class="btn"> nao tem borda
   default e ficava liso; <button class="btn"> pegava o outset. Os dois convivem
   lado a lado em varias telas (ex.: "Voltar" <a> x "Relatorio" <button> em
   pessoas/filtro).

   FIX na origem, valendo para TODO botao lime do sistema:
     · `border:0` mata o default do navegador (e os 0.5px laterais do
       `border-inline`, que ficariam duplicados);
     · `outline` + `outline-offset:-0.5px` desenha o contorno FECHADO nos 4 lados
       POR DENTRO — outline nao entra no box model, entao nada incha nem empurra
       layout (trocar por `border` completo inchava o botao: testado, quebrou o
       cabecalho de submodulo).

   Substitui a correcao pontual que existia so em `[id^="sub-"] .panel-heading`
   — agora e global e aquela virou redundante.
   ============================================================================ */
.btn-success,
.btn-primary,
.btn-default {
  border: 0 !important;
  outline: 0.5px solid rgba(5, 51, 69, .45) !important;
  outline-offset: -0.5px !important;
}

/* ============================================================================
   2026-07-27 — SETAS legadas dos botoes -> biblioteca
   ----------------------------------------------------------------------------
   `fa-arrow-*` e `fa-chevron-*` solidos apareciam em 4-6 arquivos cada (o mais
   visivel: o "Voltar" de editardadosmodulos). Nenhum deles e icone de MODULO —
   conferido no banco (`modulos.texto3` nao tem arrow/chevron), entao a troca e
   segura. Ainda assim fica escopado a `.btn`: fora de botao essas setas podem
   estar em contextos que nao queremos tocar (paginacao, acordeao, etc.).

   arrow_back/forward ja existiam no subset; chevron_left/right e
   arrow_up/downward entraram na v57 da fonte (ver @font-face acima).
   ============================================================================ */
.btn .fa-arrow-left,
.btn .fa-arrow-right,
.btn .fa-arrow-up,
.btn .fa-arrow-down,
.btn .fa-chevron-left,
.btn .fa-chevron-right {
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

.btn .fa-arrow-left:before,
.btn .fa-arrow-right:before,
.btn .fa-arrow-up:before,
.btn .fa-arrow-down:before,
.btn .fa-chevron-left:before,
.btn .fa-chevron-right:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
}

.btn .fa-arrow-left:before { content: "\e5c4" !important; }
.btn .fa-arrow-right:before { content: "\e5c8" !important; }
.btn .fa-arrow-up:before { content: "\e5d8" !important; }
.btn .fa-arrow-down:before { content: "\e5db" !important; }
.btn .fa-chevron-left:before { content: "\e5cb" !important; }
.btn .fa-chevron-right:before { content: "\e5cc" !important; }

/* ============================================================================
   2026-07-27 — Botao "Clonar" (painelhtml-class.php:113-116) + icones de arquivo
   ----------------------------------------------------------------------------
   CLONAR — o icone era um LAPIS, que nao descreve a acao (clonar = duplicar), e
   aparecia SOLTO fora do botao. Vira `content_copy`, DENTRO do botao.

   Por que `::before` no botao e nao o <span> que ja existe: o `.btn-pesquisa` e
   um "botao composto" do projeto — o <span> do icone e `position:absolute` e
   deveria ficar SOBREPOSTO ao botao (dai o `padding-left:35px` da regra
   site.css:1437, que reserva o espaco dele). So que o wrapper tem
   `style="padding-left:20px"` INLINE no markup: isso empurra o botao, mas o
   icone continua ancorado em `left:12px` do WRAPPER — ou seja, cai ANTES de onde
   o botao comeca. Zerar o padding do wrapper por CSS tambem nao resolve (testado:
   o icone pula pra fora, porque o wrapper e maior que o botao).
   Esconder o <span> e desenhar no `::before` poe o icone dentro sem tocar no
   markup; o `padding-left:16px` iguala ao lado direito e mata o vao que sobrava.

   ⚠️ DIVERGE do padrao `.btn-pesquisa` (icone sobreposto). A solucao "no padrao"
   exigiria remover o `padding-left:20px` inline do wrapper no PHP.

   SELECIONAR ARQUIVO — `glyphicon-plus` ("+") nao comunica a acao; vira
   `attach_file` (clipe). O botao SELECIONA o arquivo (o envio vem no salvar),
   entao "anexar" descreve melhor que "enviar".
   DOWNLOAD da ficha — mesmo glifo ja usado nas grids.
   ============================================================================ */
.btn-pesquisa > .glyphicon-pencil {
  display: none !important;
}

#btnClonar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  padding-left: 16px !important;
}

#btnClonar::before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e14d";
  font-size: 16px;
  line-height: 1;
}

.fileinput-button .glyphicon-plus,
.downloadMultiploArquivosFicha .fa-download {
  font-size: 17px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

.fileinput-button .glyphicon-plus:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e226" !important;
}

.downloadMultiploArquivosFicha .fa-download:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\f090" !important;
}

/* ============================================================================
   2026-07-27 — Icones internos da FICHA -> biblioteca
   ----------------------------------------------------------------------------
   Engrenagem do topo, "+ Novo" do topo, os "+" dos campos, calendarios dos
   campos de data e as setas de expandir/recolher.

   ⚠️ ESCOPO E OBRIGATORIO AQUI — nao generalizar. 63 modulos guardam o proprio
   icone como DADO em `modulos.texto3` (fa-cogs, fa-calendar, fa-copy, fa-money,
   fa-clipboard, fa-user...). Trocar `.fa-cog`/`.fa-calendar` solto mudaria o
   icone dos modulos no menu e na home. Por isso tudo aqui esta preso a
   `#formPesquisa` ou a classe do proprio botao (`.tabAuxiliarDinamica`).
   A engrenagem do ATALHO (`fa-cogs` em `.shortcut-tile`) fica intacta: e dado.

   Os "+" miram `.tabAuxiliarDinamica`/`...Grid` (classe do botao) e nao o
   wrapper: convivem campos COM e SEM `.wrapper-field-label`, e mirar o wrapper
   deixava metade dos campos para tras.

   `font-size:0` no botao: o markup traz `&nbsp;<i/>&nbsp;` — dois espacos fixos
   que alargavam o botao. Aqui e seguro porque esse botao so tem o icone.
   (NAO fazer isso no link de download: la o mesmo padrao pode conter o NOME do
   arquivo, que sumiria.)

   `glyphicon-pencil` (lapis) ficou de fora: `edit`/`create` NAO existem no
   subset da fonte.
   ============================================================================ */
/* Botao "+ Novo" do topo: icone e rotulo no MESMO eixo vertical.
   `vertical-align:middle` nao resolve — ele alinha pela LINHA DE BASE, e com o
   glifo a 17px contra texto de 12px o icone descia para o rodape do botao.
   inline-flex + align-items:center poe os dois no centro, seja qual for a
   diferenca de tamanho entre eles. (Mesmo tratamento dos botoes de submodulo.) */
#formPesquisa > fieldset > legend .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
}

#formPesquisa > fieldset > legend :is(.fa-cog, .glyphicon-cog) {
  font-size: 22px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

#formPesquisa > fieldset > legend :is(.fa-cog, .glyphicon-cog):before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e8b8" !important;
}

:is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid).btn-novo {
  font-size: 0 !important;
}

#formPesquisa > fieldset > legend .btn :is(.glyphicon-plus, .fa-plus),
#formPesquisa .glyphicon-calendar,
#formPesquisa :is(.fa-caret-down, .fa-caret-up) {
  font-size: 17px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

/* os 3 botoes de acao do campo (+ / informacoes / copiar) sao bem menores que
   os icones de grid: 17px deixava o botao desproporcional. 14px casa. */
:is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid) .fa-plus,
.btn-informacoes .glyphicon-info-sign,
.btn-copiar .fa-copy {
  font-size: 14px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

/* mesmo `&nbsp;<i/>&nbsp;` do botao "+": zerar para os tres terem a MESMA altura */
.btn-informacoes,
.btn-copiar {
  font-size: 0 !important;
}

.btn-informacoes .glyphicon-info-sign:before,
.btn-copiar .fa-copy:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
}

.btn-informacoes .glyphicon-info-sign:before { content: "\e88e" !important; }
/* escopado em .btn-copiar: `fa-copy` tambem e icone de MODULO no banco */
.btn-copiar .fa-copy:before { content: "\e14d" !important; }

/* ============================================================================
   2026-07-27 — Cabecalho de submodulo: botoes na MESMA altura
   ----------------------------------------------------------------------------
   Medido na tela: com icone h=29, sem icone h=24 — mesmo padding (6px 14px) e
   mesmo line-height (12px). A diferenca vinha do icone (17px) esticando a linha;
   quem nao tem icone ficava so com os 12px do texto.

   `line-height:17px` NAO resolveu (perde para regra mais especifica). Fixar
   `min-height` na altura dos que tem icone independe dessa disputa, e o
   inline-flex + align-items:center evita que o texto do botao sem icone fique
   colado no topo do botao esticado. `gap` substitui o respiro que os `&nbsp;`
   davam ao lado do icone.
   ============================================================================ */
[id^="sub-"] .panel-heading .btn {
  min-height: 29px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  box-sizing: border-box !important;
}

/* "+" da coluna Arquivo (grid do Historico) — ultimo glifo legado da fileira */
:is(.painel-interno, .submodulo) td .btn :is(.fa-plus, .glyphicon-plus) {
  font-size: 14px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

:is(.painel-interno, .submodulo) td .btn :is(.fa-plus, .glyphicon-plus):before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e145" !important;
}

/* ============================================================================
   2026-07-27 🐛 — Ficha "quebrava" (buracos no meio do formulario) abaixo de
   ~1727px de largura
   ----------------------------------------------------------------------------
   NAO era sujeira acumulada nem efeito dos ajustes de icone/rotulo: confirmado
   desligando as regras novas — o defeito continuava. E PRE-EXISTENTE.

   ESTRUTURA REAL (medida no DOM, nao deduzida do PHP): os campos NAO estao
   agrupados em `.row`. Sao ~69 `.form-group` SOLTOS dentro de `.panel-corpo`
   (display:block), cada um `col-md-*` com `float:left` — um float continuo.

   CAUSA: em float continuo, um item mais alto vira "degrau" e os seguintes nao
   conseguem subir, deixando buracos. O gatilho e a largura: abaixo de ~1727px
   as colunas estreitam e rotulos longos em coluna minuscula (ex.: "UF (Comarca)"
   em `col-md-1`) passam a ocupar DUAS linhas, esticando aquele form-group.
   Acima disso o rotulo cabe em 1 linha, as alturas se igualam e o defeito some
   — por isso parecia intermitente.

   FIX: `display:flex` + `flex-wrap` no container. Em flex o `float` e ignorado e
   cada linha quebra por conta propria, sem travar no vizinho mais alto.
   `align-items:flex-start` preserva a altura natural de cada campo.

   ⚠️ Escopado a `#formPesquisa`: `.panel-corpo` existe em outras telas.
   ⚠️ Afeta os ~69 campos de uma vez, inclusive os que so aparecem conforme o
   preenchimento (Nome/CPF/RG do Representante, CNJ) — validado rolando a ficha
   inteira e reduzindo a janela.
   ============================================================================ */
#formPesquisa .panel-corpo {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

#formPesquisa > fieldset > legend .btn :is(.glyphicon-plus, .fa-plus):before,
:is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid) .fa-plus:before,
#formPesquisa .glyphicon-calendar:before,
#formPesquisa .fa-caret-down:before,
#formPesquisa .fa-caret-up:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
}

#formPesquisa > fieldset > legend .btn :is(.glyphicon-plus, .fa-plus):before,
:is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid) .fa-plus:before { content: "\e145" !important; }
#formPesquisa .glyphicon-calendar:before { content: "\e935" !important; }
#formPesquisa .fa-caret-down:before { content: "\e5cf" !important; }
#formPesquisa .fa-caret-up:before { content: "\e5ce" !important; }

/* ============================================================================
   2026-07-27 — Coluna FAROL: rotulo textual -> circulo colorido
   ----------------------------------------------------------------------------
   A coluna repetia em texto ("Amarelo", "Verde", "Vermelho") a informacao que a
   COR DA LINHA ja passa — redundante e ocupando largura.

   Da p/ fazer 100% em CSS porque o markup carrega o valor semantico num
   atributo (formulario-class.php:3279):
       <td class="dropdownfarol" data-farol="warning">Amarelo</td>
   `data-farol` vem de `tabfarol.texto2` e so tem 3 valores: danger | success |
   warning (tabela conferida no banco).

   `font-size:0` em vez de esconder o texto: ele CONTINUA no DOM, entao leitor de
   tela segue lendo "Amarelo". `display:none` no conteudo apagaria essa
   informacao para quem depende disso.

   A ultima regra deixa a celula VAZIA quando nao ha farol — preserva a distincao
   entre "sem farol" e "com farol", que se perderia se a coluna fosse escondida.

   `box-shadow` interno da um contorno sutil p/ o circulo nao sumir quando a
   linha ja tem fundo da mesma cor (linha .warning com bolinha ambar, etc.).
   Classe propria do componente — nao vaza.
   ============================================================================ */
.dropdownfarol,
th#idtabfarol1 {
  text-align: center !important;
}

.dropdownfarol {
  font-size: 0 !important;
  white-space: nowrap;
}

.dropdownfarol::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.dropdownfarol[data-farol="danger"]::before { background: #C0392B; }
.dropdownfarol[data-farol="success"]::before { background: #3F9142; }
.dropdownfarol[data-farol="warning"]::before { background: #E5A020; }

/* sem farol definido -> celula vazia (nao desenha circulo) */
.dropdownfarol:not([data-farol="danger"]):not([data-farol="success"]):not([data-farol="warning"])::before {
  display: none;
}

/* ============================================================================
   2026-07-27 🐛 — Linha com destaque contextual PERDIA a cor em posicao IMPAR
   ----------------------------------------------------------------------------
   BUG PRE-EXISTENTE (nao veio do farol; o circulo so o tornou visivel, porque
   antes o texto "Vermelho"/"Amarelo" compensava a falta do fundo).

   CAUSA: a regra do ZEBRADO no theme-4-vars.css (~3042, replicada p/ os 3 temas)
       .theme-N .table-striped>tbody>tr:nth-child(odd)>td { background: ... !important }
   tem `.theme-N` a mais na especificidade, usa !important e o arquivo carrega
   DEPOIS do site.css (bloco-superior:137 vs :72). Resultado: vence as cores
   contextuais `.danger/.warning/.success` (site.css ~1616) em TODA linha impar.

   Nao era "so o vermelho": era POSICAO. No caso observado a linha danger era a
   3a (impar, cinza) e as warning/success caiam em posicoes pares — por isso
   pareciam funcionar.

   `body` na frente NAO e redundante: sem ele a regra EMPATA em especificidade
   com a do zebrado e perde, porque theme-4-vars carrega depois. Cores mantidas
   as do proprio site.css (padrao Bootstrap), sem inventar tom novo.

   Vale para TODAS as grids do sistema.
   ============================================================================ */
body:is(.theme-3, .theme-4, .theme-5) .table-striped > tbody > tr.danger > td,
body:is(.theme-3, .theme-4, .theme-5) .table-striped > tbody > tr.danger > th {
  background-color: #f2dede !important;
}

body:is(.theme-3, .theme-4, .theme-5) .table-striped > tbody > tr.warning > td,
body:is(.theme-3, .theme-4, .theme-5) .table-striped > tbody > tr.warning > th {
  background-color: #fcf8e3 !important;
}

body:is(.theme-3, .theme-4, .theme-5) .table-striped > tbody > tr.success > td,
body:is(.theme-3, .theme-4, .theme-5) .table-striped > tbody > tr.success > th {
  background-color: #dff0d8 !important;
}

/* ============================================================================
   2026-07-27 — Icones de ACAO dos botoes -> biblioteca (tela de publicacoes e
   demais grids)
   ----------------------------------------------------------------------------
   Escopo `.btn` e o que torna isto seguro: `fa-gavel`, `fa-calendar`, `fa-money`
   etc. TAMBEM sao icone de MODULO (dado em `modulos.texto3`, 63 modulos). Dentro
   de um botao eles representam uma ACAO; no menu e nos atalhos, onde o icone e
   dado do cliente, nao estao em `.btn` e ficam INTACTOS.

   Codepoints conferidos no .woff2 antes de entrar (subset — codepoint ausente
   renderiza quadrado vazio).
   ============================================================================ */
.btn i.fa-plus,.btn span.fa-plus,.btn i.glyphicon-plus,.btn span.glyphicon-plus,.btn i.fa-eye,.btn span.fa-eye,.btn i.fa-eye-slash,.btn span.fa-eye-slash,.btn i.fa-external-link-square,.btn span.fa-external-link-square,.btn i.fa-info-circle,.btn span.fa-info-circle,.btn i.fa-link,.btn span.fa-link,.btn i.fa-chain-broken,.btn span.fa-chain-broken,.btn i.fa-list-ul,.btn span.fa-list-ul,.btn i.fa-search,.btn span.fa-search,.btn i.fa-upload,.btn span.fa-upload,.btn i.fa-home,.btn span.fa-home,.btn i.fa-question-circle-o,.btn span.fa-question-circle-o,.btn i.fa-briefcase,.btn span.fa-briefcase,.btn i.fa-circle-o-notch,.btn span.fa-circle-o-notch,.btn i.fa-magic,.btn span.fa-magic,.btn i.fa-gavel,.btn span.fa-gavel,.btn i.fa-calendar,.btn span.fa-calendar,.btn i.fa-trash,.btn span.fa-trash,.btn i.fa-trash-o,.btn span.fa-trash-o {
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

.btn i.fa-plus:before,.btn span.fa-plus:before,.btn i.glyphicon-plus:before,.btn span.glyphicon-plus:before,.btn i.fa-eye:before,.btn span.fa-eye:before,.btn i.fa-eye-slash:before,.btn span.fa-eye-slash:before,.btn i.fa-external-link-square:before,.btn span.fa-external-link-square:before,.btn i.fa-info-circle:before,.btn span.fa-info-circle:before,.btn i.fa-link:before,.btn span.fa-link:before,.btn i.fa-chain-broken:before,.btn span.fa-chain-broken:before,.btn i.fa-list-ul:before,.btn span.fa-list-ul:before,.btn i.fa-search:before,.btn span.fa-search:before,.btn i.fa-upload:before,.btn span.fa-upload:before,.btn i.fa-home:before,.btn span.fa-home:before,.btn i.fa-question-circle-o:before,.btn span.fa-question-circle-o:before,.btn i.fa-briefcase:before,.btn span.fa-briefcase:before,.btn i.fa-circle-o-notch:before,.btn span.fa-circle-o-notch:before,.btn i.fa-magic:before,.btn span.fa-magic:before,.btn i.fa-gavel:before,.btn span.fa-gavel:before,.btn i.fa-calendar:before,.btn span.fa-calendar:before,.btn i.fa-trash:before,.btn span.fa-trash:before,.btn i.fa-trash-o:before,.btn span.fa-trash-o:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
}

.btn i.fa-plus:before, .btn span.fa-plus:before { content: "\e145" !important; }  /* add */
.btn i.glyphicon-plus:before, .btn span.glyphicon-plus:before { content: "\e145" !important; }  /* add */
.btn i.fa-eye:before, .btn span.fa-eye:before { content: "\e8f4" !important; }  /* visibility */
.btn i.fa-eye-slash:before, .btn span.fa-eye-slash:before { content: "\e8f5" !important; }  /* visibility_off */
.btn i.fa-external-link-square:before, .btn span.fa-external-link-square:before { content: "\e89e" !important; }  /* open_in_new */
.btn i.fa-info-circle:before, .btn span.fa-info-circle:before { content: "\e88e" !important; }  /* info */
.btn i.fa-link:before, .btn span.fa-link:before { content: "\e157" !important; }  /* link */
.btn i.fa-chain-broken:before, .btn span.fa-chain-broken:before { content: "\e250" !important; }  /* link_off */
.btn i.fa-list-ul:before, .btn span.fa-list-ul:before { content: "\e896" !important; }  /* list */
.btn i.fa-search:before, .btn span.fa-search:before { content: "\e8b6" !important; }  /* search */
.btn i.fa-upload:before, .btn span.fa-upload:before { content: "\e2c6" !important; }  /* upload */
.btn i.fa-home:before, .btn span.fa-home:before { content: "\e88a" !important; }  /* home */
.btn i.fa-question-circle-o:before, .btn span.fa-question-circle-o:before { content: "\e8fd" !important; }  /* help */
.btn i.fa-briefcase:before, .btn span.fa-briefcase:before { content: "\e992" !important; }  /* cases */
.btn i.fa-circle-o-notch:before, .btn span.fa-circle-o-notch:before { content: "\e86a" !important; }  /* autorenew */
.btn i.fa-magic:before, .btn span.fa-magic:before { content: "\e663" !important; }  /* auto_fix */
.btn i.fa-gavel:before, .btn span.fa-gavel:before { content: "\e90e" !important; }  /* gavel */
.btn i.fa-calendar:before, .btn span.fa-calendar:before { content: "\e935" !important; }  /* calendar_month */
.btn i.fa-trash:before, .btn span.fa-trash:before { content: "\e92e" !important; }  /* delete */
.btn i.fa-trash-o:before, .btn span.fa-trash-o:before { content: "\e92e" !important; }  /* delete */

/* ⚠️ TAMANHO — precisa de ID no seletor. A regra
   `#tabelaresultado td .fa-search, ... {font-size:24px !important}` (site.css)
   usa um ID: especificidade (1,1,1) supera QUALQUER combinacao de classes, por
   mais !important que se ponha. Duas tentativas so com classes falharam.
   Aqui entra pelo mesmo ID + `.btn`, restringindo aos icones DENTRO de botao —
   os icones soltos na celula (alvo original daquela regra) seguem grandes. */
#tabelaresultado td .btn i[class*="fa-"],
#tabelaresultado td .btn span[class*="fa-"],
#tabelaresultado td .btn i[class*="glyphicon-"],
#tabelaresultado td .btn span[class*="glyphicon-"] {
  font-size: 16px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================================================
   2026-07-27 🐛 — Botao "+" ABSOLUTO cobrindo outro botao do mesmo form-group
   ----------------------------------------------------------------------------
   Sintoma (visto em pub/publicacoes): um retangulo "fantasma" sobre o
   "Limpar Filtros", como se houvesse um botao dentro do outro. NAO era markup —
   o `elementFromPoint` nao acusava nada porque so aponta o elemento do TOPO.

   CAUSA: `theme-4-vars.css:~1188` ancora o `.tabAuxiliarDinamica.btn-novo` em
   `position:absolute; top:0; right:15px` DENTRO do `.form-group`. Aquela regra
   foi escrita p/ form-group de CAMPO (label + input), onde o "+" acompanha o
   rotulo. Em form-group de BOTOES (sem label) ele cai justo sobre o vizinho que
   usa `pull-right`.

   FIX: desliga o absoluto so onde NAO ha label — o comportamento original segue
   valendo nos campos, que e o caso p/ o qual a regra existe.

   ⚠️ `body:is(.theme-*)` NAO e redundante: a regra do theme-4-vars soma
   `.theme-N` (0,4,0) e aquele arquivo carrega DEPOIS deste. Sem o `body`, esta
   regra fica em (0,3,1) e PERDE — testado, nao surtia efeito.

   Vale para qualquer form-group de botoes do sistema, nao so o de publicacoes.
   ============================================================================ */
body:is(.theme-3, .theme-4, .theme-5) .form-group:not(:has(> label)) > :is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid).btn-novo {
  position: static !important;
  float: none !important;
}

/* engrenagem do painel de configuracoes (UI). A `fa-cogs` do `.iconbox` NAO e
   tocada: aquela e icone de MODULO (dado do cliente em `modulos.texto3`). */
.link-painel .fa-cog {
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

.link-painel .fa-cog:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e8b8" !important;
}

/* ============================================================================
   2026-07-27 — Chevron dos paineis, TAG e Salvar dos modais
   ----------------------------------------------------------------------------
   1) CHEVRON de recolher/expandir (`painelhtml-class.php:206`, e o JS alterna
      caret-up/caret-down ao colapsar). Ja havia tratamento, mas escopado em
      `#formPesquisa` — modais e paineis fora dali ficavam com o glifo legado.
      Agora vale p/ `.panel-heading` / `.modal-header` / `.modal-title`.
      ⚠️ Alcance amplo: esse caret e o indicador de colapso de TODO painel.

   2) FONT-SIZE dos icones do `.btn-novo` — CORRECAO DE BUG INTRODUZIDO HOJE.
      O `font-size:0` no botao (que neutraliza os `&nbsp;` do markup) tinha o
      tamanho restaurado SO p/ `.fa-plus`; botao com outro icone (ex.: o de TAG,
      `glyphicon-tag`) ficava INVISIVEL. Agora restaura p/ QUALQUER icone filho.

   3) `glyphicon-tag` -> `sell` (etiqueta): o botao cadastra TAG de publicacao
      (`data-origem="_field_idtabauxtagpublicacoes1"`).

   4) `glyphicon-save` do Salvar dos modais -> `save`.
      ⚠️ O seletor NAO pode ser `.btn .glyphicon-save`: o icone e um <span>
      IRMAO do botao (padrao `.btn-pesquisa`), nao filho — foi assim que a
      1a tentativa falhou. E o botao e um `<input type="submit">`, que NAO aceita
      `::before`; a solucao usada no "Clonar" nao serviria aqui. Aqui o padrao
      original funciona porque este `.btn-pesquisa` NAO tem `padding-left` inline.
   ============================================================================ */
:is(.panel-heading, .modal-header, .modal-title) :is(.fa-caret-up, .fa-caret-down) {
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

:is(.panel-heading, .modal-header, .modal-title) .fa-caret-up:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e5ce" !important;
}

:is(.panel-heading, .modal-header, .modal-title) .fa-caret-down:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e5cf" !important;
}

:is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid).btn-novo > [class*="glyphicon-"],
:is(.tabAuxiliarDinamica, .tabAuxiliarDinamicaGrid).btn-novo > [class*="fa-"] {
  font-size: 14px !important;
  line-height: 1 !important;
}

.btn .glyphicon-tag:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\f05b" !important;
}

.btn-pesquisa > .glyphicon-save {
  font-size: 16px !important;
}

.btn-pesquisa > .glyphicon-save:before {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: var(--ms-axes) !important;
  font-weight: 400 !important;
  content: "\e161" !important;
}

/* Contador "Caracteres utilizados: N" do textarea (montaCampoMemo): estava do
   mesmo tamanho do texto normal, competindo com o label do campo — reduz e
   usa cor secundaria (cinza) pra ficar claramente uma informacao auxiliar. */
.quantidade-caracteres-campo-memo,
span:has(+ .quantidade-caracteres-campo-memo) {
  font-size: 12px;
  color: var(--t4-text-muted, #8a94a6);
}

/* Label truncado conforme a largura do campo (nao do form-group, que varia
   demais entre templates legados): a largura maxima e a do proprio input/
   select, medida em runtime por layout.js (ajustarLargurasLabelTruncavel),
   evitando o label empurrar o campo pra baixo ou vazar pra cima do vizinho.
   Hover mostra o nome completo via title nativo (sem cursor de "?": e so uma
   dica, nao uma ajuda). Clique expande pra quebra de linha normal. */
.label-truncavel {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  cursor: default;
}

.label-truncavel.label-truncavel--expandido {
  white-space: normal;
  overflow: visible;
  max-width: none !important;
}

/* Upload de arquivo múltiplo (montaCampoArquivoMultiplo, util/input-class.php):
   os botões e a barra de progresso não tinham layout nenhum, só empilhavam no
   fluxo normal do HTML — em coluna estreita (ex.: col-md-3) o botão "Selecionar
   arquivo..." e o de download quebravam de forma feia, um embaixo do outro.
   flex-wrap deixa os botões lado a lado quando cabe e quebra limpo quando não
   cabe; progresso e lista de arquivos sempre ocupam a linha inteira embaixo. */
.file-upload-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.file-upload-container > div {
  flex-basis: 100%;
  margin: 0;
}

.file-upload-container .progress-container {
  padding-left: 0;
  padding-right: 0;
}

.file-upload-container .files-container {
  width: 100%;
}