@media (max-width: 767px) {
  /* Para o cont��iner pai da tabela */
  .ui-datatable {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    position: relative;
  }

  /* Para o cont��iner imediato da tabela */
  .ui-datatable-tablewrapper,
  .ui-treetable.ui-widget{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
  
  /* Para a tabela em si */
  .ui-datatable-tablewrapper table {
    width: 100%;
   /* table-layout: fixed;*/
  }
  
  /* Para c��lulas da tabela */
  .ui-datatable-tablewrapper td, 
  .ui-datatable-tablewrapper th {
    word-break: break-word;
  }

}


.avisos-permanentes .alert {
	margin-bottom: 2px;
}

span.input-block-level  {
	white-space: nowrap ;
}
 
 
span button.ui-datepicker-trigger {
	border-radius: 2px;
    margin-left: -34px;
    height: 30px;
    border: 0 !important;
    background-color: var(--surface-color);
}
span button.ui-datepicker-trigger:hover {
	 background-color: var(--bg-color);
}

span.ui-autocomplete button.ui-button.ui-button-icon-only {
	border-radius: 2px;
    margin-left: -33px;
    height: 30px;
    border: none;
    background-color: transparent;
}
span.ui-autocomplete button.ui-button.ui-button-icon-only:hover {
	background-color: var(--border-color, rgba(0, 0, 0, 0.12));
}

span.input-block-level.ui-autocomplete input.ui-inputfield  {
	width: 100%;
}

div.ui-selectonemenu {
	height: 36px;
}


div.ui-selectonemenu label {
	padding-top: 8px;
}

div.ui-selectonemenu div.ui-selectonemenu-trigger.ui-corner-right {
	border: none;
	padding-top: 3px;
}

.ui-selectonemenu-panel .ui-selectonemenu-table td {
	border: 1px solid transparent;
	padding-top: 6px;
	padding-bottom: 6px;
}

.master-container-messages {
	position: fixed;
    top: calc( var(--appbar-height) );
    z-index: 5000;
    padding: 0 24px 0 24px;
}
@media (min-width: 992px) {
    .mui-drawer-open .master-container-messages {
    	margin-left: var(--drawer-width);
    }
}
@media (max-width: 991px) {
    .master-container-messages {
    	padding: 0 10px 0 10px;
    	transition: all 0.3s ease; 
    }
}
 
 
 .my-nav-tabs > li a.active {
	/* color: white; */
	/* background-color: #F1F1F1; */
	/* background-color: #7096AB; */
	color: var(--text-primary);
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
	background-color: var(--surface-color);
	opacity: 1;
}

ul.my-nav-tabs{
	border-bottom: 1px solid var(--border-color);
}

.my-nav-tabs > li a{
	color: var(--text-secondary); 
	background-color: var(--surface-color);
	
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}

.my-nav-tabs > li a:not(.active):HOVER {
	color: var(--text-primary);
}
 
 
 .ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid var(--border-color);
	background-color: var(--bg-color);
	color: var(--text-secondary);
}
 
 
form INPUT[type="text"],
form INPUT[type="password"],
form textarea,
form SELECT, 
input.ui-state-default {
	background-color: var(--surface-color);
	color:  var(--text-primary);
}

.well, .tipo-entidade {
	background: var(--bg-color);
	color:  var(--text-primary);
	border-color: var(--border-color);
    border-radius: var(--border-radius);
}


.ui-tabs .ui-tabs-nav li {
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}

.ui-tabs .ui-tabs-nav li a
 {
	/*border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    */
    color: var(--text-secondary);
}

.ui-state-default a, 
.ui-state-default a:link,
.ui-state-default a:visited {
	color: var(--text-secondary);
  	background-color: var(--bg-color);
  	border-radius: var(--border-radius);
}

.ui-state-active a,
.ui-state-active a:link {
	background-color: var(--on-primary);
    color: var(--text-primary);
    font-weight: 500;
}
.ui-widget-header .ui-state-active a {
	color: var(--text-primary);
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
	background-color: var(--surface-color);
	
}

/* Sobrescrever jQuery UI para seguir o tema Material UI */
.ui-widget-content {
  background: var(--surface-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

.ui-widget-header {
  background: var(--surface-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: var(--surface-color);
  color: var(--text-primary);
 /* border: var(--border-color); */
}

.ui-inputfield.ui-state-default{
	 border: 1px solid var(--border-color);
}

button.ui-state-default{
  background: var(--on-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}


.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

button.ui-state-hover{
  background: var(--bg-color);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active { 
  color: var(--text-color); 
  background-color: var(--bg-color);
  border-color: var(--border-color);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: var(--primary-color);
  color: var(--on-primary);
  border-color: var(--primary-color-hover);
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  background: var(--error-color);
  color: var(--on-primary);
  border-color: var(--error-color);
}

/* Remover imagens de fundo */
.ui-widget-content,
.ui-widget-header,
.ui-state-default,
.ui-state-hover,
.ui-state-active,
.ui-state-highlight,
.ui-state-error {
  background-image: none !important;
}

 
 /* Sobrescrever Bootstrap para seguir o tema Material UI */

.ui-widget-content a {
  color: var(--text-color);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  /*background-color: var(--text-color);*/
  text-shadow: none;
}
  
a.btn-danger, a.btn-warning {
  color: white;
}  
  
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
	background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-bottom-color: transparent;
    color: var(--text-primary);
}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
	background-color: var(--surface-color);
    color: var(--text-primary);
}
.nav-tabs > li > a{
	color: var(--text-secondary);
} 
.nav-tabs {
	border-bottom: 1px solid var(--border-color);
}

.nav-tabs > li > a:hover, 
.nav-tabs > li > a:focus {
	border-color: var(--border-color);
}

.table th, .table td {
	border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .ui-widget-header .ui-icon,
[data-theme="dark"] .ui-state-default .ui-icon {
    background-image: url(../../images/componet/ui-icons_ffffff_256x240.png);
}

.ui-widget-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000 !important;
}

/* --- Estilo Material UI para PrimeFaces p:growl --- */

/* 1. Container principal do Growl (posicionamento na tela) */
/* Por padr��o, o growl fica no canto superior direito. Vamos mov��-lo para baixo. */
.ui-growl {
    top: auto; /* Remove o posicionamento padr��o no topo */
    bottom: 20px; /* Posiciona a 20px da base da tela */
    left: 20px;   /* Posiciona a 20px da esquerda */
    right: auto;  /* Remove o posicionamento padr��o �� direita */
}

/* 2. A "caixa" de cada mensagem individual */
/* Esta �� a parte mais importante, onde aplicamos o visual Material. */
.ui-growl-item-container.ui-shadow {
    background-color: #323232; /* Cor de fundo escura, padr��o do Material */
    color: #f1f1f1;             /* Cor do texto clara */
    opacity: 1;                 /* Garante opacidade total */
    border: none;               /* Remove a borda padr��o do PrimeFaces */
    border-radius: 4px;         /* Cantos levemente arredondados */
    /* Sombra de eleva����o padr��o do Material Design (elevation dp=6) */
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 
                0 6px 10px 0 rgba(0,0,0,.14), 
                0 1px 18px 0 rgba(0,0,0,.12);
}

/* 3. Container do ��cone e do texto */
.ui-growl-item {
    display: flex; /* Usa flexbox para alinhar ��cone e texto facilmente */
    align-items: center; /* Alinha verticalmente ao centro */
    padding: 14px 16px; /* Padding interno */
}

/* 4. ��cone de severidade (�� esquerda) */
.ui-growl-image {
    font-size: 24px; /* Tamanho do ��cone */
    margin-right: 16px; /* Espa��amento entre o ��cone e o texto */
    padding: 0;
    width: 35px;
}

/* 5. Cores dos ��cones baseadas na severidade */
.ui-growl-info .ui-growl-image {
    color: #2196F3; /* Azul Material */
}
.ui-growl-warn .ui-growl-image {
    color: #FFC107; /* ��mbar Material */
}
.ui-growl-error .ui-growl-image,
.ui-growl-fatal .ui-growl-image {
    color: #F44336; /* Vermelho Material */
}

/* 6. Container do texto (t��tulo e detalhe) */
.ui-growl-message {
    padding: 0;
    width: 100%;
    font-family: Roboto, "Segoe UI", Arial, sans-serif; /* Fonte padr��o do Material */
}

/* 7. T��tulo da mensagem (Sum��rio) */
.ui-growl-title {
    font-weight: 500; /* Peso m��dio, mais destacado */
    display: block;   /* Garante que o detalhe v�� para a linha de baixo */
    margin-bottom: 3px;
    font-size: 1rem; /* 16px */
}

/* 8. Detalhe da mensagem */
.ui-growl-message p {
    font-weight: 400; /* Peso normal */
    font-size: 0.875rem; /* 14px */
    margin: 0;
    opacity: 0.9;
}

/* 9. Bot��o de fechar (X) */
.ui-growl-icon-close {
    color: #ffffff;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.ui-growl-icon-close {
    opacity: 1;
}

/* Remove o controle fixo do PrimeFaces */
.ui-datagrid .ui-datagrid-column {
  float: none !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
}

/* Define o tamanho m��nimo e m��ximo de cada ���coluna��� */
.responsive-grid .ui-datagrid-column {
  width: 250px;
  margin: 0.5rem;
}

/* Quebra conforme a tela */
.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}