@charset "UTF-8";
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');

/* ============================================================================
   MURY.CSS - MODO DE TESTE SGC / PROTÓTIPO NOVO

   OBJETIVO
   - Manter ativo somente o bloco relacionado ao SGC / protótipo novo.
   - Manter todo o CSS anterior presente no arquivo, porém comentado/desativado.
   - Nenhuma regra foi excluída.
   - Esta versão é destinada exclusivamente a teste de dependências visuais.

   IMPORTANTE
   O conteúdo legado abaixo foi comentado linha a linha para evitar execução.
   O bloco SGC/protótipo permanece ativo a partir da seção:
   "SHELL DO PORTAL - menu lateral + topbar".
   ============================================================================ */


/* ============================================================================
   CSS LEGADO / NÃO-SGC - DESATIVADO PARA TESTE
   ============================================================================ */

/* /* */
/* To change this license header, choose License Headers in Project Properties. */
/* To change this template file, choose Tools | Templates */
/* and open the template in the editor. */
/* * / */
/* /* */
/*     Created on : 08/09/2020, 10:33:17 */
/*     Author     : micro-91 */
/* * / */
/* /*--debugTD: outset;* / */
/* /*--debugTABLE: dashed;* / */
/* /*--debugTDTABLE: dotted;* / */
/* /*--debugIMG: solid;* / */
/* /* Para implementar acessibilidade: setar de "none" para "block" * / */
/* /* NÃO MEXER: Exibe mensagem de navegador incompatível * / */
/* /* CORES PADRÃO * / */
/* /* */
/*     Para Microsoft Edge, transparência só funciona utilizando o método rgba. */
/*     Por exemplo, em vez de utilizar #0000 ou #00000000, utilizar rgba(0, 0, 0, 0). */
/*  */
/*     #0E4B715C -> rgba(14, 75, 113, 0.36) */
/*  */
/*     Isso só é necessário em cores com transparência. Cores opacas funcionam normalmente. */
/*  */
/*     Adendo: Edge não gosta do "hsl". Todos precisam ser "hsla"... */
/*  */
/*     Para facilitar a conversão, utilizar o editor de cores do Inspetor de Elementos do Chrome. */
/* * / */
/* /* */
/*     FORMATO PADRÃO DE TEXTO */
/* * / */
/* /* LIGHTER * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 100; */
/*     src: url("/resources/fonts/MyriadPro-Cond.otf") format("opentype"); */
/* } */
/* /* LIGHTER ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 100; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-CondIt.otf") format("opentype"); */
/* } */
/* /* LIGHTER * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 200; */
/*     src: url("/resources/fonts/MyriadPro-Cond.otf") format("opentype"); */
/* } */
/* /* LIGHTER ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 200; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-CondIt.otf") format("opentype"); */
/* } */
/* /* LIGHTER * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 300; */
/*     src: url("/resources/fonts/MyriadPro-Cond.otf") format("opentype"); */
/* } */
/* /* LIGHTER ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 300; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-CondIt.otf") format("opentype"); */
/* } */
/* /* REGULAR * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 400; */
/*     src: url("/resources/fonts/MyriadPro-Regular.otf") format("opentype"); */
/* } */
/* /* REGULAR ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 400; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-It.otf") format("opentype"); */
/* } */
/* /* BOLDER * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 500; */
/*     src: url("/resources/fonts/MyriadPro-Semibold.otf") format("opentype"); */
/* } */
/* /* BOLDER ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 500; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-SemiboldIt.otf") format("opentype"); */
/* } */
/* /* BOLDER * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 600; */
/*     src: url("/resources/fonts/MyriadPro-Semibold.otf") format("opentype"); */
/* } */
/* /* BOLDER ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 600; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-SemiboldIt.otf") format("opentype"); */
/* } */
/* /* BOLD * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 700; */
/*     src: url("/resources/fonts/MyriadPro-Bold.otf") format("opentype"); */
/* } */
/* /* BOLD ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 700; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-BoldIt.otf") format("opentype"); */
/* } */
/* /* BOLD * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 800; */
/*     src: url("/resources/fonts/MyriadPro-Bold.otf") format("opentype"); */
/* } */
/* /* BOLD ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 800; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-BoldIt.otf") format("opentype"); */
/* } */
/* /* BOLD * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 900; */
/*     src: url("/resources/fonts/MyriadPro-Bold.otf") format("opentype"); */
/* } */
/* /* BOLD ITALIC * / */
/* @font-face { */
/*     font-family: "Myriad Pro"; */
/*     font-weight: 900; */
/*     font-style: italic; */
/*     src: url("/resources/fonts/MyriadPro-BoldIt.otf") format("opentype"); */
/* } */
/* .acessibilidade { */
/*     display: none !important; */
/* } */
/*  */
/* a.btnAltoContrastePerfil > span > i:before { */
/*     color: transparent; */
/*     text-shadow: transparent; */
/* } */
/*  */
/* a.btnCapitalizacaoPerfil > span > i:before { */
/*     color: transparent; */
/*     text-shadow: transparent; */
/* } */
/*  */
/* .displayNavegador { */
/*     display: none !important; */
/* } */
/*  */
/* .layout-wrapper.layout-topbar-bluegrey .layout-topbar.cabecalhoTeste { */
/*     background-color: #795528; */
/*     background-image: url(/wcard/resources/img/faixaAmarela.png); */
/*     background-repeat: repeat-x; */
/*     background-position-y: calc(100% + 24px); */
/* } */
/*  */
/* .layout-wrapper.layout-topbar-bluegrey .layout-topbar.cabecalhoPrincipal { */
/*     background-color: #113C67; */
/* } */
/*  */
/* /* */
/*     CLASSES PADRÃO */
/* * / */
/* .dica { */
/*     outline-style: dotted; */
/*     outline-width: 1px; */
/*     outline-color: #CCC; */
/* } */
/*  */
/* .painelAlertaCustomizado, */
/* .painelAlertaVermelho, */
/* .painelAlertaLaranja, */
/* .painelAlertaAmarelo, */
/* .painelAlertaVerde, */
/* .painelAlertaAzul { */
/*     width: 100%; */
/*     display: flex !important; */
/*     padding: 12px; */
/*     border: transparent; */
/* } */
/*  */
/* .painelAlertaCustomizado:before, */
/* .painelAlertaVermelho:before, */
/* .painelAlertaLaranja:before, */
/* .painelAlertaAmarelo:before, */
/* .painelAlertaVerde:before, */
/* .painelAlertaAzul:before { */
/*     font-size: 20px !important; */
/*     font-style: normal !important; */
/*     font-stretch: normal !important; */
/*     line-height: 1 !important; */
/*     font-family: "Font Awesome 5 Free", "FontAwesome" !important; */
/*     margin-left: 8px; */
/*     margin-right: 20px; */
/*     -webkit-font-smoothing: antialiased; */
/*     margin-top: auto; */
/*     margin-bottom: auto; */
/* } */
/*  */
/* .painelAlertaCustomizado { */
/*     background-color: antiquewhite; */
/*     color: brown; */
/* } */
/*  */
/* .painelAlertaCustomizado td { */
/*     white-space: normal; */
/*     font-family: "Arial", "Myriad Pro"; */
/*     font-weight: normal; */
/* } */
/*  */
/* .painelAlertaAmarelo { */
/*     background-color: #F1C957; */
/*     color: black; */
/* } */
/*  */
/* .painelAlertaAmarelo td { */
/*     white-space: normal; */
/* } */
/*  */
/* .painelAlertaLaranja { */
/*     background-color: #FFA957; */
/*     color: black; */
/* } */
/*  */
/* .painelAlertaLaranja td { */
/*     white-space: normal; */
/* } */
/*  */
/* .painelAlertaVerde { */
/*     background-color: #82D078; */
/*     color: black; */
/* } */
/*  */
/* .painelAlertaVerde td { */
/*     white-space: normal; */
/* } */
/*  */
/* .painelAlertaAzul { */
/*     background-color: #86CDF9; */
/*     color: black; */
/* } */
/*  */
/* .painelAlertaAzul td { */
/*     white-space: normal; */
/* } */
/*  */
/* .painelAlertaVermelho { */
/*     background-color: #CC2A2A; */
/* } */
/*  */
/* .painelAlertaVermelho, */
/* .painelAlertaVermelho td, */
/* .painelAlertaVermelho > tbody > tr > td > label, */
/* .painelAlertaVermelho > tbody > tr > td > label.ui-outputlabel.ui-widget { */
/*     color: white !important; */
/* } */
/*  */
/* .painelAlertaVermelho td { */
/*     white-space: normal; */
/* } */
/*  */
/* .painelAlertaVermelho:before { */
/*     font-weight: bold; */
/* } */
/*  */
/* /* */
/*     FUNDO DE TABELA */
/* * / */
/* .tabelaVermelho, */
/* .tabelaVermelho > .ui-panel-content, */
/* tr.tabelaVermelho.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaVermelho.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaVermelho.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #F7BABA !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaVermelho, */
/* tr.tabelaVermelho + tr.ui-datatable-summaryrow, */
/* tr.tabelaVermelho + tr.ui-expanded-row-content, */
/* tr.tabelaVermelho + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #F0ADAD !important; */
/* } */
/*  */
/* .tabelaLaranja, */
/* .tabelaLaranja > .ui-panel-content, */
/* tr.tabelaLaranja.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaLaranja.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaLaranja.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #FFDAC2 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaLaranja, */
/* tr.tabelaLaranja + tr.ui-datatable-summaryrow, */
/* tr.tabelaLaranja + tr.ui-expanded-row-content, */
/* tr.tabelaLaranja + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #FBCFB1 !important; */
/* } */
/*  */
/* .tabelaMarrom, */
/* .tabelaMarrom > .ui-panel-content, */
/* tr.tabelaMarrom.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaMarrom.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaMarrom.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #CAC4B3 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaMarrom, */
/* tr.tabelaMarrom + tr.ui-datatable-summaryrow, */
/* tr.tabelaMarrom + tr.ui-expanded-row-content, */
/* tr.tabelaMarrom + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #BDB7A5 !important; */
/* } */
/*  */
/* .tabelaAmarelo, */
/* .tabelaAmarelo > .ui-panel-content, */
/* tr.tabelaAmarelo.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaAmarelo.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaAmarelo.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #FFF1BD !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaAmarelo, */
/* tr.tabelaAmarelo + tr.ui-datatable-summaryrow, */
/* tr.tabelaAmarelo + tr.ui-expanded-row-content, */
/* tr.tabelaAmarelo + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #FCE99C !important; */
/* } */
/*  */
/* .tabelaVerde, */
/* .tabelaVerde > .ui-panel-content, */
/* tr.tabelaVerde.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaVerde.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaVerde.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #D7E6D5 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaVerde, */
/* tr.tabelaVerde + tr.ui-datatable-summaryrow, */
/* tr.tabelaVerde + tr.ui-expanded-row-content, */
/* tr.tabelaVerde + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #CAE0C7 !important; */
/* } */
/*  */
/* .tabelaAqua, */
/* .tabelaAqua > .ui-panel-content, */
/* tr.tabelaAqua.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaAqua.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaAqua.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #B2E4E4 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaAqua, */
/* tr.tabelaAqua + tr.ui-datatable-summaryrow, */
/* tr.tabelaAqua + tr.ui-expanded-row-content, */
/* tr.tabelaAqua + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #A2DADA !important; */
/* } */
/*  */
/* .tabelaAzul, */
/* .tabelaAzul > .ui-panel-content, */
/* tr.tabelaAzul.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaAzul.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaAzul.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #D9EDF7 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaAzul, */
/* tr.tabelaAzul + tr.ui-datatable-summaryrow, */
/* tr.tabelaAzul + tr.ui-expanded-row-content, */
/* tr.tabelaAzul + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #C5DBE7 !important; */
/* } */
/*  */
/* .tabelaBranco, */
/* .tabelaBranco > .ui-panel-content, */
/* tr.tabelaBranco.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaBranco.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaBranco.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #FFFFFF !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaBranco, */
/* tr.tabelaBranco + tr.ui-datatable-summaryrow, */
/* tr.tabelaBranco + tr.ui-expanded-row-content, */
/* tr.tabelaBranco + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #F7F7F7 !important; */
/* } */
/*  */
/* .tabelaCinza, */
/* .tabelaCinza > .ui-panel-content, */
/* tr.tabelaCinza.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaCinza.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaCinza.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #CBCDD0 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaCinza, */
/* tr.tabelaCinza + tr.ui-datatable-summaryrow, */
/* tr.tabelaCinza + tr.ui-expanded-row-content, */
/* tr.tabelaCinza + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #C2C4C7 !important; */
/* } */
/*  */
/* .tabelaPreto, */
/* .tabelaPreto > .ui-panel-content, */
/* tr.tabelaPreto.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaPreto.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaPreto.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #333333 !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaPreto, */
/* tr.tabelaPreto + tr.ui-datatable-summaryrow, */
/* tr.tabelaPreto + tr.ui-expanded-row-content, */
/* tr.tabelaPreto + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #000000 !important; */
/* } */
/*  */
/* .tabelaSelecao, */
/* .tabelaSelecao > .ui-panel-content, */
/* tr.tabelaSelecao.ui-datatable-even + tr.ui-datatable-summaryrow, */
/* tr.tabelaSelecao.ui-datatable-even + tr.ui-expanded-row-content, */
/* tr.tabelaSelecao.ui-datatable-even + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #B0E1FF !important; */
/* } */
/*  */
/* tr.ui-datatable-even.tabelaSelecao, */
/* tr.tabelaSelecao + tr.ui-datatable-summaryrow, */
/* tr.tabelaSelecao + tr.ui-expanded-row-content, */
/* tr.tabelaSelecao + tr.ui-expanded-row-content + tr.ui-datatable-summaryrow { */
/*     background-color: #99D0F1 !important; */
/* } */
/*  */
/* /* */
/*     MELHORIAS FONTAWESOME */
/* * / */
/* /* Ícone alternativo * / */
/* .fa-old:before { */
/*     font-family: "FontAwesome" !important; */
/* } */
/*  */
/* .fa-spacer-right-xl { */
/*     margin-right: 1.5em; */
/* } */
/*  */
/* .fa-spacer-left-xl { */
/*     margin-left: 1.5em; */
/* } */
/*  */
/* .fa-spacer-top-xl { */
/*     margin-top: 1.5em; */
/* } */
/*  */
/* .fa-spacer-bottom-xl { */
/*     margin-bottom: 1.5em; */
/* } */
/*  */
/* .fa-spacer-right-lg { */
/*     margin-right: 1.25em; */
/* } */
/*  */
/* .fa-spacer-left-lg { */
/*     margin-left: 1.25em; */
/* } */
/*  */
/* .fa-spacer-top-lg { */
/*     margin-top: 1.25em; */
/* } */
/*  */
/* .fa-spacer-bottom-lg { */
/*     margin-bottom: 1.25em; */
/* } */
/*  */
/* .fa-spacer-right { */
/*     margin-right: 1em; */
/* } */
/*  */
/* .fa-spacer-left { */
/*     margin-left: 1em; */
/* } */
/*  */
/* .fa-spacer-top { */
/*     margin-top: 1em; */
/* } */
/*  */
/* .fa-spacer-bottom { */
/*     margin-bottom: 1em; */
/* } */
/*  */
/* .fa-spacer-right-sm { */
/*     margin-right: 0.75em; */
/* } */
/*  */
/* .fa-spacer-left-sm { */
/*     margin-left: 0.75em; */
/* } */
/*  */
/* .fa-spacer-top-sm { */
/*     margin-top: 0.75em; */
/* } */
/*  */
/* .fa-spacer-bottom-sm { */
/*     margin-bottom: 0.75em; */
/* } */
/*  */
/* .fa-spacer-right-xs { */
/*     margin-right: 0.5em; */
/* } */
/*  */
/* .fa-spacer-left-xs { */
/*     margin-left: 0.5em; */
/* } */
/*  */
/* .fa-spacer-top-xs { */
/*     margin-top: 0.5em; */
/* } */
/*  */
/* .fa-spacer-bottom-xs { */
/*     margin-bottom: 0.5em; */
/* } */
/*  */
/* .fa-xs, .fa.fa-xs, */
/* .fa-sm, .fa.fa-sm, */
/* .fa-lg, .fa.fa-lg, */
/* .fa-xl, .fa.fa-xl { */
/*     line-height: 1em; */
/* } */
/*  */
/* .fa-xs:before { */
/*     font-size: 0.75em !important; */
/* } */
/*  */
/* .fa-sm:before { */
/*     font-size: 0.875em !important; */
/* } */
/*  */
/* .fa-lg:before { */
/*     font-size: 1.3333em !important; */
/* } */
/*  */
/* .fa-xl:before { */
/*     font-size: 2em !important; */
/* } */
/*  */
/* /* Rotações arbitrárias - incrementos de 15 * / */
/* .fa-rotate-15 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 1 / 6) ")"; */
/*     transform: rotate(15deg); */
/* } */
/*  */
/* .fa-rotate-30 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 2 / 6) ")"; */
/*     transform: rotate(30deg); */
/* } */
/*  */
/* .fa-rotate-45 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 3 / 6) ")"; */
/*     transform: rotate(45deg); */
/* } */
/*  */
/* .fa-rotate-60 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 4 / 6) ")"; */
/*     transform: rotate(60deg); */
/* } */
/*  */
/* .fa-rotate-75 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 5 / 6) ")"; */
/*     transform: rotate(75deg); */
/* } */
/*  */
/* .fa-rotate-105 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 7 / 6) ")"; */
/*     transform: rotate(105deg); */
/* } */
/*  */
/* .fa-rotate-120 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 8 / 6) ")"; */
/*     transform: rotate(120deg); */
/* } */
/*  */
/* .fa-rotate-135 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc( 9 / 6) ")"; */
/*     transform: rotate(135deg); */
/* } */
/*  */
/* .fa-rotate-150 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(10 / 6) ")"; */
/*     transform: rotate(150deg); */
/* } */
/*  */
/* .fa-rotate-165 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(11 / 6) ")"; */
/*     transform: rotate(165deg); */
/* } */
/*  */
/* .fa-rotate-195 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(13 / 6) ")"; */
/*     transform: rotate(195deg); */
/* } */
/*  */
/* .fa-rotate-210 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(14 / 6) ")"; */
/*     transform: rotate(210deg); */
/* } */
/*  */
/* .fa-rotate-225 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(15 / 6) ")"; */
/*     transform: rotate(225deg); */
/* } */
/*  */
/* .fa-rotate-240 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(16 / 6) ")"; */
/*     transform: rotate(240deg); */
/* } */
/*  */
/* .fa-rotate-255 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(17 / 6) ")"; */
/*     transform: rotate(255deg); */
/* } */
/*  */
/* .fa-rotate-285 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(19 / 6) ")"; */
/*     transform: rotate(285deg); */
/* } */
/*  */
/* .fa-rotate-300 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(20 / 6) ")"; */
/*     transform: rotate(300deg); */
/* } */
/*  */
/* .fa-rotate-315 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(21 / 6) ")"; */
/*     transform: rotate(315deg); */
/* } */
/*  */
/* .fa-rotate-330 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(22 / 6) ")"; */
/*     transform: rotate(330deg); */
/* } */
/*  */
/* .fa-rotate-345 { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=" calc(23 / 6) ")"; */
/*     transform: rotate(345deg); */
/* } */
/*  */
/* .fa-spin-reverse { */
/*     animation: fa-spin-reverse 2s infinite linear; */
/* } */
/*  */
/* .fa-pulse-reverse { */
/*     animation: fa-spin-reverse 1s infinite steps(8); */
/* } */
/*  */
/* @keyframes fa-spin-reverse { */
/*     0% { */
/*         transform: rotate(0deg); */
/*     } */
/*     to { */
/*         transform: rotate(-1turn); */
/*     } */
/* } */
/* /* */
/*     ÍCONES DE CARACTERES */
/* * / */
/* .ch { */
/*     font-family: "Arial", "Myriad Pro"; */
/*     font-weight: bold; */
/* } */
/*  */
/* .ch-a:before, .ch-a-upper:before { */
/*     content: "A"; */
/* } */
/*  */
/* .ch-a-lower:before { */
/*     content: "a"; */
/* } */
/*  */
/* .ch-b:before, .ch-b-upper:before { */
/*     content: "B"; */
/* } */
/*  */
/* .ch-b-lower:before { */
/*     content: "b"; */
/* } */
/*  */
/* .ch-c:before, .ch-c-upper:before { */
/*     content: "C"; */
/* } */
/*  */
/* .ch-c-lower:before { */
/*     content: "c"; */
/* } */
/*  */
/* .ch-d:before, .ch-d-upper:before { */
/*     content: "D"; */
/* } */
/*  */
/* .ch-d-lower:before { */
/*     content: "d"; */
/* } */
/*  */
/* .ch-e:before, .ch-e-upper:before { */
/*     content: "E"; */
/* } */
/*  */
/* .ch-e-lower:before { */
/*     content: "e"; */
/* } */
/*  */
/* .ch-f:before, .ch-f-upper:before { */
/*     content: "F"; */
/* } */
/*  */
/* .ch-f-lower:before { */
/*     content: "f"; */
/* } */
/*  */
/* .ch-g:before, .ch-g-upper:before { */
/*     content: "G"; */
/* } */
/*  */
/* .ch-g-lower:before { */
/*     content: "g"; */
/* } */
/*  */
/* .ch-h:before, .ch-h-upper:before { */
/*     content: "H"; */
/* } */
/*  */
/* .ch-h-lower:before { */
/*     content: "h"; */
/* } */
/*  */
/* .ch-i:before, .ch-i-upper:before { */
/*     content: "I"; */
/* } */
/*  */
/* .ch-i-lower:before { */
/*     content: "i"; */
/* } */
/*  */
/* .ch-j:before, .ch-j-upper:before { */
/*     content: "J"; */
/* } */
/*  */
/* .ch-j-lower:before { */
/*     content: "j"; */
/* } */
/*  */
/* .ch-k:before, .ch-k-upper:before { */
/*     content: "K"; */
/* } */
/*  */
/* .ch-k-lower:before { */
/*     content: "k"; */
/* } */
/*  */
/* .ch-l:before, .ch-l-upper:before { */
/*     content: "L"; */
/* } */
/*  */
/* .ch-l-lower:before { */
/*     content: "l"; */
/* } */
/*  */
/* .ch-m:before, .ch-m-upper:before { */
/*     content: "M"; */
/* } */
/*  */
/* .ch-m-lower:before { */
/*     content: "m"; */
/* } */
/*  */
/* .ch-n:before, .ch-n-upper:before { */
/*     content: "N"; */
/* } */
/*  */
/* .ch-n-lower:before { */
/*     content: "n"; */
/* } */
/*  */
/* .ch-o:before, .ch-o-upper:before { */
/*     content: "O"; */
/* } */
/*  */
/* .ch-o-lower:before { */
/*     content: "o"; */
/* } */
/*  */
/* .ch-p:before, .ch-p-upper:before { */
/*     content: "P"; */
/* } */
/*  */
/* .ch-p-lower:before { */
/*     content: "p"; */
/* } */
/*  */
/* .ch-q:before, .ch-q-upper:before { */
/*     content: "Q"; */
/* } */
/*  */
/* .ch-q-lower:before { */
/*     content: "q"; */
/* } */
/*  */
/* .ch-r:before, .ch-r-upper:before { */
/*     content: "R"; */
/* } */
/*  */
/* .ch-r-lower:before { */
/*     content: "r"; */
/* } */
/*  */
/* .ch-s:before, .ch-s-upper:before { */
/*     content: "S"; */
/* } */
/*  */
/* .ch-s-lower:before { */
/*     content: "s"; */
/* } */
/*  */
/* .ch-t:before, .ch-t-upper:before { */
/*     content: "T"; */
/* } */
/*  */
/* .ch-t-lower:before { */
/*     content: "t"; */
/* } */
/*  */
/* .ch-u:before, .ch-u-upper:before { */
/*     content: "U"; */
/* } */
/*  */
/* .ch-u-lower:before { */
/*     content: "u"; */
/* } */
/*  */
/* .ch-v:before, .ch-v-upper:before { */
/*     content: "V"; */
/* } */
/*  */
/* .ch-v-lower:before { */
/*     content: "v"; */
/* } */
/*  */
/* .ch-w:before, .ch-w-upper:before { */
/*     content: "W"; */
/* } */
/*  */
/* .ch-w-lower:before { */
/*     content: "w"; */
/* } */
/*  */
/* .ch-x:before, .ch-x-upper:before { */
/*     content: "X"; */
/* } */
/*  */
/* .ch-x-lower:before { */
/*     content: "x"; */
/* } */
/*  */
/* .ch-y:before, .ch-y-upper:before { */
/*     content: "Y"; */
/* } */
/*  */
/* .ch-y-lower:before { */
/*     content: "y"; */
/* } */
/*  */
/* .ch-z:before, .ch-z-upper:before { */
/*     content: "Z"; */
/* } */
/*  */
/* .ch-z-lower:before { */
/*     content: "z"; */
/* } */
/*  */
/* .ch-zero:before { */
/*     content: "0"; */
/* } */
/*  */
/* .ch-one:before, .ch-um:before { */
/*     content: "1"; */
/* } */
/*  */
/* .ch-two:before, .ch-dois:before { */
/*     content: "2"; */
/* } */
/*  */
/* .ch-three:before, .ch-tres:before { */
/*     content: "3"; */
/* } */
/*  */
/* .ch-four:before, .ch-quatro:before { */
/*     content: "4"; */
/* } */
/*  */
/* .ch-five:before, .ch-cinco:before { */
/*     content: "5"; */
/* } */
/*  */
/* .ch-six:before, .ch-seis:before { */
/*     content: "6"; */
/* } */
/*  */
/* .ch-seven:before, .ch-sete:before { */
/*     content: "7"; */
/* } */
/*  */
/* .ch-eight:before, .ch-oito:before { */
/*     content: "8"; */
/* } */
/*  */
/* .ch-nine:before, .ch-nove:before { */
/*     content: "9"; */
/* } */
/*  */
/* .ch-question:before, .ch-question-mark:before, .ch-interrogacao:before { */
/*     content: "?"; */
/* } */
/*  */
/* .ch-exclamation:before, .ch-exclamation-mark:before, .ch-exclamacao:before { */
/*     content: "!"; */
/* } */
/*  */
/* .ch-dash:before, .ch-hyphen:before, .ch-minus:before, .ch-traco:before, .ch-hifen:before, .ch-menos:before { */
/*     content: "-"; */
/* } */
/*  */
/* .ch-plus:before, .ch-mais:before { */
/*     content: "+"; */
/* } */
/*  */
/* /* H_TO-DO: mais caracteres * / */
/* /* */
/*     ÍCONES */
/* * / */
/* span[rendered=false], */
/* hr[rendered=false], */
/* vr[rendered=false], */
/* div[rendered=false] { */
/*     display: none !important; */
/* } */
/*  */
/* .iconeCustomizado, .iconeInformacao, .iconeAvisoAmarelo, .iconeAvisoVermelho, */
/* .iconeErro, .iconeDica, .iconeObservacao, */
/* .iconeTagVermelho, .iconeTagLaranja, .iconeTagMarrom, */
/* .iconeTagAmarelo, .iconeTagVerde, .iconeTagAqua, */
/* .iconeTagAzul, .iconeTagBranco, .iconeTagCinza, */
/* .iconeTagPreto, */
/* .iconeCheckVermelho, .iconeCheckLaranja, .iconeCheckMarrom, */
/* .iconeCheckAmarelo, .iconeCheckVerde, .iconeCheckAqua, .iconeCheckAzul, */
/* .iconeCheckBranco, .iconeCheckCinza, .iconeCheckPreto, */
/* .iconeDoubleCheckVermelho, .iconeDoubleCheckLaranja, .iconeDoubleCheckMarrom, */
/* .iconeDoubleCheckAmarelo, .iconeDoubleCheckVerde, .iconeDoubleCheckAqua, */
/* .iconeDoubleCheckAzul, .iconeDoubleCheckBranco, .iconeDoubleCheckCinza, */
/* .iconeDoubleCheckPreto, */
/* .iconeCirculoVermelho, .iconeCirculoLaranja, */
/* .iconeCirculoMarrom, .iconeCirculoAmarelo, */
/* .iconeCirculoVerde, .iconeCirculoAqua, .iconeCirculoAzul, */
/* .iconeCirculoBranco, .iconeCirculoCinza, */
/* .iconeCirculoPreto { */
/*     display: inline-block; */
/*     font-weight: 900; */
/* } */
/*  */
/* .iconeCustomizado:not(.fa-old):before, .iconeInformacao:before, */
/* .iconeAvisoAmarelo:before, .iconeAvisoVermelho:before, */
/* .iconeErro:before, .iconeDica:before, .iconeObservacao:before, */
/* .iconeTagVermelho:before, .iconeTagLaranja:before, */
/* .iconeTagMarrom:before, .iconeTagAmarelo:before, */
/* .iconeTagVerde:before, .iconeTagAqua:before, .iconeTagAzul:before, */
/* .iconeTagBranco:before, .iconeTagCinza:before, */
/* .iconeTagPreto:before, */
/* .iconeCheckVermelho:before, .iconeCheckLaranja:before, .iconeCheckMarrom:before, */
/* .iconeCheckAmarelo:before, .iconeCheckVerde:before, .iconeCheckAqua:before, */
/* .iconeCheckAzul:before, .iconeCheckBranco:before, .iconeCheckCinza:before, */
/* .iconeCheckPreto:before, */
/* .iconeDoubleCheckVermelho:before, .iconeDoubleCheckLaranja:before, */
/* .iconeDoubleCheckMarrom:before, .iconeDoubleCheckAmarelo:before, */
/* .iconeDoubleCheckVerde:before, .iconeDoubleCheckAqua:before, */
/* .iconeDoubleCheckAzul:before, .iconeDoubleCheckBranco:before, */
/* .iconeDoubleCheckCinza:before, .iconeDoubleCheckPreto:before, */
/* .iconeCirculoVermelho:before, */
/* .iconeCirculoLaranja:before, .iconeCirculoMarrom:before, */
/* .iconeCirculoAmarelo:before, */
/* .iconeCirculoVerde:before, .iconeCirculoAqua:before, */
/* .iconeCirculoAzul:before, */
/* .iconeCirculoBranco:before, .iconeCirculoCinza:before, */
/* .iconeCirculoPreto:before { */
/*     font-size: 20px !important; */
/*     font-style: normal !important; */
/*     font-stretch: normal !important; */
/*     line-height: 1 !important; */
/*     font-family: "Font Awesome 5 Free", "FontAwesome" !important; */
/* } */
/*  */
/* .iconeCustomizado.fa-old:before { */
/*     font-size: 20px !important; */
/*     font-style: normal !important; */
/*     font-stretch: normal !important; */
/*     font-weight: bold; */
/*     line-height: 1 !important; */
/*     font-family: "FontAwesome" !important; */
/* } */
/*  */
/* .iconeCustomizado:hover:before { */
/*     filter: saturate(0.5) brightness(1.3) contrast(0.9) !important; */
/* } */
/*  */
/* .iconeInformacao:before { */
/*     content: ""; */
/*     /* Caractere de informação - .fa-info-circle  * / */
/*     color: #5E91C7; */
/* } */
/*  */
/* .iconeInformacao:hover:before { */
/*     color: #84C0FF; */
/* } */
/*  */
/* .iconeAvisoAmarelo:before { */
/*     content: ""; */
/*     /* Caractere de aviso - .fa-exclamation-triangle  * / */
/*     color: #DCA706; */
/* } */
/*  */
/* .iconeAvisoAmarelo:hover:before { */
/*     color: #F3B803; */
/* } */
/*  */
/* .iconeAvisoVermelho:before { */
/*     content: ""; */
/*     /* Caractere de aviso - .fa-exclamation-circle  * / */
/*     color: #CB1A1A; */
/* } */
/*  */
/* .iconeAvisoVermelho:hover:before { */
/*     color: #FF6565; */
/* } */
/*  */
/* .iconeErro:before { */
/*     content: ""; */
/*     /* Caractere de erro - .fa-times-circle  * / */
/*     color: #CB1A1A; */
/* } */
/*  */
/* .iconeErro:hover:before { */
/*     color: #FF6565; */
/* } */
/*  */
/* .iconeDica:before { */
/*     content: ""; */
/*     /* Caractere de dica - .fa-question-circle  * / */
/*     color: #5E91C7; */
/*     padding-left: 4px; */
/* } */
/*  */
/* .iconeDica:hover:before { */
/*     color: #84C0FF; */
/* } */
/*  */
/* .iconeObservacao:before { */
/*     content: ""; */
/*     /* Caractere de comentário - .fa-comments-o  * / */
/*     color: #7B6937; */
/* } */
/*  */
/* .iconeObservacao:hover:before { */
/*     color: #AB8F44; */
/* } */
/*  */
/* .iconeTagVermelho, .iconeTagLaranja, .iconeTagMarrom, */
/* .iconeTagAmarelo, .iconeTagVerde, .iconeTagAqua, */
/* .iconeTagAzul, .iconeTagBranco, .iconeTagCinza, .iconeTagPreto { */
/*     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; */
/*     transform: scaleX(-1); */
/* } */
/*  */
/* .iconeTagVermelho:before, .iconeCheckVermelho:before, */
/* .iconeDoubleCheckVermelho:before, .iconeCirculoVermelho:before, */
/* .iconeVermelho:before { */
/*     color: #CB1A1A; */
/* } */
/*  */
/* .iconeTagVermelho:hover:before, .iconeCheckVermelho:hover:before, */
/* .iconeDoubleCheckVermelho:hover:before, .iconeCirculoVermelho:hover:before, */
/* .iconeVermelho:hover:before { */
/*     color: #FF6565; */
/* } */
/*  */
/* .iconeTagLaranja:before, .iconeCheckLaranja:before, */
/* .iconeDoubleCheckLaranja:before, .iconeCirculoLaranja:before, */
/* .iconeLaranja:before { */
/*     color: #FE7E03; */
/* } */
/*  */
/* .iconeTagLaranja:hover:before, .iconeCheckLaranja:hover:before, */
/* .iconeDoubleCheckLaranja:hover:before, .iconeCirculoLaranja:hover:before, */
/* .iconeLaranja:hover:before { */
/*     color: #FF9F42; */
/* } */
/*  */
/* .iconeTagMarrom:before, .iconeCheckMarrom:before, */
/* .iconeDoubleCheckMarrom:before, .iconeCirculoMarrom:before, */
/* .iconeMarrom:before { */
/*     color: #7B6937; */
/* } */
/*  */
/* .iconeTagMarrom:hover:before, .iconeCheckMarrom:hover:before, */
/* .iconeDoubleCheckMarrom:hover:before, .iconeCirculoMarrom:hover:before, */
/* .iconeMarrom:hover:before { */
/*     color: #AB8F44; */
/* } */
/*  */
/* .iconeTagAmarelo:before, .iconeCheckAmarelo:before, */
/* .iconeDoubleCheckAmarelo:before, .iconeCirculoAmarelo:before, */
/* .iconeAmarelo:before { */
/*     color: #DCA706; */
/* } */
/*  */
/* .iconeTagAmarelo:hover:before, .iconeCheckAmarelo:hover:before, */
/* .iconeDoubleCheckAmarelo:hover:before, .iconeCirculoAmarelo:hover:before, */
/* .iconeAmarelo:hover:before { */
/*     color: #F3B803; */
/* } */
/*  */
/* .iconeTagVerde:before, .iconeCheckVerde:before, */
/* .iconeDoubleCheckVerde:before, .iconeCirculoVerde:before, */
/* .iconeVerde:before { */
/*     color: #2A971B; */
/* } */
/*  */
/* .iconeTagVerde:hover:before, .iconeCheckVerde:hover:before, */
/* .iconeDoubleCheckVerde:hover:before, .iconeCirculoVerde:hover:before, */
/* .iconeVerde:hover:before { */
/*     color: #60CE51; */
/* } */
/*  */
/* .iconeTagAqua:before, .iconeCheckAqua:before, */
/* .iconeDoubleCheckAqua:before, .iconeCirculoAqua:before, */
/* .iconeAqua:before { */
/*     color: #53C5C5; */
/* } */
/*  */
/* .iconeTagAqua:hover:before, .iconeCheckAqua:hover:before, */
/* .iconeDoubleCheckAqua:hover:before, .iconeCirculoAqua:hover:before, */
/* .iconeAqua:hover:before { */
/*     color: #70DEDE; */
/* } */
/*  */
/* .iconeTagAzul:before, .iconeCheckAzul:before, */
/* .iconeDoubleCheckAzul:before, .iconeCirculoAzul:before, */
/* .iconeAzul:before { */
/*     color: #5E91C7; */
/* } */
/*  */
/* .iconeTagAzul:hover:before, .iconeCheckAzul:hover:before, */
/* .iconeDoubleCheckAzul:hover:before, .iconeCirculoAzul:hover:before, */
/* .iconeAzul:hover:before { */
/*     color: #84C0FF; */
/* } */
/*  */
/* .iconeTagBranco:before, .iconeCheckBranco:before, */
/* .iconeDoubleCheckBranco:before, .iconeCirculoBranco:before, */
/* .iconeBranco:before { */
/*     color: #FFFFFF; */
/* } */
/*  */
/* .iconeTagBranco:hover:before, .iconeCheckBranco:hover:before, */
/* .iconeDoubleCheckBranco:hover:before, .iconeCirculoBranco:hover:before, */
/* .iconeBranco:hover:before { */
/*     color: #F5F5F5; */
/* } */
/*  */
/* .iconeTagCinza:before, .iconeCheckCinza:before, */
/* .iconeDoubleCheckCinza:before, .iconeCirculoCinza:before, */
/* .iconeCinza:before { */
/*     color: #96989A; */
/* } */
/*  */
/* .iconeTagCinza:hover:before, .iconeCheckCinza:hover:before, */
/* .iconeDoubleCheckCinza:hover:before, .iconeCirculoCinza:hover:before, */
/* .iconeCinza:hover:before { */
/*     color: #9CA4AC; */
/* } */
/*  */
/* .iconeTagPreto:before, .iconeCheckPreto:before, */
/* .iconeDoubleCheckPreto:before, .iconeCirculoPreto:before, */
/* .iconePreto:before { */
/*     color: #000000; */
/* } */
/*  */
/* .iconeTagPreto:hover:before, .iconeCheckPreto:hover:before, */
/* .iconeDoubleCheckPreto:hover:before, .iconeCirculoPreto:hover:before, */
/* .iconePreto:hover:before { */
/*     color: #444444; */
/* } */
/*  */
/* .iconeTagVermelho:before, .iconeTagLaranja:before, */
/* .iconeTagMarrom:before, .iconeTagAmarelo:before, */
/* .iconeTagVerde:before, .iconeTagAqua:before, */
/* .iconeTagAzul:before, .iconeTagBranco:before, */
/* .iconeTagCinza:before, .iconeTagPreto:before { */
/*     content: ""; */
/*     /* Caractere de tag - .fa-tag fa-flip-horizontal  * / */
/* } */
/*  */
/* .iconeCheckVermelho:before, .iconeCheckLaranja:before, */
/* .iconeCheckMarrom:before, .iconeCheckAmarelo:before, */
/* .iconeCheckVerde:before, .iconeCheckAqua:before, */
/* .iconeCheckAzul:before, .iconeCheckBranco:before, */
/* .iconeCheckCinza:before, .iconeCheckPreto:before { */
/*     content: ""; */
/*     /* Caractere de check - .fa-check  * / */
/* } */
/*  */
/* .iconeDoubleCheckVermelho:before, .iconeDoubleCheckLaranja:before, */
/* .iconeDoubleCheckMarrom:before, .iconeDoubleCheckAmarelo:before, */
/* .iconeDoubleCheckVerde:before, .iconeDoubleCheckAqua:before, */
/* .iconeDoubleCheckAzul:before, .iconeDoubleCheckBranco:before, */
/* .iconeDoubleCheckCinza:before, .iconeDoubleCheckPreto:before { */
/*     content: ""; */
/*     /* Caractere de double check - .fa-double-check  * / */
/* } */
/*  */
/* .iconeCirculoVermelho:before, .iconeCirculoLaranja:before, */
/* .iconeCirculoMarrom:before, .iconeCirculoAmarelo:before, */
/* .iconeCirculoVerde:before, .iconeCirculoAqua:before, */
/* .iconeCirculoAzul:before, .iconeCirculoBranco:before, */
/* .iconeCirculoCinza:before, .iconeCirculoPreto:before { */
/*     content: ""; */
/*     /* Caractere de círculo - .fa-circle  * / */
/* } */
/*  */
/* .contornoVermelho { */
/*     text-shadow: 0.7px 0.7px #f7baba, 1px 0px #f7baba, 0.7px -0.7px #f7baba, 0px -1px #f7baba, -0.7px -0.7px #f7baba, -1px 0px #f7baba, -0.7px 0.7px #f7baba, 0px 1px #f7baba; */
/* } */
/*  */
/* .contornoLaranja { */
/*     text-shadow: 0.7px 0.7px #FFDAC2, 1px 0px #FFDAC2, 0.7px -0.7px #FFDAC2, 0px -1px #FFDAC2, -0.7px -0.7px #FFDAC2, -1px 0px #FFDAC2, -0.7px 0.7px #FFDAC2, 0px 1px #FFDAC2; */
/* } */
/*  */
/* .contornoMarrom { */
/*     text-shadow: 0.7px 0.7px #cac4b3, 1px 0px #cac4b3, 0.7px -0.7px #cac4b3, 0px -1px #cac4b3, -0.7px -0.7px #cac4b3, -1px 0px #cac4b3, -0.7px 0.7px #cac4b3, 0px 1px #cac4b3; */
/* } */
/*  */
/* .contornoAmarelo { */
/*     text-shadow: 0.7px 0.7px #FFF1BD, 1px 0px #FFF1BD, 0.7px -0.7px #FFF1BD, 0px -1px #FFF1BD, -0.7px -0.7px #FFF1BD, -1px 0px #FFF1BD, -0.7px 0.7px #FFF1BD, 0px 1px #FFF1BD; */
/* } */
/*  */
/* .contornoVerde { */
/*     text-shadow: 0.7px 0.7px #d7e6d5, 1px 0px #d7e6d5, 0.7px -0.7px #d7e6d5, 0px -1px #d7e6d5, -0.7px -0.7px #d7e6d5, -1px 0px #d7e6d5, -0.7px 0.7px #d7e6d5, 0px 1px #d7e6d5; */
/* } */
/*  */
/* .contornoAqua { */
/*     text-shadow: 0.7px 0.7px #b2e4e4, 1px 0px #b2e4e4, 0.7px -0.7px #b2e4e4, 0px -1px #b2e4e4, -0.7px -0.7px #b2e4e4, -1px 0px #b2e4e4, -0.7px 0.7px #b2e4e4, 0px 1px #b2e4e4; */
/* } */
/*  */
/* .contornoAzul { */
/*     text-shadow: 0.7px 0.7px #d9edf7, 1px 0px #d9edf7, 0.7px -0.7px #d9edf7, 0px -1px #d9edf7, -0.7px -0.7px #d9edf7, -1px 0px #d9edf7, -0.7px 0.7px #d9edf7, 0px 1px #d9edf7; */
/* } */
/*  */
/* .contornoBranco { */
/*     text-shadow: 0.7px 0.7px #FFFFFF, 1px 0px #FFFFFF, 0.7px -0.7px #FFFFFF, 0px -1px #FFFFFF, -0.7px -0.7px #FFFFFF, -1px 0px #FFFFFF, -0.7px 0.7px #FFFFFF, 0px 1px #FFFFFF; */
/* } */
/*  */
/* .contornoCinza { */
/*     text-shadow: 0.7px 0.7px #cbcdd0, 1px 0px #cbcdd0, 0.7px -0.7px #cbcdd0, 0px -1px #cbcdd0, -0.7px -0.7px #cbcdd0, -1px 0px #cbcdd0, -0.7px 0.7px #cbcdd0, 0px 1px #cbcdd0; */
/* } */
/*  */
/* .contornoPreto { */
/*     text-shadow: 0.7px 0.7px #000000, 1px 0px #000000, 0.7px -0.7px #000000, 0px -1px #000000, -0.7px -0.7px #000000, -1px 0px #000000, -0.7px 0.7px #000000, 0px 1px #000000; */
/* } */
/*  */
/* .textoVermelho { */
/*     color: #CB1A1A !important; */
/* } */
/*  */
/* .textoLaranja { */
/*     color: #FE7E03 !important; */
/* } */
/*  */
/* .textoMarrom { */
/*     color: #7B6937 !important; */
/* } */
/*  */
/* .textoAmarelo { */
/*     color: #DCA706 !important; */
/* } */
/*  */
/* .textoVerde { */
/*     color: #2A971B !important; */
/* } */
/*  */
/* .textoAqua { */
/*     color: #53C5C5 !important; */
/* } */
/*  */
/* .textoAzul { */
/*     color: #5E91C7 !important; */
/* } */
/*  */
/* .textoCinza { */
/*     color: #96989A !important; */
/* } */
/*  */
/* .textoPreto { */
/*     color: #000000 !important; */
/* } */
/*  */
/* .textoBranco { */
/*     color: #FFFFFF !important; */
/* } */
/*  */
/* .textoInvisivel { */
/*     color: rgba(0, 0, 0, 0) !important; */
/* } */
/*  */
/* /* */
/*     ÍCONE DE ITEM OBRIGATÓRIO */
/* * / */
/* :not(fieldset).obrigatorio:after, */
/* fieldset.obrigatorio > legend:after { */
/*     content: "*"; */
/*     font-size: 1.35em; */
/*     margin-left: 2px; */
/*     margin-right: 4px; */
/*     color: #B62B28; */
/* } */
/*  */
/* /* Linha divisória * / */
/* hr { */
/*     border-style: solid; */
/*     border-color: #1c526d; */
/*     margin: 1em 0px; */
/* } */
/*  */
/* td.vr, table.vr > tbody > tr > td, table.vr > tr > td { */
/*     height: 0px; */
/* } */
/*  */
/* vr { */
/*     display: table; */
/*     height: 100%; */
/*     width: 2px; */
/*     background-color: #1c526d; */
/*     margin: 0px 1em; */
/* } */
/*  */
/* .coluna0 { */
/*     width: 0%; */
/* } */
/*  */
/* .coluna5 { */
/*     width: 5%; */
/* } */
/*  */
/* .coluna10 { */
/*     width: 10%; */
/* } */
/*  */
/* .coluna15 { */
/*     width: 15%; */
/* } */
/*  */
/* .coluna20 { */
/*     width: 20%; */
/* } */
/*  */
/* .coluna25 { */
/*     width: 25%; */
/* } */
/*  */
/* .coluna30 { */
/*     width: 30%; */
/* } */
/*  */
/* .coluna35 { */
/*     width: 35%; */
/* } */
/*  */
/* .coluna40 { */
/*     width: 40%; */
/* } */
/*  */
/* .coluna45 { */
/*     width: 45%; */
/* } */
/*  */
/* .coluna50 { */
/*     width: 50%; */
/* } */
/*  */
/* .coluna55 { */
/*     width: 55%; */
/* } */
/*  */
/* .coluna60 { */
/*     width: 60%; */
/* } */
/*  */
/* .coluna65 { */
/*     width: 65%; */
/* } */
/*  */
/* .coluna70 { */
/*     width: 70%; */
/* } */
/*  */
/* .coluna75 { */
/*     width: 75%; */
/* } */
/*  */
/* .coluna80 { */
/*     width: 80%; */
/* } */
/*  */
/* .coluna85 { */
/*     width: 85%; */
/* } */
/*  */
/* .coluna90 { */
/*     width: 90%; */
/* } */
/*  */
/* .coluna95 { */
/*     width: 95%; */
/* } */
/*  */
/* .coluna100 { */
/*     width: 100%; */
/* } */
/*  */
/* /* */
/*     Não imprime topo e menu */
/* * / */
/* @media print { */
/*     .layout-topbar, .layout-menu-container, */
/*     .nao-imprime, .naoImprime, .nao-imprimir, .naoImprimir { */
/*         display: none !important; */
/*     } */
/*  */
/*     .somenteImprime, .somente-imprime, .somenteImprimir, .somente-imprimir, */
/*     .soImprime, .so-imprime, .soImprimir, .so-imprimir { */
/*         display: block !important; */
/*     } */
/*  */
/*     body { */
/*         background-color: white !important; */
/*     } */
/*  */
/*     .layout-wrapper .layout-main { */
/*         padding-top: 0px !important; */
/*     } */
/* } */
/* .somenteImprime, .somente-imprime, .somenteImprimir, .somente-imprimir, */
/* .soImprime, .so-imprime, .soImprimir, .so-imprimir { */
/*     display: none; */
/* } */
/*  */
/* .naoExibir, .nao-exibir, .naoExibe, .nao-exibe, */
/* .oculta, .oculto, .ocultar { */
/*     display: none !important; */
/* } */
/*  */
/* /* Debug gráfico * / */
/* td { */
/*     outline: 1px none #A22D2D; */
/*     outline-offset: -1px; */
/* } */
/*  */
/* td > * { */
/*     outline: 1px none #17BD17; */
/*     outline-offset: -1px; */
/* } */
/*  */
/* tbody, div, table { */
/*     outline: 1px none #2929D4; */
/*     outline-offset: -1px; */
/* } */
/*  */
/* td > table, td > div { */
/*     outline: 1px none #AB2CAB; */
/*     outline-offset: -1px; */
/* } */
/*  */
/* img, span.fa, span.ui-icon, svg { */
/*     outline: 2px none #36B2C5; */
/*     outline-offset: -1px; */
/* } */
/*  */
/* /*Cabecalho de tabela* / */
/* .ui-datatable thead th { */
/*     background-color: #1c526d !important; */
/*     color: #FFFFFF !important; */
/* } */
/*  */
/* .ui-datatable thead th.ui-state-hover { */
/*     background-color: #186f9a !important; */
/* } */
/*  */
/* .ui-datatable thead th.ui-state-active { */
/*     color: #FFFFFF !important; */
/* } */
/*  */
/* .ui-datatable-frozenlayout-left td { */
/*     min-height: 28px !important; */
/*     height: 28px !important; */
/* } */
/*  */
/* .ui-datatable-frozenlayout-right td { */
/*     min-height: 28px !important; */
/*     height: 28px !important; */
/* } */
/*  */
/* body .ui-datatable .ui-datatable-data > tr.ui-state-highlight { */
/*     /*background: none !important;* / */
/*     /*color: $laranjaSelecaoTexto;* / */
/*     box-shadow: inset 0 0 8px 4px #fe7f01; */
/* } */
/*  */
/* body .ui-datatable .ui-datatable-data > tr.ui-state-highlight:not(.tabelaSelecao) > td > a { */
/*     color: #4b3d2f; */
/* } */
/*  */
/* body .ui-datatable .ui-datatable-data > tr.ui-state-hover { */
/*     /* #EAEAEA * / */
/*     background-color: #e3e6e8; */
/* } */
/*  */
/* /* Alinhamento de InputText * / */
/* span[style*="text-align: right"] > input, */
/* span[style*="text-align:right"] > input { */
/*     text-align: right; */
/* } */
/*  */
/* .ui-inputnumber input { */
/*     text-align: right; */
/* } */
/*  */
/* /* Ícone de link externo * / */
/* .ui-link.linkExterno:after, */
/* .ui-commandlink.linkExterno:after, */
/* .ui-menuitem-link.linkExterno > span:after { */
/*     content: ""; */
/*     font-family: "Font Awesome 5 Free"; */
/*     font-weight: 900; */
/*     font-size: 0.75em; */
/*     vertical-align: super; */
/*     margin-left: 0.25em; */
/* } */
/*  */
/* /* Largura de barra de pesquisa em SelectOneMenu * / */
/* .ui-selectonemenu-panel .ui-selectonemenu-filter-container { */
/*     width: 100%; */
/* } */
/*  */
/* /* Borda de botão colorido * / */
/* body .ui-button[style*=background], */
/* body .ui-button.botaoVermelho, */
/* body .ui-button.botaoLaranja, */
/* body .ui-button.botaoMarrom, */
/* body .ui-button.botaoAmarelo, */
/* body .ui-button.botaoVerde, */
/* body .ui-button.botaoAqua, */
/* body .ui-button.botaoAzul, */
/* body .ui-button.botaoCinza, */
/* body .ui-button.botaoBranco, */
/* body .ui-button.botaoPreto { */
/*     border: 1px solid #00000025; */
/* } */
/*  */
/* /* H_TO-DO: classes botões coloridos * / */
/* /* Borda de cabeçalho de painel colorido * / */
/* body .ui-panel[style*=background] > .ui-panel-titlebar, */
/* body .ui-panel.painelVermelho > .ui-panel-titlebar, */
/* body .ui-panel.painelLaranja > .ui-panel-titlebar, */
/* body .ui-panel.painelMarrom > .ui-panel-titlebar, */
/* body .ui-panel.painelAmarelo > .ui-panel-titlebar, */
/* body .ui-panel.painelVerde > .ui-panel-titlebar, */
/* body .ui-panel.painelAqua > .ui-panel-titlebar, */
/* body .ui-panel.painelAzul > .ui-panel-titlebar, */
/* body .ui-panel.painelCinza > .ui-panel-titlebar, */
/* body .ui-panel.painelBranco > .ui-panel-titlebar, */
/* body .ui-panel.painelPreto > .ui-panel-titlebar { */
/*     border: 1px solid #00000025; */
/* } */
/*  */
/* /* H_TO-DO: classes paineis coloridos * / */
/* /* */
/*     FILE UPLOAD */
/* * / */
/* /*.ui-fileupload .ui-state-disabled { */
/*     display: block !important; */
/* } */
/* .ui-fileupload-buttonbar { */
/*     display: flex !important;; */
/* }* / */
/* /* */
/*     ALINHA TOPO DATATABLE */
/* * / */
/* .alinhaTopo > tbody > tr > td, */
/* .alinhaTopo > div > table > tbody > tr > td, */
/* td.alinhaTopo, */
/* .alinhaTopo > tr > td { */
/*     vertical-align: top; */
/* } */
/*  */
/* .alinhaFundo > tbody > tr > td, */
/* .alinhaFundo > div > table > tbody > tr > td, */
/* td.alinhaFundo, */
/* .alinhaFundo > tr > td { */
/*     vertical-align: bottom; */
/* } */
/*  */
/* /* H_TO-DO: criar classes/variáveis de cor de texto * / */
/* /* */
/*     TELA HOME */
/* * / */
/* .ocultaDesktop, .somenteMobile { */
/*     display: none !important; */
/* } */
/*  */
/* /*Padding reduzido, usado via columnClasses em painéis compactos (ex: bordero.xhtml)* / */
/* body .ui-panelgrid .ui-panelgrid-cell.painel-compacto-cell { */
/*     padding: 0.05em 0.4em !important; */
/* } */
/*  */
/* /* Painél panelGrid responsivo * / */
/* .panelResponsivo, */
/* .painelResponsivo { */
/*     display: inline-flex; */
/* } */
/*  */
/* /* */
/*     Controle de responsividade */
/*  */
/*     Gera classes tipo: */
/*         ".painel-50-100" (50% em desktop, 100% em mobile) */
/*         ".painel-25-75" (25% em desktop, 75% em mobile) */
/*         ".painel-100-0" (100% em desktop, 0% em mobile) */
/* * / */
/* .panel-0-0, .painel-0-0, .panel-0-5, .painel-0-5, .panel-0-10, .painel-0-10, .panel-0-15, .painel-0-15, .panel-0-20, .painel-0-20, .panel-0-25, .painel-0-25, .panel-0-30, .painel-0-30, .panel-0-35, .painel-0-35, .panel-0-40, .painel-0-40, .panel-0-45, .painel-0-45, .panel-0-50, .painel-0-50, .panel-0-55, .painel-0-55, .panel-0-60, .painel-0-60, .panel-0-65, .painel-0-65, .panel-0-70, .painel-0-70, .panel-0-75, .painel-0-75, .panel-0-80, .painel-0-80, .panel-0-85, .painel-0-85, .panel-0-90, .painel-0-90, .panel-0-95, .painel-0-95, .panel-0-100, .painel-0-100 { */
/*     width: 0% !important; */
/* } */
/*  */
/* .panel-5-0, .painel-5-0, .panel-5-5, .painel-5-5, .panel-5-10, .painel-5-10, .panel-5-15, .painel-5-15, .panel-5-20, .painel-5-20, .panel-5-25, .painel-5-25, .panel-5-30, .painel-5-30, .panel-5-35, .painel-5-35, .panel-5-40, .painel-5-40, .panel-5-45, .painel-5-45, .panel-5-50, .painel-5-50, .panel-5-55, .painel-5-55, .panel-5-60, .painel-5-60, .panel-5-65, .painel-5-65, .panel-5-70, .painel-5-70, .panel-5-75, .painel-5-75, .panel-5-80, .painel-5-80, .panel-5-85, .painel-5-85, .panel-5-90, .painel-5-90, .panel-5-95, .painel-5-95, .panel-5-100, .painel-5-100 { */
/*     width: 5% !important; */
/* } */
/*  */
/* .panel-10-0, .painel-10-0, .panel-10-5, .painel-10-5, .panel-10-10, .painel-10-10, .panel-10-15, .painel-10-15, .panel-10-20, .painel-10-20, .panel-10-25, .painel-10-25, .panel-10-30, .painel-10-30, .panel-10-35, .painel-10-35, .panel-10-40, .painel-10-40, .panel-10-45, .painel-10-45, .panel-10-50, .painel-10-50, .panel-10-55, .painel-10-55, .panel-10-60, .painel-10-60, .panel-10-65, .painel-10-65, .panel-10-70, .painel-10-70, .panel-10-75, .painel-10-75, .panel-10-80, .painel-10-80, .panel-10-85, .painel-10-85, .panel-10-90, .painel-10-90, .panel-10-95, .painel-10-95, .panel-10-100, .painel-10-100 { */
/*     width: 10% !important; */
/* } */
/*  */
/* .panel-15-0, .painel-15-0, .panel-15-5, .painel-15-5, .panel-15-10, .painel-15-10, .panel-15-15, .painel-15-15, .panel-15-20, .painel-15-20, .panel-15-25, .painel-15-25, .panel-15-30, .painel-15-30, .panel-15-35, .painel-15-35, .panel-15-40, .painel-15-40, .panel-15-45, .painel-15-45, .panel-15-50, .painel-15-50, .panel-15-55, .painel-15-55, .panel-15-60, .painel-15-60, .panel-15-65, .painel-15-65, .panel-15-70, .painel-15-70, .panel-15-75, .painel-15-75, .panel-15-80, .painel-15-80, .panel-15-85, .painel-15-85, .panel-15-90, .painel-15-90, .panel-15-95, .painel-15-95, .panel-15-100, .painel-15-100 { */
/*     width: 15% !important; */
/* } */
/*  */
/* .panel-20-0, .painel-20-0, .panel-20-5, .painel-20-5, .panel-20-10, .painel-20-10, .panel-20-15, .painel-20-15, .panel-20-20, .painel-20-20, .panel-20-25, .painel-20-25, .panel-20-30, .painel-20-30, .panel-20-35, .painel-20-35, .panel-20-40, .painel-20-40, .panel-20-45, .painel-20-45, .panel-20-50, .painel-20-50, .panel-20-55, .painel-20-55, .panel-20-60, .painel-20-60, .panel-20-65, .painel-20-65, .panel-20-70, .painel-20-70, .panel-20-75, .painel-20-75, .panel-20-80, .painel-20-80, .panel-20-85, .painel-20-85, .panel-20-90, .painel-20-90, .panel-20-95, .painel-20-95, .panel-20-100, .painel-20-100 { */
/*     width: 20% !important; */
/* } */
/*  */
/* .panel-25-0, .painel-25-0, .panel-25-5, .painel-25-5, .panel-25-10, .painel-25-10, .panel-25-15, .painel-25-15, .panel-25-20, .painel-25-20, .panel-25-25, .painel-25-25, .panel-25-30, .painel-25-30, .panel-25-35, .painel-25-35, .panel-25-40, .painel-25-40, .panel-25-45, .painel-25-45, .panel-25-50, .painel-25-50, .panel-25-55, .painel-25-55, .panel-25-60, .painel-25-60, .panel-25-65, .painel-25-65, .panel-25-70, .painel-25-70, .panel-25-75, .painel-25-75, .panel-25-80, .painel-25-80, .panel-25-85, .painel-25-85, .panel-25-90, .painel-25-90, .panel-25-95, .painel-25-95, .panel-25-100, .painel-25-100 { */
/*     width: 25% !important; */
/* } */
/*  */
/* .panel-30-0, .painel-30-0, .panel-30-5, .painel-30-5, .panel-30-10, .painel-30-10, .panel-30-15, .painel-30-15, .panel-30-20, .painel-30-20, .panel-30-25, .painel-30-25, .panel-30-30, .painel-30-30, .panel-30-35, .painel-30-35, .panel-30-40, .painel-30-40, .panel-30-45, .painel-30-45, .panel-30-50, .painel-30-50, .panel-30-55, .painel-30-55, .panel-30-60, .painel-30-60, .panel-30-65, .painel-30-65, .panel-30-70, .painel-30-70, .panel-30-75, .painel-30-75, .panel-30-80, .painel-30-80, .panel-30-85, .painel-30-85, .panel-30-90, .painel-30-90, .panel-30-95, .painel-30-95, .panel-30-100, .painel-30-100 { */
/*     width: 30% !important; */
/* } */
/*  */
/* .panel-35-0, .painel-35-0, .panel-35-5, .painel-35-5, .panel-35-10, .painel-35-10, .panel-35-15, .painel-35-15, .panel-35-20, .painel-35-20, .panel-35-25, .painel-35-25, .panel-35-30, .painel-35-30, .panel-35-35, .painel-35-35, .panel-35-40, .painel-35-40, .panel-35-45, .painel-35-45, .panel-35-50, .painel-35-50, .panel-35-55, .painel-35-55, .panel-35-60, .painel-35-60, .panel-35-65, .painel-35-65, .panel-35-70, .painel-35-70, .panel-35-75, .painel-35-75, .panel-35-80, .painel-35-80, .panel-35-85, .painel-35-85, .panel-35-90, .painel-35-90, .panel-35-95, .painel-35-95, .panel-35-100, .painel-35-100 { */
/*     width: 35% !important; */
/* } */
/*  */
/* .panel-40-0, .painel-40-0, .panel-40-5, .painel-40-5, .panel-40-10, .painel-40-10, .panel-40-15, .painel-40-15, .panel-40-20, .painel-40-20, .panel-40-25, .painel-40-25, .panel-40-30, .painel-40-30, .panel-40-35, .painel-40-35, .panel-40-40, .painel-40-40, .panel-40-45, .painel-40-45, .panel-40-50, .painel-40-50, .panel-40-55, .painel-40-55, .panel-40-60, .painel-40-60, .panel-40-65, .painel-40-65, .panel-40-70, .painel-40-70, .panel-40-75, .painel-40-75, .panel-40-80, .painel-40-80, .panel-40-85, .painel-40-85, .panel-40-90, .painel-40-90, .panel-40-95, .painel-40-95, .panel-40-100, .painel-40-100 { */
/*     width: 40% !important; */
/* } */
/*  */
/* .panel-45-0, .painel-45-0, .panel-45-5, .painel-45-5, .panel-45-10, .painel-45-10, .panel-45-15, .painel-45-15, .panel-45-20, .painel-45-20, .panel-45-25, .painel-45-25, .panel-45-30, .painel-45-30, .panel-45-35, .painel-45-35, .panel-45-40, .painel-45-40, .panel-45-45, .painel-45-45, .panel-45-50, .painel-45-50, .panel-45-55, .painel-45-55, .panel-45-60, .painel-45-60, .panel-45-65, .painel-45-65, .panel-45-70, .painel-45-70, .panel-45-75, .painel-45-75, .panel-45-80, .painel-45-80, .panel-45-85, .painel-45-85, .panel-45-90, .painel-45-90, .panel-45-95, .painel-45-95, .panel-45-100, .painel-45-100 { */
/*     width: 45% !important; */
/* } */
/*  */
/* .panel-50-0, .painel-50-0, .panel-50-5, .painel-50-5, .panel-50-10, .painel-50-10, .panel-50-15, .painel-50-15, .panel-50-20, .painel-50-20, .panel-50-25, .painel-50-25, .panel-50-30, .painel-50-30, .panel-50-35, .painel-50-35, .panel-50-40, .painel-50-40, .panel-50-45, .painel-50-45, .panel-50-50, .painel-50-50, .panel-50-55, .painel-50-55, .panel-50-60, .painel-50-60, .panel-50-65, .painel-50-65, .panel-50-70, .painel-50-70, .panel-50-75, .painel-50-75, .panel-50-80, .painel-50-80, .panel-50-85, .painel-50-85, .panel-50-90, .painel-50-90, .panel-50-95, .painel-50-95, .panel-50-100, .painel-50-100 { */
/*     width: 50% !important; */
/* } */
/*  */
/* .panel-55-0, .painel-55-0, .panel-55-5, .painel-55-5, .panel-55-10, .painel-55-10, .panel-55-15, .painel-55-15, .panel-55-20, .painel-55-20, .panel-55-25, .painel-55-25, .panel-55-30, .painel-55-30, .panel-55-35, .painel-55-35, .panel-55-40, .painel-55-40, .panel-55-45, .painel-55-45, .panel-55-50, .painel-55-50, .panel-55-55, .painel-55-55, .panel-55-60, .painel-55-60, .panel-55-65, .painel-55-65, .panel-55-70, .painel-55-70, .panel-55-75, .painel-55-75, .panel-55-80, .painel-55-80, .panel-55-85, .painel-55-85, .panel-55-90, .painel-55-90, .panel-55-95, .painel-55-95, .panel-55-100, .painel-55-100 { */
/*     width: 55% !important; */
/* } */
/*  */
/* .panel-60-0, .painel-60-0, .panel-60-5, .painel-60-5, .panel-60-10, .painel-60-10, .panel-60-15, .painel-60-15, .panel-60-20, .painel-60-20, .panel-60-25, .painel-60-25, .panel-60-30, .painel-60-30, .panel-60-35, .painel-60-35, .panel-60-40, .painel-60-40, .panel-60-45, .painel-60-45, .panel-60-50, .painel-60-50, .panel-60-55, .painel-60-55, .panel-60-60, .painel-60-60, .panel-60-65, .painel-60-65, .panel-60-70, .painel-60-70, .panel-60-75, .painel-60-75, .panel-60-80, .painel-60-80, .panel-60-85, .painel-60-85, .panel-60-90, .painel-60-90, .panel-60-95, .painel-60-95, .panel-60-100, .painel-60-100 { */
/*     width: 60% !important; */
/* } */
/*  */
/* .panel-65-0, .painel-65-0, .panel-65-5, .painel-65-5, .panel-65-10, .painel-65-10, .panel-65-15, .painel-65-15, .panel-65-20, .painel-65-20, .panel-65-25, .painel-65-25, .panel-65-30, .painel-65-30, .panel-65-35, .painel-65-35, .panel-65-40, .painel-65-40, .panel-65-45, .painel-65-45, .panel-65-50, .painel-65-50, .panel-65-55, .painel-65-55, .panel-65-60, .painel-65-60, .panel-65-65, .painel-65-65, .panel-65-70, .painel-65-70, .panel-65-75, .painel-65-75, .panel-65-80, .painel-65-80, .panel-65-85, .painel-65-85, .panel-65-90, .painel-65-90, .panel-65-95, .painel-65-95, .panel-65-100, .painel-65-100 { */
/*     width: 65% !important; */
/* } */
/*  */
/* .panel-70-0, .painel-70-0, .panel-70-5, .painel-70-5, .panel-70-10, .painel-70-10, .panel-70-15, .painel-70-15, .panel-70-20, .painel-70-20, .panel-70-25, .painel-70-25, .panel-70-30, .painel-70-30, .panel-70-35, .painel-70-35, .panel-70-40, .painel-70-40, .panel-70-45, .painel-70-45, .panel-70-50, .painel-70-50, .panel-70-55, .painel-70-55, .panel-70-60, .painel-70-60, .panel-70-65, .painel-70-65, .panel-70-70, .painel-70-70, .panel-70-75, .painel-70-75, .panel-70-80, .painel-70-80, .panel-70-85, .painel-70-85, .panel-70-90, .painel-70-90, .panel-70-95, .painel-70-95, .panel-70-100, .painel-70-100 { */
/*     width: 70% !important; */
/* } */
/*  */
/* .panel-75-0, .painel-75-0, .panel-75-5, .painel-75-5, .panel-75-10, .painel-75-10, .panel-75-15, .painel-75-15, .panel-75-20, .painel-75-20, .panel-75-25, .painel-75-25, .panel-75-30, .painel-75-30, .panel-75-35, .painel-75-35, .panel-75-40, .painel-75-40, .panel-75-45, .painel-75-45, .panel-75-50, .painel-75-50, .panel-75-55, .painel-75-55, .panel-75-60, .painel-75-60, .panel-75-65, .painel-75-65, .panel-75-70, .painel-75-70, .panel-75-75, .painel-75-75, .panel-75-80, .painel-75-80, .panel-75-85, .painel-75-85, .panel-75-90, .painel-75-90, .panel-75-95, .painel-75-95, .panel-75-100, .painel-75-100 { */
/*     width: 75% !important; */
/* } */
/*  */
/* .panel-80-0, .painel-80-0, .panel-80-5, .painel-80-5, .panel-80-10, .painel-80-10, .panel-80-15, .painel-80-15, .panel-80-20, .painel-80-20, .panel-80-25, .painel-80-25, .panel-80-30, .painel-80-30, .panel-80-35, .painel-80-35, .panel-80-40, .painel-80-40, .panel-80-45, .painel-80-45, .panel-80-50, .painel-80-50, .panel-80-55, .painel-80-55, .panel-80-60, .painel-80-60, .panel-80-65, .painel-80-65, .panel-80-70, .painel-80-70, .panel-80-75, .painel-80-75, .panel-80-80, .painel-80-80, .panel-80-85, .painel-80-85, .panel-80-90, .painel-80-90, .panel-80-95, .painel-80-95, .panel-80-100, .painel-80-100 { */
/*     width: 80% !important; */
/* } */
/*  */
/* .panel-85-0, .painel-85-0, .panel-85-5, .painel-85-5, .panel-85-10, .painel-85-10, .panel-85-15, .painel-85-15, .panel-85-20, .painel-85-20, .panel-85-25, .painel-85-25, .panel-85-30, .painel-85-30, .panel-85-35, .painel-85-35, .panel-85-40, .painel-85-40, .panel-85-45, .painel-85-45, .panel-85-50, .painel-85-50, .panel-85-55, .painel-85-55, .panel-85-60, .painel-85-60, .panel-85-65, .painel-85-65, .panel-85-70, .painel-85-70, .panel-85-75, .painel-85-75, .panel-85-80, .painel-85-80, .panel-85-85, .painel-85-85, .panel-85-90, .painel-85-90, .panel-85-95, .painel-85-95, .panel-85-100, .painel-85-100 { */
/*     width: 85% !important; */
/* } */
/*  */
/* .panel-90-0, .painel-90-0, .panel-90-5, .painel-90-5, .panel-90-10, .painel-90-10, .panel-90-15, .painel-90-15, .panel-90-20, .painel-90-20, .panel-90-25, .painel-90-25, .panel-90-30, .painel-90-30, .panel-90-35, .painel-90-35, .panel-90-40, .painel-90-40, .panel-90-45, .painel-90-45, .panel-90-50, .painel-90-50, .panel-90-55, .painel-90-55, .panel-90-60, .painel-90-60, .panel-90-65, .painel-90-65, .panel-90-70, .painel-90-70, .panel-90-75, .painel-90-75, .panel-90-80, .painel-90-80, .panel-90-85, .painel-90-85, .panel-90-90, .painel-90-90, .panel-90-95, .painel-90-95, .panel-90-100, .painel-90-100 { */
/*     width: 90% !important; */
/* } */
/*  */
/* .panel-95-0, .painel-95-0, .panel-95-5, .painel-95-5, .panel-95-10, .painel-95-10, .panel-95-15, .painel-95-15, .panel-95-20, .painel-95-20, .panel-95-25, .painel-95-25, .panel-95-30, .painel-95-30, .panel-95-35, .painel-95-35, .panel-95-40, .painel-95-40, .panel-95-45, .painel-95-45, .panel-95-50, .painel-95-50, .panel-95-55, .painel-95-55, .panel-95-60, .painel-95-60, .panel-95-65, .painel-95-65, .panel-95-70, .painel-95-70, .panel-95-75, .painel-95-75, .panel-95-80, .painel-95-80, .panel-95-85, .painel-95-85, .panel-95-90, .painel-95-90, .panel-95-95, .painel-95-95, .panel-95-100, .painel-95-100 { */
/*     width: 95% !important; */
/* } */
/*  */
/* .panel-100-0, .painel-100-0, .panel-100-5, .painel-100-5, .panel-100-10, .painel-100-10, .panel-100-15, .painel-100-15, .panel-100-20, .painel-100-20, .panel-100-25, .painel-100-25, .panel-100-30, .painel-100-30, .panel-100-35, .painel-100-35, .panel-100-40, .painel-100-40, .panel-100-45, .painel-100-45, .panel-100-50, .painel-100-50, .panel-100-55, .painel-100-55, .panel-100-60, .painel-100-60, .panel-100-65, .painel-100-65, .panel-100-70, .painel-100-70, .panel-100-75, .painel-100-75, .panel-100-80, .painel-100-80, .panel-100-85, .painel-100-85, .panel-100-90, .painel-100-90, .panel-100-95, .painel-100-95, .panel-100-100, .painel-100-100 { */
/*     width: 100% !important; */
/* } */
/*  */
/* /* LAYOUT MOBILE * / */
/* @media screen and (max-width: 768px) { */
/*     .panel-0-0, .painel-0-0, .panel-5-0, .painel-5-0, .panel-10-0, .painel-10-0, .panel-15-0, .painel-15-0, .panel-20-0, .painel-20-0, .panel-25-0, .painel-25-0, .panel-30-0, .painel-30-0, .panel-35-0, .painel-35-0, .panel-40-0, .painel-40-0, .panel-45-0, .painel-45-0, .panel-50-0, .painel-50-0, .panel-55-0, .painel-55-0, .panel-60-0, .painel-60-0, .panel-65-0, .painel-65-0, .panel-70-0, .painel-70-0, .panel-75-0, .painel-75-0, .panel-80-0, .painel-80-0, .panel-85-0, .painel-85-0, .panel-90-0, .painel-90-0, .panel-95-0, .painel-95-0, .panel-100-0, .painel-100-0 { */
/*         width: 0% !important; */
/*     } */
/*  */
/*     .panel-0-5, .painel-0-5, .panel-5-5, .painel-5-5, .panel-10-5, .painel-10-5, .panel-15-5, .painel-15-5, .panel-20-5, .painel-20-5, .panel-25-5, .painel-25-5, .panel-30-5, .painel-30-5, .panel-35-5, .painel-35-5, .panel-40-5, .painel-40-5, .panel-45-5, .painel-45-5, .panel-50-5, .painel-50-5, .panel-55-5, .painel-55-5, .panel-60-5, .painel-60-5, .panel-65-5, .painel-65-5, .panel-70-5, .painel-70-5, .panel-75-5, .painel-75-5, .panel-80-5, .painel-80-5, .panel-85-5, .painel-85-5, .panel-90-5, .painel-90-5, .panel-95-5, .painel-95-5, .panel-100-5, .painel-100-5 { */
/*         width: 5% !important; */
/*     } */
/*  */
/*     .panel-0-10, .painel-0-10, .panel-5-10, .painel-5-10, .panel-10-10, .painel-10-10, .panel-15-10, .painel-15-10, .panel-20-10, .painel-20-10, .panel-25-10, .painel-25-10, .panel-30-10, .painel-30-10, .panel-35-10, .painel-35-10, .panel-40-10, .painel-40-10, .panel-45-10, .painel-45-10, .panel-50-10, .painel-50-10, .panel-55-10, .painel-55-10, .panel-60-10, .painel-60-10, .panel-65-10, .painel-65-10, .panel-70-10, .painel-70-10, .panel-75-10, .painel-75-10, .panel-80-10, .painel-80-10, .panel-85-10, .painel-85-10, .panel-90-10, .painel-90-10, .panel-95-10, .painel-95-10, .panel-100-10, .painel-100-10 { */
/*         width: 10% !important; */
/*     } */
/*  */
/*     .panel-0-15, .painel-0-15, .panel-5-15, .painel-5-15, .panel-10-15, .painel-10-15, .panel-15-15, .painel-15-15, .panel-20-15, .painel-20-15, .panel-25-15, .painel-25-15, .panel-30-15, .painel-30-15, .panel-35-15, .painel-35-15, .panel-40-15, .painel-40-15, .panel-45-15, .painel-45-15, .panel-50-15, .painel-50-15, .panel-55-15, .painel-55-15, .panel-60-15, .painel-60-15, .panel-65-15, .painel-65-15, .panel-70-15, .painel-70-15, .panel-75-15, .painel-75-15, .panel-80-15, .painel-80-15, .panel-85-15, .painel-85-15, .panel-90-15, .painel-90-15, .panel-95-15, .painel-95-15, .panel-100-15, .painel-100-15 { */
/*         width: 15% !important; */
/*     } */
/*  */
/*     .panel-0-20, .painel-0-20, .panel-5-20, .painel-5-20, .panel-10-20, .painel-10-20, .panel-15-20, .painel-15-20, .panel-20-20, .painel-20-20, .panel-25-20, .painel-25-20, .panel-30-20, .painel-30-20, .panel-35-20, .painel-35-20, .panel-40-20, .painel-40-20, .panel-45-20, .painel-45-20, .panel-50-20, .painel-50-20, .panel-55-20, .painel-55-20, .panel-60-20, .painel-60-20, .panel-65-20, .painel-65-20, .panel-70-20, .painel-70-20, .panel-75-20, .painel-75-20, .panel-80-20, .painel-80-20, .panel-85-20, .painel-85-20, .panel-90-20, .painel-90-20, .panel-95-20, .painel-95-20, .panel-100-20, .painel-100-20 { */
/*         width: 20% !important; */
/*     } */
/*  */
/*     .panel-0-25, .painel-0-25, .panel-5-25, .painel-5-25, .panel-10-25, .painel-10-25, .panel-15-25, .painel-15-25, .panel-20-25, .painel-20-25, .panel-25-25, .painel-25-25, .panel-30-25, .painel-30-25, .panel-35-25, .painel-35-25, .panel-40-25, .painel-40-25, .panel-45-25, .painel-45-25, .panel-50-25, .painel-50-25, .panel-55-25, .painel-55-25, .panel-60-25, .painel-60-25, .panel-65-25, .painel-65-25, .panel-70-25, .painel-70-25, .panel-75-25, .painel-75-25, .panel-80-25, .painel-80-25, .panel-85-25, .painel-85-25, .panel-90-25, .painel-90-25, .panel-95-25, .painel-95-25, .panel-100-25, .painel-100-25 { */
/*         width: 25% !important; */
/*     } */
/*  */
/*     .panel-0-30, .painel-0-30, .panel-5-30, .painel-5-30, .panel-10-30, .painel-10-30, .panel-15-30, .painel-15-30, .panel-20-30, .painel-20-30, .panel-25-30, .painel-25-30, .panel-30-30, .painel-30-30, .panel-35-30, .painel-35-30, .panel-40-30, .painel-40-30, .panel-45-30, .painel-45-30, .panel-50-30, .painel-50-30, .panel-55-30, .painel-55-30, .panel-60-30, .painel-60-30, .panel-65-30, .painel-65-30, .panel-70-30, .painel-70-30, .panel-75-30, .painel-75-30, .panel-80-30, .painel-80-30, .panel-85-30, .painel-85-30, .panel-90-30, .painel-90-30, .panel-95-30, .painel-95-30, .panel-100-30, .painel-100-30 { */
/*         width: 30% !important; */
/*     } */
/*  */
/*     .panel-0-35, .painel-0-35, .panel-5-35, .painel-5-35, .panel-10-35, .painel-10-35, .panel-15-35, .painel-15-35, .panel-20-35, .painel-20-35, .panel-25-35, .painel-25-35, .panel-30-35, .painel-30-35, .panel-35-35, .painel-35-35, .panel-40-35, .painel-40-35, .panel-45-35, .painel-45-35, .panel-50-35, .painel-50-35, .panel-55-35, .painel-55-35, .panel-60-35, .painel-60-35, .panel-65-35, .painel-65-35, .panel-70-35, .painel-70-35, .panel-75-35, .painel-75-35, .panel-80-35, .painel-80-35, .panel-85-35, .painel-85-35, .panel-90-35, .painel-90-35, .panel-95-35, .painel-95-35, .panel-100-35, .painel-100-35 { */
/*         width: 35% !important; */
/*     } */
/*  */
/*     .panel-0-40, .painel-0-40, .panel-5-40, .painel-5-40, .panel-10-40, .painel-10-40, .panel-15-40, .painel-15-40, .panel-20-40, .painel-20-40, .panel-25-40, .painel-25-40, .panel-30-40, .painel-30-40, .panel-35-40, .painel-35-40, .panel-40-40, .painel-40-40, .panel-45-40, .painel-45-40, .panel-50-40, .painel-50-40, .panel-55-40, .painel-55-40, .panel-60-40, .painel-60-40, .panel-65-40, .painel-65-40, .panel-70-40, .painel-70-40, .panel-75-40, .painel-75-40, .panel-80-40, .painel-80-40, .panel-85-40, .painel-85-40, .panel-90-40, .painel-90-40, .panel-95-40, .painel-95-40, .panel-100-40, .painel-100-40 { */
/*         width: 40% !important; */
/*     } */
/*  */
/*     .panel-0-45, .painel-0-45, .panel-5-45, .painel-5-45, .panel-10-45, .painel-10-45, .panel-15-45, .painel-15-45, .panel-20-45, .painel-20-45, .panel-25-45, .painel-25-45, .panel-30-45, .painel-30-45, .panel-35-45, .painel-35-45, .panel-40-45, .painel-40-45, .panel-45-45, .painel-45-45, .panel-50-45, .painel-50-45, .panel-55-45, .painel-55-45, .panel-60-45, .painel-60-45, .panel-65-45, .painel-65-45, .panel-70-45, .painel-70-45, .panel-75-45, .painel-75-45, .panel-80-45, .painel-80-45, .panel-85-45, .painel-85-45, .panel-90-45, .painel-90-45, .panel-95-45, .painel-95-45, .panel-100-45, .painel-100-45 { */
/*         width: 45% !important; */
/*     } */
/*  */
/*     .panel-0-50, .painel-0-50, .panel-5-50, .painel-5-50, .panel-10-50, .painel-10-50, .panel-15-50, .painel-15-50, .panel-20-50, .painel-20-50, .panel-25-50, .painel-25-50, .panel-30-50, .painel-30-50, .panel-35-50, .painel-35-50, .panel-40-50, .painel-40-50, .panel-45-50, .painel-45-50, .panel-50-50, .painel-50-50, .panel-55-50, .painel-55-50, .panel-60-50, .painel-60-50, .panel-65-50, .painel-65-50, .panel-70-50, .painel-70-50, .panel-75-50, .painel-75-50, .panel-80-50, .painel-80-50, .panel-85-50, .painel-85-50, .panel-90-50, .painel-90-50, .panel-95-50, .painel-95-50, .panel-100-50, .painel-100-50 { */
/*         width: 50% !important; */
/*     } */
/*  */
/*     .panel-0-55, .painel-0-55, .panel-5-55, .painel-5-55, .panel-10-55, .painel-10-55, .panel-15-55, .painel-15-55, .panel-20-55, .painel-20-55, .panel-25-55, .painel-25-55, .panel-30-55, .painel-30-55, .panel-35-55, .painel-35-55, .panel-40-55, .painel-40-55, .panel-45-55, .painel-45-55, .panel-50-55, .painel-50-55, .panel-55-55, .painel-55-55, .panel-60-55, .painel-60-55, .panel-65-55, .painel-65-55, .panel-70-55, .painel-70-55, .panel-75-55, .painel-75-55, .panel-80-55, .painel-80-55, .panel-85-55, .painel-85-55, .panel-90-55, .painel-90-55, .panel-95-55, .painel-95-55, .panel-100-55, .painel-100-55 { */
/*         width: 55% !important; */
/*     } */
/*  */
/*     .panel-0-60, .painel-0-60, .panel-5-60, .painel-5-60, .panel-10-60, .painel-10-60, .panel-15-60, .painel-15-60, .panel-20-60, .painel-20-60, .panel-25-60, .painel-25-60, .panel-30-60, .painel-30-60, .panel-35-60, .painel-35-60, .panel-40-60, .painel-40-60, .panel-45-60, .painel-45-60, .panel-50-60, .painel-50-60, .panel-55-60, .painel-55-60, .panel-60-60, .painel-60-60, .panel-65-60, .painel-65-60, .panel-70-60, .painel-70-60, .panel-75-60, .painel-75-60, .panel-80-60, .painel-80-60, .panel-85-60, .painel-85-60, .panel-90-60, .painel-90-60, .panel-95-60, .painel-95-60, .panel-100-60, .painel-100-60 { */
/*         width: 60% !important; */
/*     } */
/*  */
/*     .panel-0-65, .painel-0-65, .panel-5-65, .painel-5-65, .panel-10-65, .painel-10-65, .panel-15-65, .painel-15-65, .panel-20-65, .painel-20-65, .panel-25-65, .painel-25-65, .panel-30-65, .painel-30-65, .panel-35-65, .painel-35-65, .panel-40-65, .painel-40-65, .panel-45-65, .painel-45-65, .panel-50-65, .painel-50-65, .panel-55-65, .painel-55-65, .panel-60-65, .painel-60-65, .panel-65-65, .painel-65-65, .panel-70-65, .painel-70-65, .panel-75-65, .painel-75-65, .panel-80-65, .painel-80-65, .panel-85-65, .painel-85-65, .panel-90-65, .painel-90-65, .panel-95-65, .painel-95-65, .panel-100-65, .painel-100-65 { */
/*         width: 65% !important; */
/*     } */
/*  */
/*     .panel-0-70, .painel-0-70, .panel-5-70, .painel-5-70, .panel-10-70, .painel-10-70, .panel-15-70, .painel-15-70, .panel-20-70, .painel-20-70, .panel-25-70, .painel-25-70, .panel-30-70, .painel-30-70, .panel-35-70, .painel-35-70, .panel-40-70, .painel-40-70, .panel-45-70, .painel-45-70, .panel-50-70, .painel-50-70, .panel-55-70, .painel-55-70, .panel-60-70, .painel-60-70, .panel-65-70, .painel-65-70, .panel-70-70, .painel-70-70, .panel-75-70, .painel-75-70, .panel-80-70, .painel-80-70, .panel-85-70, .painel-85-70, .panel-90-70, .painel-90-70, .panel-95-70, .painel-95-70, .panel-100-70, .painel-100-70 { */
/*         width: 70% !important; */
/*     } */
/*  */
/*     .panel-0-75, .painel-0-75, .panel-5-75, .painel-5-75, .panel-10-75, .painel-10-75, .panel-15-75, .painel-15-75, .panel-20-75, .painel-20-75, .panel-25-75, .painel-25-75, .panel-30-75, .painel-30-75, .panel-35-75, .painel-35-75, .panel-40-75, .painel-40-75, .panel-45-75, .painel-45-75, .panel-50-75, .painel-50-75, .panel-55-75, .painel-55-75, .panel-60-75, .painel-60-75, .panel-65-75, .painel-65-75, .panel-70-75, .painel-70-75, .panel-75-75, .painel-75-75, .panel-80-75, .painel-80-75, .panel-85-75, .painel-85-75, .panel-90-75, .painel-90-75, .panel-95-75, .painel-95-75, .panel-100-75, .painel-100-75 { */
/*         width: 75% !important; */
/*     } */
/*  */
/*     .panel-0-80, .painel-0-80, .panel-5-80, .painel-5-80, .panel-10-80, .painel-10-80, .panel-15-80, .painel-15-80, .panel-20-80, .painel-20-80, .panel-25-80, .painel-25-80, .panel-30-80, .painel-30-80, .panel-35-80, .painel-35-80, .panel-40-80, .painel-40-80, .panel-45-80, .painel-45-80, .panel-50-80, .painel-50-80, .panel-55-80, .painel-55-80, .panel-60-80, .painel-60-80, .panel-65-80, .painel-65-80, .panel-70-80, .painel-70-80, .panel-75-80, .painel-75-80, .panel-80-80, .painel-80-80, .panel-85-80, .painel-85-80, .panel-90-80, .painel-90-80, .panel-95-80, .painel-95-80, .panel-100-80, .painel-100-80 { */
/*         width: 80% !important; */
/*     } */
/*  */
/*     .panel-0-85, .painel-0-85, .panel-5-85, .painel-5-85, .panel-10-85, .painel-10-85, .panel-15-85, .painel-15-85, .panel-20-85, .painel-20-85, .panel-25-85, .painel-25-85, .panel-30-85, .painel-30-85, .panel-35-85, .painel-35-85, .panel-40-85, .painel-40-85, .panel-45-85, .painel-45-85, .panel-50-85, .painel-50-85, .panel-55-85, .painel-55-85, .panel-60-85, .painel-60-85, .panel-65-85, .painel-65-85, .panel-70-85, .painel-70-85, .panel-75-85, .painel-75-85, .panel-80-85, .painel-80-85, .panel-85-85, .painel-85-85, .panel-90-85, .painel-90-85, .panel-95-85, .painel-95-85, .panel-100-85, .painel-100-85 { */
/*         width: 85% !important; */
/*     } */
/*  */
/*     .panel-0-90, .painel-0-90, .panel-5-90, .painel-5-90, .panel-10-90, .painel-10-90, .panel-15-90, .painel-15-90, .panel-20-90, .painel-20-90, .panel-25-90, .painel-25-90, .panel-30-90, .painel-30-90, .panel-35-90, .painel-35-90, .panel-40-90, .painel-40-90, .panel-45-90, .painel-45-90, .panel-50-90, .painel-50-90, .panel-55-90, .painel-55-90, .panel-60-90, .painel-60-90, .panel-65-90, .painel-65-90, .panel-70-90, .painel-70-90, .panel-75-90, .painel-75-90, .panel-80-90, .painel-80-90, .panel-85-90, .painel-85-90, .panel-90-90, .painel-90-90, .panel-95-90, .painel-95-90, .panel-100-90, .painel-100-90 { */
/*         width: 90% !important; */
/*     } */
/*  */
/*     .panel-0-95, .painel-0-95, .panel-5-95, .painel-5-95, .panel-10-95, .painel-10-95, .panel-15-95, .painel-15-95, .panel-20-95, .painel-20-95, .panel-25-95, .painel-25-95, .panel-30-95, .painel-30-95, .panel-35-95, .painel-35-95, .panel-40-95, .painel-40-95, .panel-45-95, .painel-45-95, .panel-50-95, .painel-50-95, .panel-55-95, .painel-55-95, .panel-60-95, .painel-60-95, .panel-65-95, .painel-65-95, .panel-70-95, .painel-70-95, .panel-75-95, .painel-75-95, .panel-80-95, .painel-80-95, .panel-85-95, .painel-85-95, .panel-90-95, .painel-90-95, .panel-95-95, .painel-95-95, .panel-100-95, .painel-100-95 { */
/*         width: 95% !important; */
/*     } */
/*  */
/*     .panel-0-100, .painel-0-100, .panel-5-100, .painel-5-100, .panel-10-100, .painel-10-100, .panel-15-100, .painel-15-100, .panel-20-100, .painel-20-100, .panel-25-100, .painel-25-100, .panel-30-100, .painel-30-100, .panel-35-100, .painel-35-100, .panel-40-100, .painel-40-100, .panel-45-100, .painel-45-100, .panel-50-100, .painel-50-100, .panel-55-100, .painel-55-100, .panel-60-100, .painel-60-100, .panel-65-100, .painel-65-100, .panel-70-100, .painel-70-100, .panel-75-100, .painel-75-100, .panel-80-100, .painel-80-100, .panel-85-100, .painel-85-100, .panel-90-100, .painel-90-100, .panel-95-100, .painel-95-100, .panel-100-100, .painel-100-100 { */
/*         width: 100% !important; */
/*     } */
/*  */
/*     .layout-wrapper .layout-topbar { */
/*         padding: 16px 8px !important; */
/*     } */
/*  */
/*     .ocultaMobile, .somenteDesktop { */
/*         display: none !important; */
/*     } */
/*  */
/*     .ocultaDesktop:not(table), */
/*     .somenteMobile:not(table) { */
/*         display: block !important; */
/*     } */
/*  */
/*     table.ocultaDesktop, */
/*     table.somenteMobile { */
/*         display: table !important; */
/*     } */
/*  */
/*     .landing-body .landing-wrapper .landing-features { */
/*         padding-top: 16px !important; */
/*         padding-bottom: 16px !important; */
/*     } */
/*  */
/*     .panelResponsivo, */
/*     .painelResponsivo { */
/*         display: inline-block !important; */
/*     } */
/*  */
/*     /* DIALOG * / */
/*     body .ui-dialog .ui-dialog-titlebar { */
/*         padding: 1em !important; */
/*     } */
/*  */
/*     body .ui-dialog .ui-dialog-titlebar-close { */
/*         font-size: 1.5em !important; */
/*     } */
/*  */
/*     /* DIALOG * / */
/*     body .ui-dialog { */
/*         max-width: calc(100vw - 6px) !important; */
/*     } */
/*  */
/*     .ui-dialog-content.ui-widget-content { */
/*         max-height: calc(100vh - 2em - 21px - 6px) !important; */
/*     } */
/*  */
/*     /* DataTable * / */
/*     /*.ui-dialog .ui-datatable-tablewrapper {* / */
/*     .ui-dialog .ui-datatable { */
/*         max-width: calc(calc(100vw - 6px) - 32px) !important; */
/*     } */
/*  */
/*     /*.ui-dialog .ui-panel .ui-datatable-tablewrapper {* / */
/*     .ui-dialog .ui-panel .ui-datatable { */
/*         max-width: calc(calc(100vw - 6px) - 32px - 28px) !important; */
/*     } */
/*  */
/*     /* Padding em dataTable * / */
/*     body .ui-datatable .ui-datatable-data > tr > td { */
/*         padding: 0.25em 0.5em; */
/*     } */
/* } */
/* /* DIALOG * / */
/* body .ui-dialog { */
/*     max-width: calc(100vw - 16px); */
/* } */
/*  */
/* .ui-dialog-content.ui-widget-content { */
/*     max-height: calc(100vh - 3em - 21px - 16px); */
/* } */
/*  */
/* /* Padding em dataTable * / */
/* body .ui-datatable .ui-datatable-data > tr > td { */
/*     /*padding: 0.2em 0.5em !important;* / */
/* } */
/*  */
/* /* Datatables com colunas adaptivas * / */
/* .ui-datatable { */
/*     display: inline-grid; */
/*     width: 100%; */
/* } */
/*  */
/* .ui-datatable table { */
/*     table-layout: auto !important; */
/* } */
/*  */
/* /*.ui-datatable-tablewrapper {* / */
/* .ui-datatable { */
/*     max-width: calc(100vw - 32px - 17px); */
/* } */
/*  */
/* /*.ui-panel .ui-datatable-tablewrapper {* / */
/* .ui-panel .ui-datatable { */
/*     max-width: calc(100vw - 32px - 28px - 17px); */
/* } */
/*  */
/* /*.ui-dialog .ui-datatable-tablewrapper {* / */
/* .ui-dialog .ui-datatable { */
/*     max-width: calc(calc(100vw - 16px) - 32px - 17px); */
/* } */
/*  */
/* /*.ui-dialog .ui-panel .ui-datatable-tablewrapper {* / */
/* .ui-dialog .ui-panel .ui-datatable { */
/*     max-width: calc(calc(100vw - 16px) - 32px - 28px - 17px); */
/* } */
/*  */
/* /* Classe de seleção de texto * / */
/* .all-copy { */
/*     -webkit-user-select: all !important; */
/*     -moz-user-select: all !important; */
/*     -ms-user-select: all !important; */
/*     user-select: all !important; */
/* } */
/*  */
/* .atencao { */
/*     background-color: red; */
/*     color: white; */
/* } */
/*  */
/* .atencao:after { */
/*     content: "Atenção!"; */
/* } */
/*  */
/* .novo { */
/*     background-color: #FF9A00; */
/*     color: white; */
/* } */
/*  */
/* .novo:after { */
/*     content: "Novo"; */
/* } */
/*  */
/* .piscando, */
/* .estatico { */
/*     white-space: nowrap; */
/*     color: white; */
/*     padding: 2px 4px; */
/*     font-size: 10px; */
/*     border-radius: 1em; */
/*     vertical-align: middle; */
/*     font-weight: bold; */
/* } */
/*  */
/* .piscando { */
/*     animation-name: animacao_piscando; */
/*     animation-duration: 1.5s; */
/*     animation-timing-function: steps(1); */
/*     animation-iteration-count: infinite; */
/* } */
/*  */
/* *[style*="$tagEstatico"] { */
/*     white-space: nowrap; */
/*     color: none !important; */
/*     background-color: #B2E4E4 !important; */
/*     font-size: 1em; */
/*     border: 1px solid #53C5C5 !important; */
/*     padding: 2px 4px; */
/*     border-radius: 1em; */
/* } */
/*  */
/* @keyframes animacao_piscando { */
/*     0% { */
/*         visibility: visible; */
/*     } */
/*     75% { */
/*         visibility: hidden; */
/*     } */
/* } */
/* @keyframes animacao_piscando_acessibilidade { */
/*     0% { */
/*         opacity: 100%; */
/*     } */
/*     75% { */
/*         opacity: 50%; */
/*     } */
/* } */
/* /* ÍCONE MENU NOVO * / */
/* .layout-menu > li > a.menuNovo:after, */
/* .layout-menu > li.menuNovo > a:after { */
/*     position: absolute; */
/* } */
/*  */
/* /* DESTAQUE MENU NOVO * / */
/* a.menuNovo > span, */
/* li.menuNovo > a > span, */
/* tr.menuNovo > td > table > tbody > tr > td:first-of-type > a, */
/* tr.menuNovo.menuPai > td > table > tbody > tr > td > label { */
/*     text-shadow: 0px 0px 2px #FE7E03; */
/* } */
/*  */
/* .legendaPanel { */
/*     display: table; */
/*     height: 100%; */
/*     position: relative; */
/*     top: -14px; */
/* } */
/*  */
/* .legendaPanel > div * { */
/*     cursor: pointer; */
/* } */
/*  */
/* .legendaPanel > div { */
/*     display: inline-flex; */
/*     border: 1px solid #dadada; */
/*     border-radius: 4px; */
/*     padding: 4px 8px; */
/*     position: relative; */
/*     top: 22px; */
/*     margin-left: 16px; */
/*     width: auto; */
/*     z-index: 200; */
/*     background-color: #B9D8EB; */
/* } */
/*  */
/* .legendaPanel > div label { */
/*     padding-top: 12px; */
/*     padding-right: 12px; */
/*     padding-bottom: 12px; */
/*     padding-left: 36px; */
/*     margin-left: -32px; */
/*     margin-right: -8px; */
/* } */
/*  */
/* .legendaPanel > fieldset { */
/*     position: relative; */
/*     top: 0; */
/*     height: calc(100% - 38px); */
/*     padding-top: 38px; */
/*     vertical-align: top; */
/*     border-radius: 4px; */
/* } */
/*  */
/* .legendaPanel > fieldset > .ui-blockui { */
/*     border-radius: 2px; */
/*     z-index: 100 !important; */
/* } */
/*  */
/* .legendaPanel > fieldset > .ui-blockui.ui-helper-hidden:not([style]) { */
/*     /*    display: block; */
/*         background: none; */
/*         border: 1px solid $bordaFocus;* / */
/* } */
/*  */
/* .legendaPanel > fieldset > .ui-fieldset-content { */
/*     height: 100%; */
/* } */
/*  */
/* /* H_TO-DO: Revisar * / */
/* table[style*="height:0px"] > tbody > tr > td, */
/* table[style*="height: 0px"] > tbody > tr > td { */
/*     height: 100%; */
/* } */
/*  */
/* .identacao0 > td > table > tbody > tr > td > a, */
/* .identacao0 > td > table > tbody > tr > td > label { */
/*     margin-left: 10px; */
/* } */
/*  */
/* .identacao1 > td > table > tbody > tr > td > a, */
/* .identacao1 > td > table > tbody > tr > td > label { */
/*     margin-left: 20px; */
/* } */
/*  */
/* .identacao2 > td > table > tbody > tr > td > a, */
/* .identacao2 > td > table > tbody > tr > td > label { */
/*     margin-left: 40px; */
/* } */
/*  */
/* .identacao3 > td > table > tbody > tr > td > a, */
/* .identacao3 > td > table > tbody > tr > td > label { */
/*     margin-left: 60px; */
/* } */
/*  */
/* .identacao4 > td > table > tbody > tr > td > a, */
/* .identacao4 > td > table > tbody > tr > td > label { */
/*     margin-left: 80px; */
/* } */
/*  */
/* .identacao5 > td > table > tbody > tr > td > a, */
/* .identacao5 > td > table > tbody > tr > td > label { */
/*     margin-left: 100px; */
/* } */
/*  */
/* .identacao6 > td > table > tbody > tr > td > a, */
/* .identacao6 > td > table > tbody > tr > td > label { */
/*     margin-left: 120px; */
/* } */
/*  */
/* .identacao7 > td > table > tbody > tr > td > a, */
/* .identacao7 > td > table > tbody > tr > td > label { */
/*     margin-left: 140px; */
/* } */
/*  */
/* .identacao8 > td > table > tbody > tr > td > a, */
/* .identacao8 > td > table > tbody > tr > td > label { */
/*     margin-left: 160px; */
/* } */
/*  */
/* body .ui-widget.headerVermelho .ui-widget-header, */
/* body .ui-widget.headerLaranja .ui-widget-header, */
/* body .ui-widget.headerMarrom .ui-widget-header, */
/* body .ui-widget.headerAmarelo .ui-widget-header, */
/* body .ui-widget.headerVerde .ui-widget-header, */
/* body .ui-widget.headerAqua .ui-widget-header, */
/* body .ui-widget.headerAzul .ui-widget-header, */
/* body .ui-widget.headerCinza .ui-widget-header, */
/* body .ui-widget.headerBranco .ui-widget-header, */
/* body .ui-widget.headerPreto .ui-widget-header { */
/*     border: 1px solid #00000025; */
/*     color: none; */
/* } */
/*  */
/* body .ui-widget.headerVermelho .ui-widget-header { */
/*     background-color: #f7baba; */
/* } */
/*  */
/* body .ui-widget.headerLaranja .ui-widget-header { */
/*     background-color: #FFDAC2; */
/* } */
/*  */
/* body .ui-widget.headerMarrom .ui-widget-header { */
/*     background-color: #cac4b3; */
/* } */
/*  */
/* body .ui-widget.headerAmarelo .ui-widget-header { */
/*     background-color: #FFF1BD; */
/* } */
/*  */
/* body .ui-widget.headerVerde .ui-widget-header { */
/*     background-color: #d7e6d5; */
/* } */
/*  */
/* body .ui-widget.headerAqua .ui-widget-header { */
/*     background-color: #b2e4e4; */
/* } */
/*  */
/* body .ui-widget.headerAzul .ui-widget-header { */
/*     background-color: #d9edf7; */
/* } */
/*  */
/* body .ui-widget.headerCinza .ui-widget-header { */
/*     background-color: #cbcdd0; */
/* } */
/*  */
/* body .ui-widget.headerBranco .ui-widget-header { */
/*     background-color: #FFFFFF; */
/* } */
/*  */
/* body .ui-widget.headerPreto .ui-widget-header { */
/*     background-color: #000000; */
/* } */
/*  */
/* /* Eventos de ponteiros * / */
/* .ui-state-disabled { */
/*     pointer-events: all !important; */
/* } */
/*  */
/* a.btnAltoContraste > span > i:before { */
/*     /*text-shadow: 0 0 10px #FB0;* / */
/*     color: transparent; */
/*     text-shadow: transparent; */
/* } */
/*  */
/* a.btnCapitalizacao > span > i:before { */
/*     /*text-shadow: 0 0 10px #FB0;* / */
/*     color: transparent; */
/*     text-shadow: transparent; */
/* } */
/*  */
/* body .ui-datatable .ui-datatable-header, */
/* body .ui-datatable .ui-datatable-footer { */
/*     /*background-color: $uiPadrao;* / */
/*     /*color: $cabecalhoPadrao;* / */
/* } */
/*  */
/* /* Botões acessibilidade * / */
/* .acessibilidade a:hover > span > .fa-xs { */
/*     color: #C5CDFF; */
/*     font-size: 1.1em; */
/*     margin-left: -0.1em; */
/* } */
/*  */
/* .acessibilidade a:hover > span > *:not(.fa-xs) { */
/*     color: #C5CDFF; */
/*     font-size: 1.4em; */
/* } */
/*  */
/* .acessibilidade a:not(.btnAltoContraste):hover > span > *:not(.fa-xs) { */
/*     margin-left: 1.2em; */
/* } */
/*  */
/* .acessibilidade a.btnAltoContraste:hover > span > i { */
/*     margin-left: 0.9em; */
/* } */
/*  */
/* .beta-acessibilidade { */
/*     font-size: 10px !important; */
/*     /* NÃO aplicar fonteZoom * / */
/* } */
/*  */
/* .page-break { */
/*     page-break-before: always; */
/*     page-break-after: always; */
/* } */
/*  */
/* /* Modernização do editor original * / */
/* .editorModerno .ui-editor-toolbar { */
/*     background: white !important; */
/*     color: black; */
/* } */
/*  */
/* .editorModerno .ui-editor-button { */
/*     background: none; */
/*     text-align: center; */
/*     width: 24px; */
/*     padding: 4px 0px 0px 0px; */
/* } */
/*  */
/* .editorModerno .ui-editor-button:hover { */
/*     background: #DDECF5 !important; */
/*     border-radius: 2px; */
/*     cursor: pointer; */
/* } */
/*  */
/* .editorModerno .ui-editor-button:before { */
/*     font-family: "Font Awesome 5 Free"; */
/*     font-weight: bold; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Font]:after, */
/* .editorModerno .ui-editor-button[title="Font Size"]:after, */
/* .editorModerno .ui-editor-button[title=Style]:after { */
/*     font-family: "Font Awesome 5 Free"; */
/*     font-weight: bold; */
/*     font-size: 0.8em; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Font]:after, */
/* .editorModerno .ui-editor-button[title="Font Size"]:after, */
/* .editorModerno .ui-editor-button[title=Style]:after { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Font Color"]:after, */
/* .editorModerno .ui-editor-button[title="Text Highlight Color"]:after, */
/* .editorModerno .ui-editor-button[title="Remove Formatting"]:after { */
/*     font-family: "Font Awesome 5 Free"; */
/*     font-weight: bold; */
/*     font-size: 0.7em; */
/*     margin-left: -4px; */
/*     vertical-align: bottom; */
/*     text-shadow: -1px -1px white; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Font Color"]:hover:after, */
/* .editorModerno .ui-editor-button[title="Text Highlight Color"]:hover:after, */
/* .editorModerno .ui-editor-button[title="Remove Formatting"]:hover:after { */
/*     text-shadow: -1px -1px #DDECF5; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Font Color"]:after { */
/*     content: ""; */
/*     color: darkred; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Text Highlight Color"]:after { */
/*     content: ""; */
/*     color: darkgoldenrod; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Remove Formatting"]:after { */
/*     content: ""; */
/*     color: crimson; */
/* } */
/*  */
/* .editorModerno .ui-editor { */
/*     padding-bottom: 4px; */
/* } */
/*  */
/* .editorModerno .ui-editor-toolbar { */
/*     border-bottom: 1px solid none; */
/*     padding-bottom: 3px; */
/* } */
/*  */
/* .editorModerno .ui-editor-divider { */
/*     height: 24px; */
/*     margin: 3px 0px 1px 0px; */
/*     background: none; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Bold]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Italic]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Underline]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Strikethrough]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Superscript]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Subscript]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Font]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Font Size"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Style]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Font Color"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Text Highlight Color"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Remove Formatting"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Bullets]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Numbering]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Outdent]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Indent]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Align Text Left"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Center]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Align Text Right"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Justify]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Undo]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Redo]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Insert Horizontal Rule"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Insert Image"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Insert Hyperlink"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Remove Hyperlink"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Cut]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Copy]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Paste]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Paste as Text"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title=Print]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Show Source"]:before { */
/*     content: ""; */
/* } */
/*  */
/* .editorModerno .ui-editor-button[title="Show Rich Text"]:before { */
/*     content: ""; */
/* } */
/*  */
/* /* Animação de flash * / */
/* .flash.ui-inputtext, */
/* .flash.ui-selectonemenu, */
/* .flash.ui-selectcheckboxmenu, */
/* .flash.ui-inputmask, */
/* .flash.ui-inputnumber > .ui-inputfield, */
/* .flash.ui-inputtextarea, */
/* .flash.ui-button, */
/* .flash.ui-selectbooleancheckbox > .ui-chkbox-box, */
/* .flash.ui-selectoneradio .ui-radiobutton-box, */
/* .flash.ui-calendar > .ui-inputfield, */
/* .flash.ui-password { */
/*     animation-name: flashBox; */
/*     animation-duration: 1s; */
/*     animation-timing-function: ease-out; */
/* } */
/*  */
/* @keyframes flashBox { */
/*     from { */
/*         box-shadow: 0 0 4px 2px #c8c80f; */
/*     } */
/*     to { */
/*         box-shadow: 0 0 4px 2px rgba(200, 200, 15, 0); */
/*     } */
/* } */
/* label.flash, */
/* span.flash { */
/*     animation-name: flashText; */
/*     animation-duration: 1s; */
/*     animation-timing-function: ease-out; */
/* } */
/*  */
/* @keyframes flashText { */
/*     from { */
/*         text-shadow: 0px 0px 4px none, 0px 0px 4px none; */
/*     } */
/*     to { */
/*         text-shadow: 0px 0px 4px none, 0px 0px 4px none; */
/*     } */
/* } */
/* /*.ui-button, */
/* body .ui-fileupload .ui-fileupload-buttonbar .ui-button{ */
/*     width: 150px !important; */
/*  */
/*     height: 40px; */
/* } */
/*  */
/* .ui-button.ui-button-icon-only { */
/*     height: 30px; */
/*     width: 30px !important; */
/* }* / */
/* body .ui-fileupload .ui-fileupload-buttonbar { */
/*     border: none; */
/*     background: none; */
/*     width: auto; */
/*     padding: 0; */
/* } */
/*  */
/* body .ui-fileupload .ui-fileupload-content { */
/*     border: none; */
/*     background: none; */
/*     width: auto; */
/*     padding: 0; */
/* } */
/*  */
/* body .ui-fileupload .ui-fileupload-buttonbar .ui-button { */
/*     margin: 0.229em; */
/* } */
/*  */
/* body .landing-features .ui-state-disabled { */
/*     opacity: 1; */
/* } */
/*  */
/* .botaoAdicionar { */
/*     background: #EEE !important; */
/*     border: none; */
/*     outline: solid 1px #AAA; */
/*     padding: 0.5em; */
/* } */
/*  */
/* .ui-wizard-nav-back .ui-button-icon-left.ui-icon.ui-c.ui-icon-arrowthick-1-w:before { */
/*     content: "" !important; */
/*     font-style: normal !important; */
/*     font-stretch: normal !important; */
/*     line-height: 1 !important; */
/*     font-weight: bold; */
/*     font-family: "Font Awesome 5 Free", "FontAwesome" !important; */
/* } */
/*  */
/* .ui-wizard-nav-next .ui-button-icon-left.ui-icon.ui-c.ui-icon-arrowthick-1-e:before { */
/*     content: "" !important; */
/*     font-style: normal !important; */
/*     font-stretch: normal !important; */
/*     line-height: 1 !important; */
/*     font-weight: bold; */
/*     font-family: "Font Awesome 5 Free", "FontAwesome" !important; */
/* } */
/*  */
/* .ui-growl { */
/*     top: 5px !important; */
/* } */
/*  */
/* /*.redondo { */
/*     padding: 1em; */
/*     border-radius: 2em !important; */
/* } */
/*  */
/* .redondo:not(.ui-button-icon-only) .ui-icon { */
/*     padding-left: 1em; */
/*      font-size: 2em;  */
/* } */
/*  */
/* .redondo.ui-button-icon-only { */
/*     width: 3em !important; */
/*     height: 3em !important; */
/* } */
/*  */
/* .redondo .ui-icon + .ui-c { */
/*     padding-left: 3em !important; */
/* }* / */
/* .layout-dashboard .overview-box .overview-img, */
/* .layout-dashboard .overview-box .overview-img-sm { */
/*     left: 0px; */
/*     top: 0px; */
/* } */
/*  */
/* .layout-dashboard .overview-box .overview-img img, */
/* .layout-dashboard .overview-box .overview-img-sm img { */
/*     left: 0px; */
/*     top: 0px; */
/*     position: absolute; */
/*     height: 100%; */
/*     width: auto; */
/*     margin: 0px; */
/* } */
/*  */
/* .layout-dashboard .overview-box .overview-img-sm span, */
/* .layout-dashboard .overview-box .overview-img span { */
/*     top: calc(50% - 0.5em); */
/*     left: 1em; */
/*     position: absolute; */
/* } */
/*  */
/* .layout-dashboard .overview-box .overview-img span { */
/*     font-size: 32px; */
/* } */
/*  */
/* .layout-dashboard .overview-box .overview-img-sm span { */
/*     font-size: 26px; */
/* } */
/*  */
/* .layout-dashboard .overview-box .overview-img span, */
/* .layout-dashboard .overview-box .overview-img-sm span { */
/*     filter: saturate(2) brightness(0.65) contrast(1.5); */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-laranja { */
/*     background-color: #ffe5dc; */
/*     color: #ffe5dc; */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-amarelo { */
/*     background-color: #f8ebcb; */
/*     color: #f8ebcb; */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-verde { */
/*     background-color: #b9f9c7; */
/*     color: #b9f9c7; */
/*     /*color: #e3f8f1;* / */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-azul { */
/*     background-color: #d3f0f9; */
/*     color: #d3f0f9; */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-vermelho { */
/*     background-color: #ffabab; */
/*     color: #ffabab; */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-roxo { */
/*     background-color: #dfc4d8; */
/*     color: #dfc4d8; */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-cinza { */
/*     display: block; */
/*     background-color: #C4C4C6; */
/*     color: #000000; */
/* } */
/*  */
/* .layout-dashboard .overview-box.overview-box-cinza:hover { */
/*     display: block; */
/*     background-color: #FF831D; */
/*     color: #ffffff; */
/* } */
/*  */
/* nowrap { */
/*     white-space: nowrap; */
/* } */
/*  */
/* table.formulario > tbody > tr > td, */
/* table.formulario > tr > td { */
/*     border: none; */
/* } */
/*  */
/* body .ui-datepicker .ui-timepicker .ui-picker-up .ui-icon, */
/* body .ui-datepicker .ui-timepicker .ui-picker-down .ui-icon { */
/*     font-family: "Font Awesome 5 Free"; */
/*     display: block; */
/*     text-indent: 0px; */
/*     font-weight: 900; */
/*     position: relative; */
/*     top: initial; */
/*     left: initial; */
/*     width: auto; */
/* } */
/*  */
/* /* INPUT SWITCH * / */
/* .ui-toggleswitch .ui-toggleswitch-slider:before { */
/*     background: #666666; */
/*     border: none; */
/*     width: 20px; */
/*     height: 20px; */
/*     border-radius: 50%; */
/*     top: -5px; */
/*     left: -6px; */
/* } */
/*  */
/* .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:before { */
/*     background: #82adc9; */
/*     left: 0px; */
/* } */
/*  */
/* body .ui-toggleswitch .ui-toggleswitch-slider { */
/*     width: 32px !important; */
/*     height: 12px !important; */
/*     border-radius: 8px; */
/*     border: 1px solid #dadada; */
/*     background-color: #f4f4f4; */
/* } */
/*  */
/* body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider { */
/*     background-color: #DDECF5; */
/*     border: 1px solid #B9D8EB; */
/* } */
/*  */
/* body .ui-toggleswitch { */
/*     height: 1em; */
/* } */
/*  */
/* /* Substituição de estilo de SelectBooleanButton por InputSwitch * / */
/* /*body .ui-button.ui-button-icon-only.ui-selectbooleanbutton { */
/*     display: inline-block; */
/*     width: 32px !important; */
/*     height: 12px !important; */
/*     border: $inputBorder; */
/*     border-radius: 8px; */
/*     background-color: $inputBgColor; */
/* } */
/*  */
/* body .ui-button.ui-button-icon-only.ui-selectbooleanbutton.ui-state-active, */
/* body .ui-button.ui-button-icon-only.ui-selectbooleanbutton.ui-state-active.ui-state-focus { */
/*     background-color: #DDECF5; */
/*     border-color: #B9D8EB; */
/* } */
/*  */
/* body .ui-button.ui-button-icon-only.ui-selectbooleanbutton:before { */
/*     content: ''; */
/*     width: 20px; */
/*     height: 20px; */
/*     border-radius: 50%; */
/*     background-color: $textColor; */
/*     border: none; */
/*     display: block; */
/*     margin-top: -5px; */
/* } */
/*  */
/* body .ui-button.ui-button-icon-only.ui-selectbooleanbutton.ui-state-active:before { */
/*     background-color: #82ADC9; */
/*     margin-left: 12px; */
/* } */
/*  */
/* body .ui-button.ui-button-icon-only.ui-selectbooleanbutton > .ui-button-text { */
/*     display: none; */
/* }* / */
/* /* Antes esta regra punha "Arial" nos inputs, destoando do resto. Agora segue */
/*    a fonte do projeto, como no prototipo, que usa uma familia so em tudo. * / */
/* body .ui-widget .ui-inputfield, */
/* body .ui-widget .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label, */
/* body .ui-widget .ui-selectonemenu .ui-selectonemenu-label { */
/*     font-family: var(--font-sans); */
/* } */
/*  */
/* /* Overlay panel não fica modal dentro de dialog * / */
/* .ui-overlaypanel.modal { */
/*     box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.2), 0 0 6px 0 rgba(0, 0, 0, 0.16); */
/*     margin: 20px; */
/* } */
/*  */
/* /*Alternativa Clicktrap* / */
/* .ui-overlaypanel.modal:before { */
/*     content: ""; */
/*     width: 100%; */
/*     height: 100%; */
/*     /*background: red;* / */
/*     position: fixed; */
/*     top: 0; */
/*     left: 0; */
/* } */
/*  */
/* .avisoAtualizacao { */
/*     text-decoration-line: underline !important; */
/*     text-decoration-color: #DCA706 !important; */
/*     text-decoration-style: dotted !important; */
/* } */
/*  */
/* .iconeAvisoAtualizacao:after { */
/*     font-style: normal !important; */
/*     font-stretch: normal !important; */
/*     line-height: 1 !important; */
/*     vertical-align: super; */
/*     margin-left: 0.5em; */
/*     color: #DCA706; */
/* } */
/*  */
/* @media screen and (max-width: 640px) { */
/*     .ui-datatable-reflow .ui-reflow-label, .ui-datatable-reflow .ui-reflow-dropdown { */
/*         display: none !important; */
/*     } */
/* } */
/* .img-hor { */
/*     -moz-transform: scaleX(-1); */
/*     -o-transform: scaleX(-1); */
/*     -webkit-transform: scaleX(-1); */
/*     transform: scaleX(-1); */
/*     filter: FlipH; */
/*     -ms-filter: "FlipH"; */
/* } */
/*  */
/* /*CSS adicional para correção do tema blue-orange* / */
/* /*h1, h2, h3, h4, h5, h6 { */
/*     margin: 0px !important; */
/* }* / */
/* h1 { */
/*     font-size: 2rem !important; */
/* } */
/*  */
/* h2 { */
/*     font-size: 1.5rem !important; */
/* } */
/*  */
/* h3 { */
/*     font-size: 1.17rem !important; */
/* } */
/*  */
/* body .ui-button { */
/*     background-color: #DDECF5 !important; */
/*     color: #2F5D7A !important; */
/*     border: 1px solid #B9D8EB !important; */
/* } */
/*  */
/* body .ui-inputfield { */
/*     color: #666666 !important; */
/*     background: #f4f4f4 !important; */
/*     padding: 0.429em !important; */
/* } */
/*  */
/* body .ui-panel .ui-panel-titlebar { */
/*     border: 1px solid #B9D8EB !important; */
/*     background-color: #DDECF5 !important; */
/*     color: #2F5D7A !important; */
/*     padding: 0.857em 1em !important; */
/* } */
/*  */
/* .layout-wrapper .layout-main .layout-content { */
/*     padding: 16px !important; */
/* } */
/*  */
/* body .ui-datatable .ui-datatable-data > tr > td { */
/*     padding: 0.5em 1.214em !important; */
/* } */
/*  */
/* /*Tabela compacta, usada via styleClass em p:dataTable (modelo: saidaTable_bCompra no bordero.xhtml)* / */
/* body .ui-datatable.tabela-compacta .ui-datatable-data > tr > td { */
/*     padding: 0.15em 0.5em !important; */
/*     font-size: 12px; */
/* } */
/*  */
/* body .ui-datatable.tabela-compacta thead th { */
/*     padding: 0.2rem 0.4rem !important; */
/*     font-size: 12px; */
/* } */
/*  */
/* body .ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon:hover { */
/*     border: none !important; */
/*     background: transparent !important; */
/* } */
/*  */
/* body .ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon:focus { */
/*     box-shadow: none !important; */
/* } */
/*  */
/* body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container { */
/*     padding: 0.429em !important; */
/*     padding-right: 28px !important; */
/*     display: block !important; */
/*     background: #f4f4f4 !important; */
/* } */
/*  */
/* body .ui-selectonemenu .ui-selectonemenu-trigger { */
/*     background: #f4f4f4 !important; */
/* } */
/*  */
/* body .ui-selectonemenu .ui-selectonemenu-label { */
/*     padding-right: 2.357rem !important; */
/* } */
/*  */
/* body .ui-selectonemenu .ui-selectonemenu-label { */
/*     min-height: auto !important; */
/* } */
/*  */
/* body .ui-accordion .ui-accordion-header.ui-state-active:focus { */
/*     box-shadow: none !important; */
/* } */
/*  */
/* body .ui-accordion .ui-accordion-header.ui-state-active:hover { */
/*     background: #f4f4f4 !important; */
/* } */
/*  */
/* body .ui-accordion .ui-accordion-header:focus { */
/*     box-shadow: none !important; */
/* } */
/*  */
/* body .ui-accordion .ui-accordion-header:first-child { */
/*     border-top: none !important; */
/* } */
/*  */
/* body .ui-datatable thead th { */
/*     padding: 0.5rem 0.8rem !important; */
/* } */
/*  */
/* body .ui-toggleswitch .ui-toggleswitch-handler { */
/*     background: #666666 !important; */
/*     left: -0.25rem !important; */
/* } */
/*  */
/* body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider .ui-toggleswitch-handler { */
/*     background: #82adc9 !important; */
/*     left: 0px !important; */
/* } */
/*  */
/* .ui-datatable thead th, .ui-datatable tfoot td { */
/*     text-align: center !important; */
/* } */
/*  */
/* body .ui-datatable tfoot td { */
/*     background-color: #ffffff !important; */
/*     border: 1px solid #ebebeb !important; */
/*     color: #666666 !important; */
/*     padding: 0.5em 1.214em !important; */
/* } */
/*  */
/* body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token { */
/*     margin: 0 1.5rem 0 0 !important; */
/*     background: #FEDEBC !important; */
/*     color: #726557 !important; */
/*     border: 1px solid #F9CC9B !important; */
/* } */
/*  */
/* body .ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon { */
/*     color: transparent !important; */
/* } */
/*  */
/* /*FACES MESSAGE* / */
/* body .ui-growl .ui-growl-item-container.ui-growl-info { */
/*     background-color: #93decc !important; */
/*     border: 1px solid #93decc !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* body .ui-growl .ui-growl-item-container.ui-growl-warn { */
/*     background-color: #ffe277 !important; */
/*     border: 1px solid #ffe277 !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* body .ui-growl .ui-growl-item-container.ui-growl-error, body .ui-growl .ui-growl-item-container.ui-growl-fatal { */
/*     background-color: #ff8b8b !important; */
/*     border: 1px solid #ff8b8b !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-image { */
/*     padding-top: 5px !important; */
/*     font-size: 2.5rem !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* body .ui-growl .ui-growl-item-container.ui-growl-warn .ui-growl-image { */
/*     padding-top: 5px !important; */
/*     font-size: 2.5rem !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* body .ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-image { */
/*     padding-top: 5px !important; */
/*     font-size: 2.5rem !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* body .ui-growl .ui-growl-item-container.ui-growl-fatal .ui-growl-image { */
/*     padding-top: 5px !important; */
/*     font-size: 2.5rem !important; */
/*     color: #212121 !important; */
/* } */
/*  */
/* .ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th { */
/*     border-style: none !important; */
/* } */
/*  */
/* .layout-home { */
/*     width: 50%; */
/*     float: left; */
/*     box-sizing: border-box; */
/*     padding: .5em; */
/*     margin-bottom: 20px; */
/* } */
/*  */
/*  */


/* ============================================================================
   AJUSTES REATIVADOS DURANTE O TESTE DE LIMPEZA

   Mantem oculta a mensagem de navegador incompativel.
   Esta regra existia no mury.css original e foi reativada por necessidade real.
   ============================================================================ */

.displayNavegador {
    display: none !important;
}

/* ============================================================================
   FIM DO CSS LEGADO DESATIVADO
   INÍCIO DO CSS SGC / PROTÓTIPO NOVO - ATIVO
   ============================================================================ */

/* =========================================================================
   SHELL DO PORTAL - menu lateral + topbar

   Mecanica: componentes e layout.js do proprio Olympia
     .layout-wrapper > .layout-topbar + .layout-menu-container + .layout-main
     menu montado com po:menu (OlympiaMenu) em /WEB-INF/menu.xhtml
     layout-slim = menu recolhido

   Visual: prototipo C:\Programacao\gestao-credito-mvp-new
     painel azul arredondado flutuante, itens em pilula, lima no destaque,
     topbar branca comecando depois do menu.

   As regras abaixo sobrepoem a geometria do Olympia, que posiciona a topbar
   com 90px de altura em width:100% e o menu colado abaixo dela.
   ========================================================================= */

/* -------------------------------------------------------------------------
   MENU LATERAL
   ------------------------------------------------------------------------- */

body .layout-wrapper .layout-menu-container {
    position: fixed;
    top: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    left: var(--sidebar-gap);
    right: auto;
    z-index: 310;
    display: flex;
    width: var(--sidebar-width);
    height: auto;                /* o Olympia usa height:100% + top:90px */
    flex-direction: column;
    overflow: hidden;   /* trocado por visible quando recolhido, pelo flyout */
    border-radius: 1.5rem;
    /* !important como seguro: se alguem devolver layout-menu-dark ao wrapper,
       a regra do Olympia (#333333, uma classe a mais) voltaria a vencer */
    background: var(--color-primary) !important;
    box-shadow: 0 18px 45px rgba(255, 255, 255, .2);
    transition: width .2s;
}

/* O tema Olympia crava .layout-wrapper.layout-static .layout-menu-container
   { left: 0 } (layout-blue-orange.css, dentro de min-width:897px), com mais
   classes que a regra acima - por especificidade ele vencia o left:var(--sidebar-gap)
   so no modo largo (o slim nao tem esse left, so mexe em width, por isso so
   la o gap aparecia certo). Repete o seletor com .layout-static pra empatar
   em classes e ganhar no tipo (o "body" a mais). */
body .layout-wrapper.layout-static .layout-menu-container {
    left: var(--sidebar-gap);
}

body .layout-wrapper .layout-menu-container .menuLateral-marca {
    display: flex;
    min-height: 5.6rem;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
}

body .layout-wrapper .layout-menu-container .menuLateral-logo {
    width: auto;
    max-width: 11.5rem;
    max-height: 2.4rem;
}

/* Logo reduzida (logo_m2.png): so aparece com o menu recolhido, ver secao
   "MENU RECOLHIDO" mais abaixo. */
body .layout-wrapper .layout-menu-container .menuLateral-logo-mini {
    display: none;
}

/* o h:form que envolve o po:menu nao pode virar bloco solto */
body .layout-wrapper .layout-menu-container > form {
    flex: 1;
    overflow-y: auto;
    margin: 0;
}

body .layout-wrapper .layout-menu-container .layout-menu {
    margin: 0;
    padding: 4px 12px 20px;
    list-style: none;
}

body .layout-wrapper .layout-menu-container .layout-menu li {
    margin: 0 0 6px 0;
}

body .layout-wrapper .layout-menu-container .layout-menu li a {
    display: flex;
    min-height: 2.85rem;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 1.5px solid transparent;
    border-radius: 9999px;
    color: rgba(255, 255, 255, .87);
    font-size: 15px;
    font-weight: 400;
}

body .layout-wrapper .layout-menu-container .layout-menu li a:hover {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

body .layout-wrapper .layout-menu-container .layout-menu li a .layout-menuitem-icon {
    width: 1.25rem;
    color: inherit;
    font-size: 1.05rem;
    text-align: center;
}

body .layout-wrapper .layout-menu-container .layout-menu li a .layout-menuitem-text {
    margin-left: 0;
    font-weight: 400;
}

/* seta do submenu, a direita */
body .layout-wrapper .layout-menu-container .layout-menu li a .layout-submenu-toggler {
    position: static;
    margin: 0 0 0 auto;
    font-size: 14px;
    opacity: .7;
}

/* submenu aberto: a seta gira e os filhos recuam um pouco */
body .layout-wrapper .layout-menu-container .layout-menu li.active-menuitem > a .layout-submenu-toggler {
    transform: rotate(-180deg);
}

body .layout-wrapper .layout-menu-container .layout-menu li ul,
body .layout-wrapper .layout-menu-container .layout-menu > li.active-menuitem > ul {
    margin: 0 0 6px 0;
    padding: 0 0 0 14px;
    background: transparent;   /* deixa o azul do painel aparecer */
    list-style: none;
}

body .layout-wrapper .layout-menu-container .layout-menu li ul li a {
    min-height: 2.4rem;
    padding: 8px 14px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
}

/* item ativo: pilula lima, como no prototipo */
body .layout-wrapper .layout-menu-container .layout-menu li.active-menuitem > a {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

/* Item da tela aberta: pilula lima. A classe vem do menu.xhtml, comparando
   view.viewId - o active-menuitem do Olympia so marca o que foi clicado na
   sessao, e some a cada carga de pagina. */
body .layout-wrapper .layout-menu-container .layout-menu li a.menuLateral-ativo,
body .layout-wrapper .layout-menu-container .layout-menu li.menuLateral-ativo > a,
body .layout-wrapper .layout-menu-container .layout-menu li.active-menuitem > a.menuLateral-ativo {
    background: var(--color-accent);
    color: #050A11;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 38, 95, .2);
}

body .layout-wrapper .layout-menu-container .layout-menu li a.menuLateral-ativo:hover,
body .layout-wrapper .layout-menu-container .layout-menu li.menuLateral-ativo > a:hover {
    background: var(--color-accent);
    color: #050A11;
}

body .layout-wrapper .layout-menu-container .layout-menu li.active-menuitem > a .layout-menuitem-icon,
body .layout-wrapper .layout-menu-container .layout-menu li.active-menuitem > a .layout-menuitem-text,
body .layout-wrapper .layout-menu-container .layout-menu li.active-menuitem > a .layout-submenu-toggler {
    color: inherit;
}

/* "Novo Borderô": contornado em lima */
body .layout-wrapper .layout-menu-container .layout-menu li a.menuLateral-destaque {
    margin-bottom: 20px;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

body .layout-wrapper .layout-menu-container .layout-menu li a.menuLateral-destaque:hover {
    background: rgba(208, 234, 86, .12);
    color: var(--color-accent);
}

/* ---- rodape do menu ---- */

body .layout-wrapper .layout-menu-container .menuLateral-rodape {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    text-align: center;
}

body .layout-wrapper .layout-menu-container .menuLateral-rodape form {
    margin: 0;
}

body .layout-wrapper .layout-menu-container .menuLateral-versao {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
}

/* Avisos embaixo da versao (ambiente de teste, banco de producao) - layout
   da pilula em comum, cor por modificador logo abaixo (teste vermelho,
   conexao roxo, mesmas duplas de cor dos badges do design system:
   --red-100/--red-700 e --violet-100/--violet-700). Podem aparecer os dois
   juntos (ver menu.xhtml), entao as cores diferentes e que distinguem qual
   e qual. */
body .layout-wrapper .layout-menu-container .menuLateral-ambiente {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

body .layout-wrapper .layout-menu-container .menuLateral-ambiente--teste {
    background: var(--red-100);
    color: var(--red-700);
}

body .layout-wrapper .layout-menu-container .menuLateral-ambiente--conexao {
    background: var(--violet-100);
    color: var(--violet-700);
}

/* Versao do icone, so aparece com o menu recolhido (menuLateral-recolher
   escondido, ver secao "MENU RECOLHIDO" mais abaixo) - mesma cor da pilula,
   so que compacta pra caber no rail estreito. */
body .layout-wrapper .layout-menu-container .menuLateral-ambiente-icone {
    display: none;
}

body .layout-wrapper .menuLateral-recolher.ui-button {
    display: flex;
    width: 100%;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 none !important;
    border-radius: 9999px !important;
    background: rgba(0, 36, 95, .24) !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none !important;
}

body .layout-wrapper .menuLateral-recolher.ui-button:hover {
    background: rgba(0, 36, 95, .42) !important;
    color: #ffffff !important;
}

body .layout-wrapper .menuLateral-recolher.ui-button .ui-button-icon-left {
    position: static;
    margin: 0;
    color: inherit !important;
}

body .layout-wrapper .menuLateral-recolher.ui-button .ui-button-text {
    padding: 0;
}

/* -------------------------------------------------------------------------
   TOPBAR - flutuante, comecando depois do menu
   ------------------------------------------------------------------------- */

body .layout-wrapper .ui-toolbar.topbarPortal {
    position: fixed;
    top: var(--sidebar-gap);
    right: var(--page-gutter);
    left: calc(var(--sidebar-width) + var(--sidebar-gap) + var(--page-gutter));
    z-index: 300;
    display: flex;
    width: auto;
    height: auto;                /* o Olympia fixa 90px */
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(1rem, 2.4vw, 2rem);
    border: 0 none !important;
    border-radius: 1.25rem !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(8, 3, 36, .055);
    transition: left .2s;
}

body .layout-wrapper .ui-toolbar.topbarPortal .ui-toolbar-group-left,
body .layout-wrapper .ui-toolbar.topbarPortal .ui-toolbar-group-right {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

/* garante o bloco do usuario encostado na direita, independente de como o
   p:toolbar distribua os grupos */
body .layout-wrapper .ui-toolbar.topbarPortal .ui-toolbar-group-right {
    margin-left: auto;
}

body .layout-wrapper .ui-toolbar.topbarPortal .ui-avatar.topbarPortal-avatarEmpresa {
    background: #eef4ff;
    color: var(--color-primary);
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-empresa {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-empresaRotulo {
    color: #7e858d;
    font-size: 12px;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-empresaNome {
    overflow: hidden;
    max-width: 22rem;
    color: #28313b;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuario {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

body .layout-wrapper .ui-toolbar.topbarPortal .ui-avatar.topbarPortal-avatarUsuario {
    background: #dce9ff;
    color: var(--blue-800);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuarioTexto {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuarioNome,
body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuarioEmail {
    overflow: hidden;
    max-width: 16rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuarioNome {
    color: #28313b;
    font-size: 14px;
    font-weight: 700;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuarioEmail {
    color: #7e858d;
    font-size: 12px;
}

body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-conta {
    display: flex;
    align-items: center;
    margin: 0;
}

body .layout-wrapper .ui-toolbar.topbarPortal .ui-menubutton > .ui-button {
    border: 1px solid #CCCCCC !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #454f5b !important;
}

body .layout-wrapper .ui-toolbar.topbarPortal .ui-menubutton > .ui-button:hover {
    border-color: #8bc5e2 !important;
    background: #eef4ff !important;
    color: var(--blue-800) !important;
}

/* -------------------------------------------------------------------------
   AREA DE CONTEUDO
   ------------------------------------------------------------------------- */

body .layout-wrapper .layout-main,
body .layout-wrapper.layout-static .layout-main {
    min-height: 100vh;
    padding-top: 0;              /* o Olympia usa 90px por causa da topbar dele */
    margin-left: calc(var(--sidebar-width) + var(--sidebar-gap));
    transition: margin-left .2s;
}

/* !important para vencer o `.layout-content { padding: 16px !important }`
   legado, mais acima neste arquivo, que jogava o conteudo por baixo da topbar */
body .layout-wrapper .layout-main .layout-content {
    padding: calc(var(--topbar-height) + 2.5rem) var(--page-gutter) var(--page-gutter) !important;
}

/* -------------------------------------------------------------------------
   MENU RECOLHIDO

   A classe menuRecolhido fica no elemento raiz (aplicada ainda no cabecalho,
   sem piscar) e e quem manda no CSS. O layout-slim no wrapper existe em
   paralelo para o layout.js do Olympia saber em que modo esta (tooltips).
   ------------------------------------------------------------------------- */

html.menuRecolhido body .layout-wrapper .layout-menu-container {
    width: var(--sidebar-collapsed);
}

html.menuRecolhido body .layout-wrapper .layout-main,
html.menuRecolhido body .layout-wrapper.layout-static .layout-main {
    margin-left: calc(var(--sidebar-collapsed) + var(--sidebar-gap));
}

html.menuRecolhido body .layout-wrapper .ui-toolbar.topbarPortal {
    left: calc(var(--sidebar-collapsed) + var(--sidebar-gap) + var(--page-gutter));
}

/* some com todo texto: sobram os icones. A versao fica (fica so compacta,
   regra logo abaixo) - so a pilula de ambiente de teste some, trocada pelo
   .menuLateral-ambiente-icone. */
html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu li a .layout-menuitem-text,
html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu li a .layout-submenu-toggler,
html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-ambiente,
html.menuRecolhido body .layout-wrapper .menuLateral-recolher.ui-button .ui-button-text {
    display: none !important;
}

/* Versao compacta e icone de ambiente de teste, os dois so aparecem
   recolhido - no expandido quem mostra e a versao normal + a pilula acima. */
html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-versao {
    margin-bottom: 6px;
    font-size: 8px;
    line-height: 1.2;
    word-break: break-word;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-ambiente-icone {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 50%;
    font-size: .75rem;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-ambiente-icone--teste {
    background: var(--red-100);
    color: var(--red-700);
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-ambiente-icone--conexao {
    background: var(--violet-100);
    color: var(--violet-700);
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu {
    padding-inline: 10px;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu > li > a {
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
    justify-content: center;
    margin-inline: auto;
    padding: 0;
    border-radius: 50%;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu > li > a .layout-menuitem-icon {
    width: auto;
    font-size: 1.15rem;
}

/* ---- Cadastros recolhido: painel flutuante ao lado do rail ----

   O Olympia ja faz isso no modo slim (.layout-slim > li > ul vira absolute
   com left:90px). Como o botao de recolher chama changeMenuMode('layout-slim'),
   a classe esta no wrapper e o mecanismo funciona; aqui so ajustamos a posicao
   para a nossa largura e damos as cores do painel. */

html.menuRecolhido body .layout-wrapper .layout-menu-container,
html.menuRecolhido body .layout-wrapper .layout-menu-container > form {
    overflow: visible;   /* sem isso o painel e recortado */
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu > li {
    position: relative;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu > li > ul {
    position: absolute;
    top: 0;
    left: calc(var(--sidebar-collapsed) - 0.75rem);
    z-index: 320;
    min-width: 15rem;
    padding: 8px;
    border-radius: 1rem;
    background: var(--color-primary);
    box-shadow: 0 18px 45px rgba(0, 36, 95, .28);
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu > li > ul li a {
    width: auto;
    height: auto;
    min-height: 2.4rem;
    justify-content: flex-start;
    margin: 0;
    padding: 8px 14px;
    border-radius: 9999px;
}

/* dentro do painel o texto volta a aparecer */
html.menuRecolhido body .layout-wrapper .layout-menu-container .layout-menu > li > ul li a .layout-menuitem-text {
    display: inline !important;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-marca {
    min-height: 4.5rem;
    padding-inline: 8px;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-logo {
    max-width: 2.6rem;
    object-fit: contain;
}

/* recolhido: some a logo completa e entra a reduzida (logo_m2) */
html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-logo:not(.menuLateral-logo-mini) {
    display: none;
}

html.menuRecolhido body .layout-wrapper .layout-menu-container .menuLateral-logo-mini {
    display: block;
    width: auto;
    max-width: 1.9rem;
    max-height: 1.9rem;
    position: relative;
    top: 0.5rem;
}

html.menuRecolhido body .layout-wrapper .menuLateral-recolher.ui-button {
    width: 2.6rem;
    min-height: 2.6rem;
    margin-inline: auto;
    padding: 0;
}

html.menuRecolhido body .layout-wrapper .menuLateral-recolher.ui-button .ui-button-icon-left {
    transform: scaleX(-1) !important;
}

/* -------------------------------------------------------------------------
   Telas estreitas (celular) e janelas popup (openWindow abre em 1024x600,
   mas redimensionavel) caem no mesmo breakpoint - viewport < 1024px nao
   distingue as duas. Quem distingue e a classe telaPopup, marcada em
   head-recursos.xhtml via window.opener (so existe em janela aberta por
   window.open). Popup: sem menu, conteudo ocupa tudo. Celular: o menu vira
   gaveta off-canvas, aberta pelo botao hamburguer da topbar (.menuMobile-toggle,
   em topbar.xhtml) via alternarMenuMobile(), que so alterna a classe
   menuMobileAberto no elemento raiz - CSS decide a posicao.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    body .layout-wrapper .ui-toolbar.topbarPortal,
    html.menuRecolhido body .layout-wrapper .ui-toolbar.topbarPortal {
        left: var(--page-gutter);
    }

    body .layout-wrapper .layout-main,
    body .layout-wrapper.layout-static .layout-main,
    html.menuRecolhido body .layout-wrapper .layout-main,
    html.menuRecolhido body .layout-wrapper.layout-static .layout-main {
        margin-left: 0;
    }

    /* Popup: sem menu e sem botao pra abrir um menu que nao existe. */
    html.telaPopup body .layout-wrapper .layout-menu-container,
    html.telaPopup body .layout-wrapper .menuMobile-toggle {
        display: none;
    }

    /* Celular: gaveta fora da tela por padrao, deslizando por cima do
       conteudo (nao empurra - por isso o layout-main acima ja fica com
       margin-left:0 incondicional neste breakpoint). */
    html:not(.telaPopup) body .layout-wrapper .layout-menu-container {
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 320;
        width: min(var(--sidebar-width), 82vw);
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    html:not(.telaPopup) body .layout-wrapper.layout-static .layout-menu-container {
        left: 0;
    }

    html.menuMobileAberto:not(.telaPopup) body .layout-wrapper .layout-menu-container {
        transform: translateX(0);
        box-shadow: 0 18px 45px rgba(0, 36, 95, .35);
    }

    /* "Recolher menu" so faz sentido no rail fixo do desktop; numa gaveta
       off-canvas ja estreita nao ha o que recolher. Some o botao - o rodape
       fica so com a versao. */
    html:not(.telaPopup) body .layout-wrapper .menuLateral-recolher.ui-button {
        display: none;
    }

    /* Sem o botao "Recolher menu" nao ha mais como sair do modo recolhido
       aqui - mas o usuario pode chegar nesta tela ja com html.menuRecolhido
       preso (recolheu no desktop numa sessao anterior, o localStorage
       sgcMenuRecolhido persiste; ou redimensionou a janela sem recarregar a
       pagina). A gaveta mobile tem que SEMPRE mostrar a descricao dos itens,
       nunca o rail so-icone - por isso as regras abaixo desfazem a secao
       "MENU RECOLHIDO" (mais acima neste arquivo) so dentro deste
       breakpoint. Precisam de !important e mais uma classe de
       especificidade (:not(.telaPopup)) pra vencer aquelas, que tambem sao
       !important. */
    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .layout-menu li a .layout-menuitem-text,
    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .layout-menu li a .layout-submenu-toggler {
        display: inline !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .layout-menu > li > a {
        width: auto !important;
        height: auto !important;
        min-height: 2.85rem !important;
        justify-content: flex-start !important;
        margin-inline: 0 !important;
        padding: 11px 16px !important;
        border-radius: 9999px !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .layout-menu > li > a .layout-menuitem-icon {
        width: 1.25rem !important;
        font-size: 1.05rem !important;
    }

    /* "Cadastros" recolhido vira painel flutuante ao lado do rail (posicao
       absoluta) - na gaveta mobile ele tem que expandir junto com a lista,
       como um submenu normal. */
    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .layout-menu > li > ul {
        position: static !important;
        min-width: 0 !important;
        margin: 0 0 6px 0 !important;
        padding: 0 0 0 14px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Logo, espacamento da lista e versao voltam ao tamanho normal - so
       ficam pequenos no rail estreito do desktop. */
    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-marca {
        min-height: 5.6rem !important;
        padding: 16px 20px !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-logo {
        max-width: 11.5rem !important;
    }

    /* gaveta do celular volta a logo completa, a reduzida some */
    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-logo:not(.menuLateral-logo-mini) {
        display: block !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-logo-mini {
        display: none !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .layout-menu {
        padding-inline: 12px !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-versao {
        font-size: 11px !important;
    }

    /* Pilula com texto de volta (o rail mostra so o icone-resumo) - mesma
       troca de menu.xhtml/mury.css que ja existe pro desktop recolhido, so
       que invertida aqui. */
    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-ambiente {
        display: inline-block !important;
    }

    html.menuRecolhido:not(.telaPopup) body .layout-wrapper .layout-menu-container .menuLateral-ambiente-icone {
        display: none !important;
    }

    /* Auxiliar da utilitaria somenteMobile (secao propria mais abaixo):
       sozinha ela so reaparece em <=768px, mas a gaveta do menu ja vira
       off-canvas aqui em <=1024px. Sem isso o usuario fica sem botao pra
       abrir o menu entre 769px e 1024px. !important pra vencer o
       "display: none !important" que e o padrao da somenteMobile. */
    html:not(.telaPopup) .menuMobile-form {
        display: block !important;
    }

    html:not(.telaPopup) .menuMobile-toggle.ui-button {
        display: inline-flex;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        border: 1px solid #CCCCCC !important;
        border-radius: 9999px !important;
        background: #ffffff !important;
        color: #454f5b !important;
    }

    .menuMobile-toggle.ui-button .ui-button-icon-left {
        position: static;
        margin: 0;
    }

    .menuMobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 315;
        background: rgba(5, 10, 17, .45);
    }

    html.menuMobileAberto:not(.telaPopup) .menuMobile-backdrop {
        display: block;
    }
}

/* Fora desse breakpoint (desktop) o fundo escurecido nunca aparece - o menu
   ja esta sempre visivel. O botao hamburguer (.menuMobile-toggle) nao
   precisa de regra aqui: quem o esconde no desktop e o styleClass
   somenteMobile no form que o envolve (menuMobileForm, em topbar.xhtml),
   secao "UTILITARIAS somenteMobile" mais abaixo. */
.menuMobile-backdrop {
    display: none;
}

@media only screen and (max-width: 768px) {
    body .layout-wrapper .ui-toolbar.topbarPortal {
        min-height: 60px;
        gap: 8px;
        padding: 8px 12px;
    }

    body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-avatarEmpresa,
    body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-usuarioTexto {
        display: none;
    }

    body .layout-wrapper .ui-toolbar.topbarPortal .topbarPortal-empresaNome {
        max-width: 11rem;
    }

    body .layout-wrapper .layout-main .layout-content {
        padding: calc(60px + 1.5rem) 1rem 1rem;
    }
}

/* -------------------------------------------------------------------------
   UTILITARIAS somenteMobile/somenteDesktop

   Reativadas do CSS legado (ficavam comentadas, secao "TELA HOME" mais acima
   neste arquivo) - mesmo par de classes e mesmo breakpoint (768px) do
   mury-cartoes.css do Wcard, pra manter a convencao entre projetos. Poe a
   classe direto no componente (styleClass="somenteMobile") quando ele deve
   sumir no desktop, sem depender de nenhum seletor de .layout-wrapper.

   Atencao: a gaveta do menu lateral (secao "Telas estreitas" acima) vira
   off-canvas a partir de 1024px, mas essa utilitaria so age a partir de
   768px - entre 769px e 1024px um componente marcado somenteMobile continua
   escondido. Pra um botao que abre/fecha a gaveta, ajustar o breakpoint
   junto ou usar largura minima de 1024px ao aplicar a classe.
   ------------------------------------------------------------------------- */

.ocultaDesktop, .somenteMobile {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    .ocultaMobile, .somenteDesktop {
        display: none !important;
    }

    .ocultaDesktop:not(table),
    .somenteMobile:not(table) {
        display: block !important;
    }

    table.ocultaDesktop,
    table.somenteMobile {
        display: table !important;
    }
}


/* =========================================================================
   FONTE DO PROJETO

   O tema Olympia crava "Lato" em `body .ui-widget` e em mais tres seletores
   de input. A variavel --font-family que ele declara no :root nao e usada em
   lugar nenhum (zero ocorrencias de var(--font-family) no theme.css), entao
   nao adianta redefini-la: e preciso repetir os seletores.

   Prefixo `html` so para ganhar especificidade sem depender da ordem em que o
   theme.css e o mury.css entram no head. Nada de curinga aqui: font-family
   com !important em `.ui-widget *` quebraria os icones do FontAwesome e do
   PrimeIcons, que dependem da propria familia.
   ========================================================================= */

html body,
html body .ui-widget,
html body .ui-widget .ui-inputfield,
html body .ui-widget .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label,
html body .ui-widget .ui-selectonemenu .ui-selectonemenu-label,
html body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-input-token input,
html body .ui-chips .ui-chips-container .ui-chips-input-token input {
    font-family: var(--font-sans);
}


/* =========================================================================
   TELAS DE FORA DO SISTEMA (login, nova senha, acesso negado)

   Usam template_login.xhtml, que nao tem menu lateral nem topbar. O tabView
   fica com o visual padrao do tema; quem sinaliza o ambiente e a faixa da
   marca, no topo.
   ========================================================================= */

body.telaExterna {
    min-height: 100vh;
    margin: 0;
    background: #f5f6f8;
}

body.telaExterna .telaExterna-conteudo {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem) 1rem;
}

/* o h:form e os painteis internos precisam acompanhar a centralizacao */
body.telaExterna .telaExterna-conteudo > form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

body.telaExterna .telaExterna-conteudo .panelGeral,
body.telaExterna .telaExterna-conteudo .ui-panelgrid {
    margin-inline: auto;
}

/* ---- faixa da marca: cor e aviso indicam o ambiente ---- */

body.telaExterna .loginMarca {
    display: flex;
    flex-wrap: wrap;
    /* a largura vem inline no login.xhtml, acompanhando a do tabView;
       border-box para o padding nao estourar essa medida */
    box-sizing: border-box;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: clamp(1rem, 3vw, 2rem);
    padding: 14px 26px;
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 36, 95, .18);
}

body.telaExterna .loginMarca-producao {
    background: var(--color-primary);
}

/* qualquer banco que nao seja o de producao */
body.telaExterna .loginMarca-teste {
    background: #A03B3B;
}

body.telaExterna .loginMarca-logo {
    width: auto;
    max-height: 2rem;
}

body.telaExterna .loginMarca-titulo {
    color: #ffffff;
    font-size: clamp(15px, 2.2vw, 20px);
    font-weight: 700;
}

body.telaExterna .loginMarca-ambiente {
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---- linha de informacoes discretas ---- */

body.telaExterna .loginRodapeInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #7e858d;
    font-size: 11px;
    text-align: center;
}

/* =========================================================================
   TELA DE REFERENCIA DOS COMPONENTES (forms/factoring/testes.xhtml)

   So o enquadramento da tela: o objetivo dela e mostrar os componentes com o
   estilo que eles realmente tem no sistema, entao nada aqui deve maquiar
   componente nenhum.
   ========================================================================= */

.testesTitulo {
    margin: 0 0 4px;
    color: #050A11;
    font-size: 1.6rem;
    font-weight: 700;
}

.testesDescricao {
    margin: 0 0 20px;
    color: #666666;
    font-size: 14px;
}

.testesAbas {
    margin-bottom: 24px;
}

/* espaco entre os fieldsets de cada aba */
.testesAbas .ui-fieldset {
    margin-bottom: 18px;
}

/* rotulo a esquerda, campo a direita */
.form-grid .form-label {
    width: 220px;
    font-weight: 600;
    vertical-align: middle;
}

.form-grid .form-field {
    vertical-align: middle;
}

/* respiro entre botoes soltos na mesma linha */
.design-system-demo-row .ui-button,
.testesAbas .ui-fieldset .ui-button {
    margin: 0 6px 6px 0;
}

/* grade de icones */
.testesIcones td {
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
}

.testesIcones i,
.testesIcones span[class^="icone"] {
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
}


/* =========================================================================
   ESPACO INTERNO DOS CAMPOS COM ICONE OU BOTAO SOBREPOSTO

   Mais acima neste arquivo existe:

       body .ui-inputfield { padding: 0.429em !important; }

   Ela e antiga e vale para todos os campos. O problema e que varios
   componentes do PrimeFaces posicionam um botao ou icone por cima do input
   (position: absolute) e contam com um padding maior daquele lado para o
   texto nao passar por baixo. O !important daquela regra apaga essa reserva,
   e o conteudo digitado fica escondido atras do controle - foi o que apareceu
   no p:spinner.

   As regras abaixo devolvem a reserva, com os mesmos valores do tema. Tem
   especificidade maior que a regra generica, entao ganham dela mesmo com os
   dois lados usando !important.
   ========================================================================= */

/* p:spinner - setas de incremento na direita */
body .ui-spinner .ui-spinner-input,
body .ui-fluid .ui-spinner .ui-spinner-input {
    padding-right: 2.857rem !important;
}

/* p:selectCheckboxMenu multiplo - gatilho na direita */
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container {
    padding-right: 2.357rem !important;
}

/* campos com icone declarado (p:inputText dentro de span.ui-input-icon-*) */
body .ui-input-icon-left > .ui-inputfield {
    padding-left: 2rem !important;
}

body .ui-input-icon-right > .ui-inputfield {
    padding-right: 2rem !important;
}

/* caixas de filtro dos overlays: a lupa fica na esquerda */
body .ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-inputfield,
body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-inputfield,
body .ui-selectonelistbox .ui-selectlistbox-filter-container .ui-inputfield,
body .ui-splitbuttonmenu .ui-splitbuttonmenu-filter-container .ui-inputfield,
body .ui-tree .ui-tree-filter-container .ui-inputfield {
    padding-left: 2rem !important;
}

/* p:datePicker/p:calendar em modo fluido: o botao fica fora do input */
body .ui-fluid .ui-trigger-calendar input.hasDatepicker {
    padding-right: 0 !important;
}

/* auxiliares das abas novas da tela de referencia */
.testesGraficos > tbody > tr > td {
    width: 50%;
    vertical-align: top;
}

.testesEspacoBaixo {
    margin-bottom: 8px;
}

.testesSidebar h3 {
    margin: 0 0 12px;
}

/* ============================================================================
   01. TOKENS / VARIAVEIS
   Origem: tokens.css
   Consolidado no mury.css como fonte oficial de design tokens.
   ============================================================================ */

:root {
    color-scheme: light;

    /* Paleta oficial do produto */
    --color-primary: #0047BB;
    --color-dark: #162680;
    --color-border: #CCCCCC;
    --color-muted: #666666;
    --color-text: #050A11;
    --color-black: #000000;
    --color-background: #F7F7F7;
    --color-accent: #D0EA56;
    --color-warning: #FF831D;

    --blue-950: var(--color-dark);
    --blue-900: #00358a;
    --blue-800: #003fa8;
    --blue-700: var(--color-primary);
    --blue-600: #155bc6;
    --blue-500: #2f73d1;
    --blue-100: #dce9ff;
    --blue-50: #eef4ff;

    --lime-600: #b9d93d;
    --lime-500: var(--color-accent);
    --lime-200: #e9f5a9;
    --lime-100: #f4fad5;

    --slate-950: var(--color-text);
    --slate-900: #111820;
    --slate-800: #28313b;
    --slate-700: #454f5b;
    --slate-600: var(--color-muted);
    --slate-500: #7e858d;
    --slate-400: #9ca3ab;
    --slate-300: var(--color-border);
    --slate-200: #e2e5e9;
    --slate-100: #eef0f2;
    --slate-50: var(--color-background);
    --white: #ffffff;

    --green-700: #18794e;
    --green-100: #def6e9;
    --amber-700: #a84b00;
    --amber-500: var(--color-warning);
    --amber-100: #fff0e3;
    --red-700: #b42318;
    --red-100: #fee4e2;
    --violet-700: #6941c6;
    --violet-100: #eee8ff;

    --color-primary-hover: var(--blue-800);
    --color-primary-soft: var(--blue-50);
    --color-surface: var(--white);
    --color-text-secondary: var(--color-muted);
    --color-border-strong: var(--color-border);

    --font-sans: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.625rem;
    --font-size-3xl: 2rem;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 9999px;
    --shadow-xs: 0 1px 2px rgb(5 10 17 / 0.05);
    --shadow-sm: 0 4px 16px rgb(5 10 17 / 0.07);
    --shadow-md: 0 16px 42px rgb(5 10 17 / 0.14);
    --shadow-float: 0 7px 22px rgb(8 3 36 / 0.05);

    --sidebar-width: 16.5rem;
    --sidebar-gap: 2rem; /* respiro do menu ate as bordas da tela */
    --sidebar-collapsed: 5.25rem;
    --topbar-height: 4.5rem;
    --content-max: 100rem;
    --page-gutter: clamp(1.25rem, 2.7vw, 2.4rem);
    --control-height: 2.75rem;
    --transition: 180ms ease;
}

/* ============================================================================
   DESIGN SYSTEM UNIFICADO NO MURY.CSS

   Ordem preservada do antigo main.css:
   01 tokens.css
   02 reset.css (adaptado)
   03 base.css (adaptado)
   04 layout.css
   05 components.css
   06 pages.css
   07 responsive.css

   O main.css deixa de ser necessario porque nao ha mais @imports.
   ============================================================================ */

/* ============================================================================
   02. RESET / NORMALIZACAO
   Origem: reset.css

   O original esta preservado abaixo como referencia, mas regras globais
   perigosas foram adaptadas para nao quebrar PrimeFaces/Olympia.
   ============================================================================ */

/* --- RESET.CSS ORIGINAL - REFERENCIA (INATIVO) ------------------------------
/* *, *::before, *::after { box-sizing: border-box; } */
/* html { min-width: 20rem; font-size: 100%; scroll-behavior: smooth; } */
/* body, h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; } */
/* ul, ol { padding: 0; list-style: none; } */
/* body { min-height: 100vh; } */
/* button, input, select, textarea { font: inherit; } */
/* button { border: 0; } */
/* a { color: inherit; text-decoration: none; } */
/* img, svg { display: block; max-width: 100%; } */
/* table { border-collapse: collapse; border-spacing: 0; } */
/* [hidden] { display: none !important; } 
   --------------------------------------------------------------------------- */

/* Adaptacao ativa para o portal/PrimeFaces.
   Regras globais potencialmente destrutivas (button border:0, a reset,
   table reset etc.) ficam preservadas acima apenas como referencia. */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
}

/* Reset aplicado somente as classes nativas do design system do prototipo. */
.button,
.icon-button,
.nav-item,
.nav-item--button,
.sidebar-collapse-button,
.profile-button,
.profile-tab,
.method-card,
.method-action,
.table-action,
.operation-action,
.action-list button,
.segmented-control button,
.tab {
    font: inherit;
}

.button,
.icon-button,
.nav-item--button,
.sidebar-collapse-button,
.profile-button,
.profile-tab,
.method-card,
.method-action,
.table-action,
.operation-action,
.action-list button,
.segmented-control button,
.tab {
    border: 0;
}

.section-link,
.stat-card--clickable,
.table-link,
.account-dropdown > a {
    color: inherit;
    text-decoration: none;
}

.brand__image,
.icon {
    max-width: 100%;
}

.data-table {
    border-collapse: collapse;
    border-spacing: 0;
}

[hidden] {
    display: none !important;
}

/* ============================================================================
   03. BASE GLOBAL
   Origem: base.css

   O original esta preservado abaixo como referencia. A versao ativa foi
   adaptada para conviver com PrimeFaces/Olympia.
   ============================================================================ */

/* --- BASE.CSS ORIGINAL - REFERENCIA (INATIVO) -------------------------------
/* body { */
/*   overflow-x: hidden; */
/*   background: var(--color-background); */
/*   color: var(--color-text); */
/*   font-family: var(--font-sans); */
/*   font-size: var(--font-size-base); */
/*   line-height: var(--line-height-base); */
/*   text-rendering: optimizeLegibility; */
/*   -webkit-font-smoothing: antialiased; */
/* } */
/* .is-loading *, .is-loading *::before, .is-loading *::after { transition: none !important; animation: none !important; } */
/* .is-loading .sidebar .nav-item { outline: 0 !important; } */
/* .is-loading .icon { visibility: hidden; } */
/* button, a, input, select { -webkit-tap-highlight-color: transparent; } */
/* button, a { transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition); } */
/* button { color: inherit; } */
/* button:not(:disabled), a[href] { cursor: pointer; } */
/* button:disabled { cursor: not-allowed; opacity: 0.56; } */
/* :focus-visible { outline: 3px solid rgb(38 146 199 / 0.32); outline-offset: 2px; } */
/* .page-root:focus, .page-root:focus-visible { outline: 0; } */
/* ::selection { background: var(--blue-100); color: var(--blue-950); } */
/* h1, h2, h3, h4 { color: var(--color-text); font-weight: 700; line-height: var(--line-height-tight); } */
/* h1 { font-size: clamp(1.55rem, 2.2vw, var(--font-size-2xl)); letter-spacing: -0.025em; } */
/* h2 { font-size: var(--font-size-xl); letter-spacing: -0.015em; } */
/* h3 { font-size: var(--font-size-lg); } */
/* p { color: var(--color-text-secondary); } */
/* small { font-size: var(--font-size-xs); } */
/* strong { font-weight: 650; } */
/* .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 200; padding: 0.7rem 1rem; border-radius: var(--radius-md); background: var(--blue-950); color: white; transform: translateY(-160%); } */
/* .skip-link:focus { transform: translateY(0); } */
/* .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 
   --------------------------------------------------------------------------- */

/* Base global segura.
   Mantemos tipografia e comportamento de foco sem zerar estilos estruturais
   dos componentes PrimeFaces. */

html body {
    overflow-x: hidden;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html body button,
html body a,
html body input,
html body select {
    -webkit-tap-highlight-color: transparent;
}

html body button:not(:disabled),
html body a[href] {
    cursor: pointer;
}

html body button:disabled {
    cursor: not-allowed;
}

html body :focus-visible {
    outline: 3px solid rgba(38, 146, 199, 0.32);
    outline-offset: 2px;
}

html body ::selection {
    background: var(--blue-100);
    color: var(--blue-950);
}

/* Tipografia do prototipo limitada as areas de pagina e telas externas
   para nao alterar cabecalhos internos de widgets PrimeFaces. */
html body .page h1,
html body .page h2,
html body .page h3,
html body .page h4,
html body.telaExterna h1,
html body.telaExterna h2,
html body.telaExterna h3,
html body.telaExterna h4 {
    color: var(--color-text);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

html body .page h1,
html body.telaExterna h1 {
    font-size: clamp(1.55rem, 2.2vw, var(--font-size-2xl));
    letter-spacing: -0.025em;
}

html body .page h2,
html body.telaExterna h2 {
    font-size: var(--font-size-xl);
    letter-spacing: -0.015em;
}

html body .page h3,
html body.telaExterna h3 {
    font-size: var(--font-size-lg);
}

html body .page p,
html body.telaExterna p {
    color: var(--color-text-secondary);
}

html body .page small,
html body.telaExterna small {
    font-size: var(--font-size-xs);
}

html body .page strong,
html body.telaExterna strong {
    font-weight: 650;
}

/* Transicoes somente para elementos do design system, evitando interferir
   no comportamento interno de widgets PrimeFaces ainda nao homologados. */
.button,
.icon-button,
.nav-item,
.nav-item--button,
.sidebar-collapse-button,
.profile-button,
.profile-tab,
.method-card,
.method-action,
.table-action,
.operation-action,
.action-list button,
.segmented-control button,
.tab,
.section-link,
.table-link {
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        opacity var(--transition),
        transform var(--transition);
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 200;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    background: var(--blue-950);
    color: white;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   04. LAYOUT DO PROTOTIPO
   Origem: layout.css
   ============================================================================ */

.app-shell {
    min-height: 100vh;
}
.sidebar {
    position: fixed;
    inset: 1rem auto 1rem 1rem;
    z-index: 60;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 1.5rem;
    background: var(--blue-700);
    color: rgb(255 255 255 / 0.86);
    box-shadow: 0 18px 45px rgb(0 36 95 / 0.2);
    transition: width var(--transition), transform var(--transition);
}
.sidebar__header {
    display: flex;
    min-height: 5.6rem;
    align-items: center;
    padding: var(--space-4) var(--space-5);
}
.brand {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
}
.brand__image {
    display: block;
    width: auto;
    max-width: 11.5rem;
    max-height: 3.35rem;
    object-fit: contain;
}
.brand__image--collapsed {
    display: none;
    max-width: 2.65rem;
    max-height: 2.65rem;
}
.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3) var(--space-5);
    scrollbar-width: thin;
}
.nav-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.85rem;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 0.35rem;
    padding: 0.68rem var(--space-4);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    color: rgb(255 255 255 / 0.87);
    text-align: left;
    white-space: nowrap;
}
.nav-item:hover {
    background: rgb(255 255 255 / 0.12);
    color: white;
}
.nav-item.is-active {
    background: var(--lime-500);
    color: var(--slate-950);
    box-shadow: 0 6px 18px rgb(0 38 95 / 0.2);
}
.nav-item--primary {
    margin-bottom: var(--space-5);
    border-color: var(--lime-500);
    background: transparent;
    color: var(--lime-500);
    font-weight: 400;
    box-shadow: none;
}
.nav-item--primary:hover, .nav-item--primary.is-active {
    border-color: var(--lime-500);
    background: rgb(208 234 86 / 0.12);
    color: var(--lime-500);
    box-shadow: none;
}
.nav-item--button {
    border: 0;
    background: transparent;
    font: inherit;
}
.nav-item--support {
    margin-bottom: var(--space-2);
}
.nav-item__icon {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    flex: 0 0 auto;
    place-items: center;
}
.nav-item__icon .icon {
    font-size: 1.4rem;
}
.nav-item__label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-item__badge {
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    margin-left: auto;
    padding-inline: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-warning);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 800;
}
.sidebar__footer {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid rgb(255 255 255 / 0.14);
}
.sidebar .icon-button {
    color: rgb(255 255 255 / 0.8);
}
.sidebar .icon-button:hover {
    background: rgb(255 255 255 / 0.12);
    color: white;
}
.sidebar-version {
    min-height: 1.7rem;
    padding: 0.25rem var(--space-3);
    color: rgb(255 255 255 / 0.58);
    font-size: 0.68rem;
    text-align: center;
}
.sidebar-version strong {
    color: inherit;
    font-weight: 700;
}
.sidebar-version__collapsed {
    display: none;
}
.sidebar-collapse-button {
    display: flex;
    width: 100%;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    background: rgb(0 36 95 / 0.24);
    color: rgb(255 255 255 / 0.78);
    font-size: var(--font-size-xs);
    font-weight: 650;
}
.sidebar-collapse-button:hover {
    background: rgb(0 36 95 / 0.42);
    color: white;
}
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    visibility: hidden;
    background: rgb(5 10 17 / 0.52);
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
}
.workspace {
    min-height: 100vh;
    margin-left: calc(var(--sidebar-width) + 1rem);
    transition: margin-left var(--transition);
}
.topbar {
    position: fixed !important;
    top: var(--space-4);
    right: var(--page-gutter);
    left: calc(var(--sidebar-width) + 1rem + var(--page-gutter));
    z-index: 40;
    display: flex;
    width: auto;
    max-width: calc(var(--content-max) - var(--page-gutter) - var(--page-gutter));
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-inline: auto;
    padding: 0 clamp(1rem, 2.4vw, 2rem);
    border: 0;
    border-radius: var(--radius-xl);
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 8px 24px rgb(8 3 36 / 0.055);
    backdrop-filter: blur(14px);
    transform: translateZ(0);
    transition: left var(--transition), box-shadow var(--transition);
}
.topbar__start, .topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.topbar .topbar__menu {
    display: none;
}
.topbar__actions > .icon-button.has-notification .icon {
    font-size: 1.4rem;
}
.company-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-pill);
    color: var(--slate-600);
}
.company-switcher__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-700);
}
.company-switcher > span:nth-child(2) {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}
.company-switcher small {
    color: var(--slate-500);
}
.company-switcher strong {
    max-width: 20rem;
    overflow: hidden;
    color: var(--slate-800);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-pill);
    background: transparent;
    text-align: left;
}
.profile-button:hover {
    background: var(--slate-50);
}
.profile-button__copy {
    display: grid;
    line-height: 1.2;
}
.profile-button__copy strong {
    color: var(--slate-800);
    font-size: var(--font-size-sm);
}
.profile-button__copy small {
    color: var(--slate-500);
}
.account-menu-wrap {
    position: relative;
}
.account-dropdown {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 80;
    width: 15.5rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-md);
}
.account-dropdown[hidden] {
    display: none;
}
.account-dropdown__header {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-4);
    border-bottom: 0;
}
.account-dropdown__header strong {
    color: var(--slate-900);
    font-size: var(--font-size-sm);
}
.account-dropdown__header small {
    overflow: hidden;
    color: var(--slate-500);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-dropdown > a, .account-dropdown > button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: 0.75rem var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--slate-700);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
}
.account-dropdown > a:hover, .account-dropdown > button:hover {
    background: var(--slate-50);
    color: var(--blue-700);
}
.account-dropdown .icon {
    width: 1rem;
    color: var(--slate-500);
    text-align: center;
}
.account-menu-wrap.is-open .profile-button {
    background: var(--slate-50);
}
.account-menu-wrap.is-open .profile-button__chevron .icon {
    transform: rotate(180deg);
}
.page-root {
    width: min(100%, var(--content-max));
    min-height: 100vh;
    margin-inline: auto;
    padding: calc(var(--topbar-height) + var(--space-8)) var(--page-gutter) var(--page-gutter);
}
.page {
    min-width: 0;
    animation: page-in 260ms ease both;
}
@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
.page-header__copy {
    display: grid;
    gap: 0.35rem;
}
.titulo-mury {
    font-weight: 700 !important;
    line-height: var(--line-height-tight) !important;
    font-size: var(--font-size-2xl) !important;
    color: var(--color-text) !important;
}
.subtitulo-mury {
    max-width: 48rem !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text-secondary) !important;
}
.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}
.content-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
}
.content-grid > * {
    min-width: 0;
}
.content-grid--two {
    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 0.8fr);
}
.content-grid--equal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar.is-collapsed {
    width: var(--sidebar-collapsed);
}
.sidebar.is-collapsed + .sidebar-backdrop + .workspace {
    margin-left: calc(var(--sidebar-collapsed) + 1rem);
}
.sidebar.is-collapsed + .sidebar-backdrop + .workspace .topbar {
    left: calc(var(--sidebar-collapsed) + 1rem + var(--page-gutter));
}
.sidebar.is-collapsed .brand__image--expanded {
    display: none;
}
.sidebar.is-collapsed .brand__image--collapsed {
    display: block;
}
.sidebar.is-collapsed .nav-item__label, .sidebar.is-collapsed .nav-item__badge, .sidebar.is-collapsed .sidebar-collapse-button__label, .sidebar.is-collapsed .sidebar-version__expanded {
    display: none;
}
.sidebar.is-collapsed .sidebar-version__collapsed {
    display: inline;
}
.sidebar.is-collapsed .sidebar__header {
    justify-content: center;
    padding-inline: var(--space-3);
}
.sidebar.is-collapsed .nav-item {
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
    justify-content: center;
    margin-inline: auto;
    padding: 0;
    border-radius: 50%;
}
.sidebar.is-collapsed .nav-item--primary {
    margin-bottom: var(--space-5);
}
.sidebar.is-collapsed .sidebar-collapse-button .icon {
    transform: rotate(180deg);
}

/* ============================================================================
   05. COMPONENTES DO DESIGN SYSTEM
   Origem: components.css
   ============================================================================ */

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: normal;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}
.icon-button {
    position: relative;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--slate-600);
}
.icon-button:hover {
    background: var(--slate-100);
    color: var(--blue-800);
}
.has-notification::after {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 0.45rem;
    height: 0.45rem;
    border: 2px solid white;
    border-radius: 50%;
    background: #e85555;
    content: "";
}
.avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--blue-800);
    font-size: var(--font-size-xs);
    font-weight: 800;
}
.button {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.68rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.button:hover:not(:disabled) {
    transform: translateY(-1px);
}
.button--primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 5px 14px rgb(23 96 143 / 0.2);
}
.button--primary:hover {
    background: var(--color-primary-hover);
}
.button--secondary {
    border-color: var(--color-border-strong);
    background: var(--white);
    color: var(--slate-700);
}
.button--secondary:hover {
    border-color: var(--blue-300, #8bc5e2);
    background: var(--blue-50);
    color: var(--blue-800);
}
.button--ghost {
    background: transparent;
    color: var(--blue-700);
}
.button--ghost:hover {
    background: var(--blue-50);
}
.button--danger {
    background: var(--red-100);
    color: var(--red-700);
}
.button--sm {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-xs);
}
.card {
    min-width: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
}
.card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
}
.card__header-copy {
    display: grid;
    gap: 0.25rem;
}
.card__header-copy p {
    font-size: var(--font-size-sm);
}
.card__body {
    padding: 0 var(--space-5) var(--space-5);
}
.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--blue-700);
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.section-link:hover {
    color: var(--blue-900);
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.stat-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-float);
}
.stat-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--stat-accent, var(--blue-600));
    content: "";
}
.stat-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.stat-card__label {
    color: var(--slate-600);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.stat-card__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--stat-soft, var(--blue-50));
    color: var(--stat-accent, var(--blue-700));
}
.stat-card__value {
    display: block;
    margin-top: var(--space-4);
    color: var(--slate-950);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -0.035em;
}
.stat-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.stat-card--green {
    --stat-accent: var(--green-700);
    --stat-soft: var(--green-100);
}
.stat-card--amber {
    --stat-accent: var(--amber-700);
    --stat-soft: var(--amber-100);
}
.stat-card--violet {
    --stat-accent: var(--violet-700);
    --stat-soft: var(--violet-100);
}
.badge {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    gap: 0.38rem;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-700);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}
.badge::before {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}
.badge--review {
    background: var(--amber-100);
    color: var(--amber-700);
}
.badge--approved {
    background: var(--blue-100);
    color: var(--blue-800);
}
.badge--paid, .badge--valid {
    background: var(--green-100);
    color: var(--green-700);
}
.badge--rejected, .badge--error {
    background: var(--red-100);
    color: var(--red-700);
}
.badge--signature {
    background: var(--violet-100);
    color: var(--violet-700);
}
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--slate-50);
}
.alert__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
}
.alert__copy {
    display: grid;
    flex: 1;
    gap: 0.2rem;
}
.alert__copy strong {
    color: var(--slate-900);
}
.alert__copy p {
    font-size: var(--font-size-sm);
}
.alert__action {
    align-self: center;
}
.alert--warning {
    border-color: #f0d99e;
    background: #fffbef;
}
.alert--warning .alert__icon {
    background: var(--amber-100);
    color: var(--amber-700);
}
.alert--info {
    border-color: #c4e2f1;
    background: var(--blue-50);
}
.alert--info .alert__icon {
    background: var(--blue-100);
    color: var(--blue-800);
}
.alert--danger {
    border-color: #f1caca;
    background: #fff6f6;
}
.alert--danger .alert__icon {
    background: var(--red-100);
    color: var(--red-700);
}
.table-wrap {
    width: 100%;
    overflow-x: auto;
}
.data-table {
    width: 100%;
    min-width: 46rem;
}
.data-table th {
    padding: 0.78rem var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--slate-500);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.data-table td {
    padding: 0.9rem var(--space-4);
    border-bottom: 1px solid var(--slate-100);
    color: var(--slate-700);
    font-size: var(--font-size-sm);
    vertical-align: middle;
}
.data-table tbody tr:last-child td {
    border-bottom: 0;
}
.data-table tbody tr[data-clickable] {
    cursor: pointer;
}
.data-table tbody tr[data-clickable]:hover {
    background: var(--blue-50);
}
.data-table .cell-primary {
    color: var(--slate-900);
    font-weight: 700;
}
.data-table .cell-money {
    color: var(--slate-900);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}
.data-table .cell-positive {
    color: var(--green-700);
}
.data-table .cell-negative {
    color: var(--red-700);
}
.table-empty {
    padding: var(--space-10) !important;
    color: var(--slate-500) !important;
    text-align: center;
}
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.pagination-buttons {
    display: flex;
    gap: var(--space-1);
}
.pagination-buttons .icon-button {
    width: 2rem;
    height: 2rem;
}
.field {
    display: grid;
    gap: 0.45rem;
}
.field label, .field__label {
    color: var(--slate-700);
    font-size: var(--font-size-sm);
    font-weight: 650;
}
.field__hint {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
/* Fonte menor só no painel de entrada manual de título (pedido do usuário,
   não é o padrão do projeto — não usar #form\:panelEntrada em outra tela). */
#form\:panelEntrada .field__label {
    font-size: var(--font-size-xs);
}
#form\:panelEntrada .ui-inputtext,
#form\:panelEntrada .ui-selectonemenu,
#form\:panelEntrada .ui-inputnumber-input {
    font-size: var(--font-size-sm);
}
/* Botão Incluir 100% da largura no mobile (mesmo painel, pedido do usuário). */
@media only screen and (max-width: 768px) {
    #form\:panelEntrada .ds-table-actions {
        display: flex !important;
        width: 100%;
    }
    #form\:btnIncluir {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    /* Painel do select de Cliente vazava a tela no mobile (o JS do p:selectOneMenu
       calcula a largura do painel a partir do texto sem quebra) - mesmo problema e
       mesma solução do .tipoUsuarioPainel (cadastro de usuários). */
    html body .clienteEntradaPainel {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem);
        left: 0.5rem !important;
        box-sizing: border-box;
    }
    html body .clienteEntradaPainel .ui-selectonemenu-items-wrapper {
        overflow-x: hidden;
    }
    html body .clienteEntradaPainel .ui-selectonemenu-item {
        white-space: normal !important;
    }
}

/* Campo composto: número + dígito verificador (nº conta, nº título...) lado a lado. */
.campo-composto {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.campo-composto > .ui-inputfield:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
.campo-composto > .ui-inputfield:last-child {
    flex: 0 0 3rem;
}
.input, .select, .textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    outline: 0;
    background: var(--white);
    color: var(--slate-900);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder {
    color: var(--slate-400);
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgb(38 146 199 / 0.14);
}
.input-wrap {
    position: relative;
}
.input-wrap .input {
    padding-left: 2.55rem;
}
.input-wrap > svg, .input-wrap > .icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    width: 1rem;
    height: 1rem;
    color: var(--slate-400);
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}
.select {
    padding-right: 2.4rem;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--slate-500) 50%), linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}
.textarea {
    min-height: 7rem;
    resize: vertical;
}
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.field-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-float);
}
.filter-bar .field {
    min-width: 10rem;
}
.filter-bar .field--search {
    min-width: min(24rem, 100%);
    flex: 1;
}
.segmented-control {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--slate-100);
}
.segmented-control button {
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    border-radius: calc(var(--radius-md) - 0.18rem);
    background: transparent;
    color: var(--slate-600);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
.segmented-control button:hover {
    color: var(--blue-800);
}
.segmented-control button.is-active {
    background: white;
    color: var(--blue-800);
    box-shadow: var(--shadow-xs);
}
.tabs {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    border-bottom: 0;
}
.tab {
    position: relative;
    flex: 0 0 auto;
    padding: var(--space-3) 0;
    background: transparent;
    color: var(--slate-500);
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.tab.is-active {
    color: var(--blue-800);
}
.tab.is-active::after {
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--blue-700);
    content: "";
}
.metric-list {
    display: grid;
    gap: var(--space-1);
}
.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--slate-100);
}
.metric-row:last-child {
    border-bottom: 0;
}
.metric-row span {
    color: var(--slate-600);
    font-size: var(--font-size-sm);
}
.metric-row strong {
    color: var(--slate-900);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}
.metric-row--total {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 0;
}
.metric-row--total span, .metric-row--total strong {
    color: var(--blue-900);
    font-size: var(--font-size-md);
    font-weight: 800;
}
.drawer-layer, .modal-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
    background: rgb(8 24 40 / 0.48);
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
}
.drawer-layer.is-open, .modal-layer.is-open {
    visibility: visible;
    opacity: 1;
}
.drawer {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    width: min(31rem, 100%);
    flex-direction: column;
    background: white;
    box-shadow: -16px 0 50px rgb(8 24 40 / 0.18);
    transform: translateX(100%);
    transition: transform 240ms ease;
}
.drawer-layer.is-open .drawer {
    transform: translateX(0);
}
.drawer__header, .drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.drawer__header-copy {
    display: grid;
    gap: 0.25rem;
}
.drawer__header-copy p {
    font-size: var(--font-size-sm);
}
.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}
.drawer__footer {
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
}
.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(34rem, calc(100% - 2rem));
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: white;
    box-shadow: var(--shadow-md);
    transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
    transition: transform 220ms ease;
}
.modal-layer.is-open .modal {
    transform: translate(-50%, -50%) scale(1);
}
.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.modal__body {
    padding: var(--space-5);
}
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--slate-50);
}
.toast-region {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 140;
    display: grid;
    width: min(23rem, calc(100% - 2rem));
    gap: var(--space-3);
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid #cde6d8;
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-md);
    animation: toast-in 220ms ease both;
}
.toast__icon {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
}
.toast__copy {
    display: grid;
    flex: 1;
    gap: 0.1rem;
}
.toast__copy p {
    font-size: var(--font-size-xs);
}
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}
/* Componentes da versão atual do Codex */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    line-height: 1;
}
.icon-button .icon {
    font-size: 1rem;
}
.button .icon {
    font-size: 0.95rem;
}
.button--accent {
    background: var(--lime-500);
    color: var(--slate-950);
    box-shadow: 0 5px 16px rgb(0 38 95 / 0.18);
}
.button--accent:hover {
    background: #dbf36e;
}
.stat-card--clickable {
    display: block;
    color: inherit;
}
.stat-card--clickable:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.stat-card--clickable .stat-card__meta {
    color: var(--blue-700);
    font-weight: 700;
}
.badge--bought, .badge--paid, .badge--valid {
    background: var(--green-100);
    color: var(--green-700);
}
.badge--draft {
    background: var(--slate-100);
    color: var(--slate-700);
}
.badge--open {
    background: var(--blue-100);
    color: var(--blue-800);
}
.badge--overdue {
    background: var(--amber-100);
    color: var(--amber-700);
}
.badge--returned {
    background: var(--red-100);
    color: var(--red-700);
}
.badge--type {
    background: var(--slate-100);
    color: var(--slate-700);
}
.badge--type::before {
    display: none;
}
.cell-nowrap {
    white-space: nowrap;
}
.cell-company {
    display: grid;
    min-width: 11rem;
    gap: 0.1rem;
}
.cell-company strong {
    color: var(--slate-900);
    font-size: var(--font-size-sm);
}
.cell-company small {
    color: var(--slate-500);
}
.installment-badge {
    display: inline-grid;
    min-width: 2.4rem;
    place-items: center;
    padding: 0.28rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--blue-50);
    color: var(--blue-800);
    font-size: var(--font-size-xs);
    font-weight: 800;
}
.table-link {
    color: var(--blue-700);
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: rgb(0 71 187 / 0.24);
    text-underline-offset: 0.18rem;
}
.table-link:hover {
    color: var(--blue-900);
    text-decoration-color: currentColor;
}
.table-action {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: white;
    color: var(--blue-700);
}
.table-action:hover {
    border-color: var(--blue-700);
    background: var(--blue-50);
}
.table-action .icon {
    font-size: 0.85rem;
}
.operation-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.operation-action {
    position: relative;
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--slate-50);
    color: var(--blue-700);
}
.operation-action:hover, .operation-action:focus-visible {
    background: var(--blue-700);
    color: var(--white);
}
.operation-action .icon {
    font-size: 1rem;
}
.operation-action::after {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 0.5rem);
    z-index: 20;
    width: max-content;
    max-width: 13rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--color-dark);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    content: attr(data-tooltip);
    opacity: 0;
    pointer-events: none;
    transform: translate(50%, 0.2rem);
    transition: opacity var(--transition), transform var(--transition);
}
.operation-action:hover::after, .operation-action:focus-visible::after {
    opacity: 1;
    transform: translate(50%, 0);
}
/* sem data-tooltip o balao nasce vazio (content: attr) e aparecia como uma
   bolha escura no hover - so existe quando o botao traz o texto */
.operation-action:not([data-tooltip])::after {
    display: none;
}
/* alerta de pendencia (ex.: sino com notificacao nao lida): bolinha vermelha
   no canto do botao. Reaproveita o ::after do tooltip, por isso zera o que
   ele posiciona/anima, inclusive no hover. */
html body .ui-button.operation-action.has-notification::after {
    display: block;
    top: 0.3rem;
    right: 0.3rem;
    bottom: auto;
    width: 0.45rem;
    height: 0.45rem;
    max-width: none;
    padding: 0;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: #e85555;
    content: "";
    opacity: 1;
    transform: none;
}
.rows-per-page {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
}
.rows-per-page .select {
    width: 5rem;
    min-height: 2.25rem;
    padding-block: 0.35rem;
    font-size: var(--font-size-xs);
}
.pagination-current {
    display: inline-flex;
    min-width: 3.5rem;
    align-items: center;
    justify-content: center;
    color: var(--slate-600);
}
.action-list {
    display: grid;
    gap: var(--space-2);
}
.action-list button {
    display: flex;
    width: 100%;
    min-height: 2.8rem;
    align-items: center;
    gap: var(--space-3);
    padding: 0.7rem var(--space-3);
    border-radius: var(--radius-md);
    background: white;
    color: var(--slate-700);
    text-align: left;
}
.action-list button:hover {
    background: var(--blue-50);
    color: var(--blue-800);
}
.modal--large {
    width: min(52rem, calc(100% - 2rem));
}
.document-preview {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    text-align: center;
}
.document-preview > .icon {
    color: var(--blue-700);
    font-size: 3rem;
}
.document-preview p {
    max-width: 30rem;
}
.pix-preview {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    text-align: center;
}
.pix-preview__code {
    display: grid;
    width: 7rem;
    height: 7rem;
    place-items: center;
    border: 0.65rem solid var(--slate-950);
    border-radius: var(--radius-sm);
    color: var(--slate-950);
}
.pix-preview__code .icon {
    font-size: 4.3rem;
}
.pix-preview code {
    max-width: 100%;
    padding: var(--space-3);
    overflow-wrap: anywhere;
    border-radius: var(--radius-md);
    background: var(--slate-100);
    color: var(--slate-900);
}
.document-item__icon--signed {
    background: var(--green-100);
    color: var(--green-700);
}
.field-link {
    display:block;
    margin-bottom:.35rem;
    padding:0;
    border:0;
    background:none;
    color:var(--color-primary);
    text-decoration:underline;
    font:inherit;
    cursor:pointer;
    text-align:left;
}
.dialog-upload {
    display:grid;
    gap:.5rem;
    justify-items:center;
    padding:2rem;
    border:1px dashed var(--color-border);
    border-radius:1rem;
    text-align:center;
    background:var(--color-background);
}
.dialog-upload span {
    color:var(--color-primary);
    font-size:2rem;
}
.filter-toggle {
    margin: 0 0 var(--space-3) auto;
}
.switch-field {
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:600;
}
.switch-field input[type="checkbox"] {
    appearance:none;
    width:1.15rem;
    height:1.15rem;
    margin:0;
    border:2px solid var(--color-border);
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    display:grid;
    place-content:center;
}
.switch-field input[type="checkbox"]::before {
    content:"";
    width:.55rem;
    height:.55rem;
    border-radius:50%;
    background:var(--color-primary);
    transform:scale(0);
    transition:transform .12s ease;
}
.switch-field input[type="checkbox"]:checked {
    border-color:var(--color-primary);
}
.switch-field input[type="checkbox"]:checked::before {
    transform:scale(1);
}
.interface-preferences {
    max-width: 52rem;
}
.preference-group {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    padding:1.25rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-background);
}
.preference-group h3 {
    margin:0 0 .35rem;
    font-size:var(--font-size-md);
}
.preference-group p {
    margin:0;
    color:var(--color-muted);
    font-size:var(--font-size-sm);
}
.interface-preferences .card__footer {
    justify-content:flex-end;
    margin-top:1.5rem;
    padding:0;
    border:0;
}
@media (max-width: 640px) {
    .preference-group {
        align-items:flex-start;
        flex-direction:column;
        gap:1rem;
    }
}

/* ============================================================================
   06. PAGINAS / COMPONENTES ESPECIFICOS
   Origem: pages.css
   ============================================================================ */

.welcome-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--blue-800), var(--blue-950));
    color: white;
    box-shadow: var(--shadow-sm);
}
.welcome-band__copy {
    display: grid;
    gap: var(--space-2);
}
.welcome-band__copy h1 {
    color: white;
    font-size: 1.4rem;
}
.welcome-band__copy p {
    color: rgb(255 255 255 / 0.68);
}
.welcome-band__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: rgb(255 255 255 / 0.72);
    font-size: var(--font-size-xs);
}
.welcome-band__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.dashboard-stack {
    display: grid;
    gap: var(--space-6);
}
.pending-list {
    display: grid;
    gap: var(--space-3);
}
.pending-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--slate-50);
}
.pending-item__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--amber-100);
    color: var(--amber-700);
}
.pending-item__copy {
    display: grid;
    gap: 0.1rem;
}
.pending-item__copy strong {
    color: var(--slate-900);
    font-size: var(--font-size-sm);
}
.pending-item__copy span {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.operation-id {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.operation-id__mark {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--blue-50);
    color: var(--blue-800);
}
.operation-id__copy {
    display: grid;
    gap: 0.05rem;
}
.operation-id__copy small {
    color: var(--slate-500);
}
.operation-toolbar {
    margin-bottom: var(--space-5);
}
.page[data-page="operacoes"] .page-header__actions .button--accent {
    border-radius: var(--radius-pill);
}
.page[data-page="operacoes"] .operation-toolbar .button--secondary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.page[data-page="operacoes"] .operations-table th, .page[data-page="operacoes"] .operations-table td {
    padding-block: 0.62rem;
}
.page[data-page="operacoes"] .operations-table {
    min-width: 66rem;
}
.page[data-page="operacoes"] .operations-card .card__header {
    align-items: center;
    padding-block: 1rem;
}
.page[data-page="operacoes"] .operations-card .table-wrap {
    overflow: visible;
}
.page[data-page="operacoes"] .page-header__actions .button--accent {
    box-shadow: none;
    color: var(--color-dark);
}
.page[data-page="operacoes"] .operations-table th:nth-child(7), .page[data-page="operacoes"] .operations-table td:nth-child(7) {
    padding-right: 0.35rem;
}
.page[data-page="operacoes"] .operations-table th:nth-child(8), .page[data-page="operacoes"] .operations-table td:nth-child(8) {
    padding-left: 0.35rem;
}
.page[data-page="operacoes"] .operation-id__mark {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
}
.page[data-page="operacoes"] .operation-id__mark .icon {
    font-size: 1.35rem;
}
.page[data-page="detail"] > .alert--warning {
    margin-bottom: 1.35rem;
    border-color: rgb(74 139 75 / 0.55);
    background: rgb(208 234 86 / 0.16);
}
.page[data-page="detail"] > .alert--warning .alert__icon {
    background: rgb(208 234 86 / 0.45);
    color: var(--green-700);
}
.page[data-page="detail"] > .alert--warning .button--accent {
    box-shadow: none;
    color: var(--color-dark);
}
.page[data-page="detail"] .detail-receivables .card__body {
    padding-inline: 1.25rem;
}
.page[data-page="detail"] .detail-receivables .table-wrap {
    overflow: visible;
}
.page[data-page="detail"] .detail-receivables .data-table {
    min-width: 0;
}
.page[data-page="detail"] .detail-receivables .data-table th, .page[data-page="detail"] .detail-receivables .data-table td {
    padding-inline: 0.75rem;
}
.page[data-page="detail"] .detail-documents {
    order: -1;
}
.operation-count {
    color: var(--slate-500);
    font-size: var(--font-size-sm);
}
.detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-xl);
    background: white;
    box-shadow: var(--shadow-float);
}
.detail-hero__main {
    display: grid;
    gap: var(--space-4);
}
.detail-hero__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}
.detail-hero__meta span {
    display: grid;
    gap: 0.15rem;
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.detail-hero__meta strong {
    color: var(--slate-800);
    font-size: var(--font-size-sm);
}
.detail-hero__amount {
    display: grid;
    min-width: 13rem;
    align-content: center;
    justify-items: end;
    gap: 0.3rem;
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border);
}
.detail-hero__amount span {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.detail-hero__amount strong {
    color: var(--blue-900);
    font-size: 1.65rem;
}
.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-4) var(--space-3);
}
.timeline__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    color: var(--slate-400);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-align: center;
}
.timeline__step::before {
    position: absolute;
    top: 0.7rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--slate-200);
    content: "";
}
.timeline__step:first-child::before {
    display: none;
}
.timeline__dot {
    position: relative;
    z-index: 1;
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 2px solid var(--slate-300);
    border-radius: 50%;
    background: white;
}
.timeline__step.is-complete {
    color: var(--green-700);
}
.timeline__step.is-current {
    color: var(--blue-800);
}
.timeline__step.is-complete::before {
    background: var(--green-700);
}
.timeline__step.is-current::before {
    background: var(--blue-600);
}
.timeline__step.is-complete .timeline__dot {
    border-color: var(--green-700);
    background: var(--green-700);
    color: white;
}
.timeline__step.is-current .timeline__dot {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 4px var(--blue-100);
}
.timeline__dot .icon {
    display: block;
    font-size: 1rem;
    line-height: 1;
}
.history-list {
    display: grid;
}
.history-item {
    position: relative;
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: 0 0 var(--space-5) var(--space-6);
}
.history-item::before {
    position: absolute;
    top: 0.45rem;
    bottom: -0.45rem;
    left: 0.42rem;
    width: 1px;
    background: var(--slate-200);
    content: "";
}
.history-item:last-child::before {
    display: none;
}
.history-item::after {
    position: absolute;
    top: 0.35rem;
    left: 0;
    width: 0.85rem;
    height: 0.85rem;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--blue-600);
    box-shadow: 0 0 0 1px var(--blue-600);
    content: "";
}
.history-item time {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.history-item__copy {
    display: grid;
    gap: 0.15rem;
}
.history-item__copy strong {
    font-size: var(--font-size-sm);
}
.history-item__copy p {
    font-size: var(--font-size-xs);
}
.creation-layout {
    display: grid;
    gap: var(--space-6);
}
.stepper-card {
    display: grid;
    min-height: 6.5rem;
    align-items: center;
    padding: var(--space-5);
}
.stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stepper__step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    color: var(--slate-400);
}
.stepper__step::before {
    position: absolute;
    top: 1.15rem;
    right: calc(100% - 0.1rem);
    width: calc(100% - 2.6rem);
    height: 2px;
    background: var(--slate-200);
    content: "";
}
.stepper__step:first-child::before {
    display: none;
}
.stepper__number {
    position: relative;
    z-index: 1;
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 2px solid var(--slate-300);
    border-radius: 50%;
    background: white;
    font-size: var(--font-size-sm);
    font-weight: 800;
}
.stepper__copy {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}
.stepper__copy strong {
    color: currentColor;
    font-size: var(--font-size-sm);
}
.stepper__copy small {
    color: var(--slate-400);
}
.stepper__step.is-active, .stepper__step.is-complete {
    color: var(--blue-800);
}
.stepper__step.is-active .stepper__number {
    border-color: var(--blue-700);
    background: var(--blue-700);
    color: white;
    box-shadow: 0 0 0 4px var(--blue-100);
}
.stepper__step.is-complete .stepper__number {
    border-color: var(--green-700);
    background: var(--green-700);
    color: white;
}
.stepper__step.is-complete::before, .stepper__step.is-active::before {
    background: var(--green-700);
}
.method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.method-card {
    display: grid;
    min-height: 14rem;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-float);
    text-align: left;
}
.method-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--blue-100);
    color: var(--blue-800);
}
.method-card h3 {
    margin-top: var(--space-2);
}
.method-card p {
    font-size: var(--font-size-sm);
}
.method-card__formats {
    display: flex;
    gap: var(--space-2);
    margin-top: auto;
}
.method-card__formats span {
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
.upload-zone {
    display: grid;
    min-height: 15rem;
    place-items: center;
    padding: var(--space-8);
    border: 2px dashed var(--slate-300);
    border-radius: var(--radius-lg);
    background: var(--slate-50);
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}
.upload-zone:hover, .upload-zone.is-dragover {
    border-color: var(--blue-600);
    background: var(--blue-50);
}
.upload-zone__content {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
}
.upload-zone__icon {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--blue-800);
}
.upload-zone p {
    max-width: 30rem;
    font-size: var(--font-size-sm);
}
.review-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}
.review-summary__item {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--slate-50);
}
.review-summary__item span {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.review-summary__item strong {
    color: var(--slate-900);
    font-size: var(--font-size-md);
}
.review-summary__item--highlight {
    background: var(--blue-50);
}
.review-summary__item--highlight strong {
    color: var(--blue-900);
}
.statement-hero {
    display: grid;
    grid-template-columns: 1.35fr repeat(2, 0.8fr);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--blue-950), var(--blue-800));
    color: white;
    box-shadow: var(--shadow-sm);
}
.statement-hero__balance, .statement-hero__metric {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: var(--space-6);
}
.statement-hero__balance span, .statement-hero__metric span {
    color: rgb(255 255 255 / 0.62);
    font-size: var(--font-size-xs);
}
.statement-hero__balance strong {
    font-size: clamp(1.75rem, 3vw, 2.3rem);
    letter-spacing: -0.04em;
}
.statement-hero__metric {
    border-left: 1px solid rgb(255 255 255 / 0.14);
}
.statement-hero__metric strong {
    font-size: var(--font-size-lg);
}
.statement-hero__metric small {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 650;
}
.statement-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
    gap: var(--space-6);
}
.profile-section {
    display: grid;
    gap: var(--space-4);
}
.profile-section + .profile-section {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}
.detail-item {
    display: grid;
    gap: 0.25rem;
}
.detail-item dt {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.detail-item dd {
    overflow-wrap: anywhere;
    color: var(--slate-900);
    font-size: var(--font-size-sm);
    font-weight: 650;
}
.profile-completion {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    text-align: center;
}
.progress-ring {
    display: grid;
    width: 7.5rem;
    height: 7.5rem;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--blue-600) 0 92%, var(--slate-100) 92% 100%);
}
.progress-ring__inner {
    display: grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    border-radius: 50%;
    background: white;
    color: var(--blue-900);
    font-size: 1.4rem;
    font-weight: 800;
}
.document-list {
    display: grid;
    gap: var(--space-3);
}
.document-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--slate-50);
}
.document-item__icon {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--red-100);
    color: var(--red-700);
}
.document-item__copy {
    display: grid;
    flex: 1;
    gap: 0.1rem;
}
.document-item__copy strong {
    font-size: var(--font-size-sm);
}
.document-item__copy small {
    color: var(--slate-500);
}
/* Páginas da versão atual do Codex */
.welcome-band__eyebrow {
    color: var(--lime-500);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18.5rem, 0.75fr);
    gap: var(--space-6);
}
.dashboard-main-grid > * {
    min-width: 0;
}
.page[data-page="dashboard"] .welcome-band {
    margin-bottom: 1rem;
    padding-block: 1.25rem;
}
.page[data-page="dashboard"] .welcome-band__copy {
    gap: 0.35rem;
}
.page[data-page="dashboard"] .dashboard-stack {
    gap: 1rem;
}
.page[data-page="dashboard"] .stat-grid {
    gap: 1rem;
}
.page[data-page="dashboard"] .stat-card {
    min-height: 8.75rem;
    padding: 1.25rem 1.4rem;
    border-radius: 1.4rem;
    box-shadow: 0 8px 28px rgb(8 3 36 / 0.045);
}
.page[data-page="dashboard"] .stat-card::before {
    display: none;
}
.page[data-page="dashboard"] .stat-card__icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
}
.page[data-page="dashboard"] .stat-card__icon .icon {
    font-size: 1.25rem;
}
.page[data-page="dashboard"] .stat-card__value {
    display: inline;
    margin-top: 0;
}
.page[data-page="dashboard"] .stat-card__meta {
    margin-top: 0.35rem;
}
.page[data-page="dashboard"] .stat-card--clickable {
    transition: box-shadow var(--transition), transform var(--transition);
}
.page[data-page="dashboard"] .stat-card--clickable:hover {
    box-shadow: 0 14px 34px rgb(8 3 36 / 0.08);
}
.page[data-page="dashboard"] .dashboard-main-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.page[data-page="dashboard"] .dashboard-operations {
    grid-column: 1 / span 3;
}
.page[data-page="dashboard"] .dashboard-pending {
    grid-column: 4;
}
.page[data-page="dashboard"] .dashboard-main-grid > .card {
    overflow: hidden;
    border-radius: 1.4rem;
    box-shadow: 0 8px 28px rgb(8 3 36 / 0.045);
}
.page[data-page="dashboard"] .dashboard-main-grid .card__header {
    padding: 1.2rem 1.4rem 0.9rem;
}
.page[data-page="dashboard"] .dashboard-operations .data-table th {
    padding-block: 0.62rem;
}
.page[data-page="dashboard"] .dashboard-operations .data-table td {
    padding-block: 0.68rem;
}
.page[data-page="dashboard"] .dashboard-pending .card__body {
    padding-inline: 1.4rem;
}
.page[data-page="dashboard"] .dashboard-pending .badge--signature {
    background: var(--color-warning);
    color: var(--white);
}
.page[data-page="dashboard"] .pending-list {
    gap: 0.75rem;
}
.page[data-page="dashboard"] .pending-item {
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: 1rem;
    background: #f8f9fb;
}
.page[data-page="dashboard"] .pending-item__icon {
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-accent);
}
.page[data-page="dashboard"] .dashboard-pending .card__footer {
    padding-block: 0.75rem;
    border-top: 0;
}
.recent-table {
    min-width: 54rem;
}
.collection-summary {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(8rem, 0.65fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.collection-summary > div {
    display: grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:0.3rem 1rem;
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-float);
}
.collection-summary span {
    color: var(--slate-600);
    font-size: var(--font-size-xs);
}
.collection-summary strong {
    grid-column:1;
    color: var(--slate-950);
    font-size: var(--font-size-xl);
}
.collection-summary__icon {
    display:grid;
    width:1.875rem;
    height:1.875rem;
    grid-column:2;
    grid-row:1 / 3;
    place-items:center;
    color:var(--color-primary) !important;
}
.collection-summary__icon .icon {
    width:1.875rem;
    height:1.875rem;
    font-size:1.875rem;
}
.collection-summary__icon--warning {
    color:var(--color-warning) !important;
}
.collection-summary__icon--success {
    color:var(--color-accent) !important;
}
.collection-summary > div:first-child {
    background: var(--blue-700);
}
.collection-summary > div:first-child span {
    color: rgb(255 255 255 / 0.72);
}
.collection-summary > div:first-child strong {
    color: white;
}
.collection-summary > div:first-child .collection-summary__icon {
    color:var(--color-accent) !important;
}
.collection-table {
    min-width: 87rem;
}
.method-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}
.inline-import-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
    margin-top:1rem;
}
.inline-import {
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:4.5rem;
    padding:.85rem 1rem;
    border:1px dashed var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-background);
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
}
.inline-import:hover {
    border-color:var(--color-primary);
    background:var(--blue-50);
}
.inline-import__icon {
    display:grid;
    width:2.25rem;
    height:2.25rem;
    flex:0 0 auto;
    place-items:center;
    border-radius:50%;
    background:var(--white);
    color:var(--color-primary);
}
.inline-import strong,.inline-import small {
    display:block;
}
.inline-import small {
    margin-top:.2rem;
    color:var(--color-muted);
    font-size:var(--font-size-xs);
}
.inline-cmc7 {
    margin-top:1rem;
    padding:1rem;
    border:1px dashed var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-background);
    transition:border-color .15s ease,background .15s ease;
}
.inline-cmc7:hover {
    border-color:var(--color-primary);
    background:var(--blue-50);
}
.inline-cmc7 > label {
    display:block;
    margin-bottom:.5rem;
    color:var(--color-text);
    font-size:var(--font-size-sm);
    font-weight:700;
}
.inline-cmc7__control {
    display:flex;
    gap:.75rem;
}
.inline-cmc7__control .input {
    min-width:0;
    flex:1;
}
@media (max-width:720px) {
    .inline-import-grid {
        grid-template-columns:1fr;
    }
    .inline-cmc7__control {
        align-items:stretch;
        flex-direction:column;
    }
}
.method-action {
    display: inline-flex;
    min-height: 2.4rem;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: white;
    color: var(--blue-700);
    font-size: var(--font-size-xs);
    font-weight: 750;
}
.method-action:hover {
    border-color: var(--blue-700);
    background: var(--blue-50);
}
.method-card__icon--check {
    background: var(--lime-100);
    color: #587000;
}
.date-range {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
}
.date-range .field {
    min-width: 9.5rem;
}
.statement-search {
    min-width: min(22rem, 100%);
}
.profile-tabs {
    display: flex;
    gap: var(--space-2);
    width: fit-content;
    margin-bottom: var(--space-5);
    padding: 0.3rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: white;
    box-shadow: var(--shadow-xs);
}
.profile-tab {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--slate-600);
    font-size: var(--font-size-sm);
    font-weight: 750;
}
.profile-tab:hover {
    background: var(--slate-50);
    color: var(--blue-700);
}
.profile-tab.is-active {
    background: var(--lime-500);
    color: var(--slate-950);
}
.profile-tab span {
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(5 10 17 / 0.1);
    font-size: 0.65rem;
}
.counterparty-search {
    max-width: 28rem;
}
.bordero-document {
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-float);
}
.bordero-document > header, .bordero-document > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.bordero-document__brand {
    color: var(--blue-700);
    font-size: var(--font-size-md);
    font-weight: 800;
}
.bordero-document__title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block: var(--space-6);
    padding-block: var(--space-5);
    border-block: 1px solid var(--color-border);
}
.bordero-document__title small {
    color: var(--slate-500);
}
.bordero-document__title h3 {
    margin-top: 0.2rem;
    font-size: var(--font-size-2xl);
}
.bordero-document__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}
.bordero-document__grid div {
    display: grid;
    gap: 0.25rem;
}
.bordero-document__grid dt {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}
.bordero-document__grid dd {
    color: var(--slate-900);
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.bordero-document__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block: var(--space-6);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--blue-50);
    color: var(--blue-900);
}
.bordero-document__total strong {
    font-size: var(--font-size-xl);
}
.statement-hero {
    border-radius:1.25rem;
    box-shadow:0 8px 24px rgba(8,3,36,.08);
}
.statement-hero__balance, .statement-hero__metric {
    min-height:7rem;
}
.statement-hero__metric strong {
    font-variant-numeric:tabular-nums;
}

/* ============================================================================
   07. RESPONSIVIDADE
   Origem: responsive.css
   Mantido depois das regras principais, seguindo a ordem do main.css.
   ============================================================================ */

@media (max-width: 78rem) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content-grid--two, .profile-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-main-grid, .page[data-page="dashboard"] .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
    .page[data-page="dashboard"] .dashboard-operations, .page[data-page="dashboard"] .dashboard-pending {
        grid-column: auto;
    }
    .collection-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-grid > aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
    .page[data-page="operacoes"] .operations-card .table-wrap {
        overflow-x: auto;
    }
}
@media (max-width: 64rem) {
    .sidebar {
        max-width: calc(100vw - 2rem);
        transform: translateX(calc(-100% - 1rem));
    }
    .sidebar.is-open {
        transform: translateX(0);
    }
    .sidebar.is-open + .sidebar-backdrop {
        visibility: visible;
        opacity: 1;
    }
    .workspace, .sidebar.is-collapsed + .sidebar-backdrop + .workspace {
        margin-left: 0;
    }
    .topbar, .sidebar.is-collapsed + .sidebar-backdrop + .workspace .topbar {
        left: var(--page-gutter);
    }
    .topbar .topbar__menu {
        display: grid;
    }
    .sidebar__collapse {
        display: none;
    }
    .sidebar-collapse-button {
        display: none;
    }
    .statement-hero {
        grid-template-columns: 1fr 1fr;
    }
    .statement-hero__balance {
        grid-column: 1 / -1;
    }
    .statement-hero__metric:nth-child(2) {
        border-left: 0;
        border-top: 1px solid rgb(255 255 255 / 0.14);
    }
    .statement-hero__metric {
        border-top: 1px solid rgb(255 255 255 / 0.14);
    }
}
@media (max-width: 48rem) {
    :root {
        --topbar-height: 4rem;
        --page-gutter: var(--space-4);
    }
    .topbar {
        padding-inline: var(--space-4);
    }
    .company-switcher__icon, .profile-button__copy, .profile-button__chevron {
        display: none;
    }
    .company-switcher {
        padding-inline: 0;
    }
    .company-switcher strong {
        max-width: 10rem;
    }
    .page-root {
        padding: calc(var(--topbar-height) + var(--space-8)) var(--page-gutter) var(--space-8);
    }
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header__actions {
        justify-content: flex-start;
    }
    .welcome-band {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--space-5);
    }
    .stat-grid, .content-grid--equal, .method-grid, .review-summary, .field-grid, .field-grid--three, .detail-list, .profile-grid > aside, .collection-summary, .bordero-document__grid {
        grid-template-columns: 1fr;
    }
    .pending-item {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .pending-item .button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .filter-bar {
        align-items: stretch;
    }
    .filter-bar .field {
        min-width: 100%;
    }
    .filter-bar > .button {
        width: 100%;
    }
    .detail-hero {
        grid-template-columns: 1fr;
        padding: var(--space-5);
    }
    .detail-hero__amount {
        min-width: 0;
        align-content: start;
        justify-items: start;
        padding: var(--space-4) 0 0;
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
    .timeline {
        padding-inline: 0;
    }
    .timeline__step span:last-child {
        max-width: 4.5rem;
    }
    .history-item {
        grid-template-columns: 1fr;
        gap: 0.2rem;
        padding-left: var(--space-6);
    }
    .stepper {
        gap: var(--space-2);
    }
    .stepper__step {
        grid-template-columns: auto;
        justify-items: center;
        text-align: center;
    }
    .stepper__copy small {
        display: none;
    }
    .stepper__step::before {
        top: 1.15rem;
        right: 50%;
        width: calc(100% - 2rem);
    }
    .statement-hero {
        grid-template-columns: 1fr;
    }
    .statement-hero__balance {
        grid-column: auto;
    }
    .statement-hero__metric {
        border-left: 0;
    }
    .statement-controls {
        align-items: stretch;
    }
    .statement-controls .segmented-control {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .statement-controls > .page-header__actions {
        width: 100%;
    }
    .statement-controls .button {
        flex: 1;
    }
    .date-range {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .date-range .field {
        min-width: 0;
    }
    .date-range .button {
        width: 100%;
    }
    .profile-tabs {
        width: 100%;
    }
    .profile-tab {
        flex: 1;
        justify-content: center;
    }
    .method-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .method-actions .button {
        width: 100%;
    }
    .card__header, .card__footer {
        align-items: stretch;
        flex-direction: column;
    }
    .card__footer .page-header__actions {
        width: 100%;
    }
    .card__footer .button {
        flex: 1;
    }
    .modal__footer {
        flex-direction: column-reverse;
    }
    .modal__footer .button {
        width: 100%;
    }
    .toast-region {
        right: var(--space-4);
        bottom: var(--space-4);
    }
}
@media (max-width: 30rem) {
    .company-switcher {
        display: none;
    }
    .topbar__actions {
        margin-left: auto;
    }
    .stat-grid {
        grid-template-columns: 1fr;
    }
    .profile-button {
        padding: 0;
    }
    .page-header__actions {
        width: 100%;
    }
    .page-header__actions .button {
        flex: 1;
    }
    .detail-hero__meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .stepper__copy strong {
        font-size: 0.68rem;
    }
    .stepper__number {
        width: 2rem;
        height: 2rem;
    }
    .stepper__step::before {
        top: 1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}



/* ============================================================================
   COMPONENTES - BOTOES E ACOES

   Referencia visual: prototipo SGC.
   Escopo: componentes PrimeFaces exibidos na secao "Botoes e acoes".
   Nenhuma classe existente foi removida ou ocultada.
   ============================================================================ */

/* Base compartilhada dos botoes PrimeFaces */
html body .ui-button {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.68rem 1rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-primary) !important;
    color: #FFFFFF !important;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(23, 96, 143, 0.20);
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

/* O PrimeFaces posiciona icone/texto de forma absoluta em alguns temas;
   aqui eles voltam ao fluxo flex para reproduzir o prototipo. */
html body .ui-button .ui-button-icon-left,
html body .ui-button .ui-button-icon-right {
    position: static;
    margin: 0;
    color: inherit !important;
}

html body .ui-button .ui-button-text {
    padding: 0 !important;
    line-height: 1;
}

html body .ui-button:hover:not(.ui-state-disabled):not(:disabled) {
    background: var(--blue-800) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

html body .ui-button:focus,
html body .ui-button.ui-state-focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(38, 146, 199, 0.20) !important;
}

/* Secundario */
html body .ui-button.ui-button-secondary,
html body .ui-button-secondary .ui-button,
html body .ui-splitbutton.ui-button-secondary > .ui-button {
    border-color: var(--slate-300) !important;
    background: #FFFFFF !important;
    color: var(--slate-700) !important;
    box-shadow: none;
}

html body .ui-button.ui-button-secondary:hover:not(.ui-state-disabled),
html body .ui-button-secondary .ui-button:hover:not(.ui-state-disabled),
html body .ui-splitbutton.ui-button-secondary > .ui-button:hover:not(.ui-state-disabled) {
    border-color: #8BC5E2 !important;
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

/* Sucesso */
html body .ui-button.ui-button-success,
html body .ui-button-success .ui-button,
html body .ui-splitbutton.ui-button-success > .ui-button {
    border-color: transparent !important;
    background: var(--green-700) !important;
    color: #FFFFFF !important;
    box-shadow: none;
}

html body .ui-button.ui-button-success:hover:not(.ui-state-disabled),
html body .ui-button-success .ui-button:hover:not(.ui-state-disabled),
html body .ui-splitbutton.ui-button-success > .ui-button:hover:not(.ui-state-disabled) {
    background: #12633F !important;
}

/* Perigo - no prototipo o danger usa fundo suave e texto vermelho */
html body .ui-button.ui-button-danger,
html body .ui-button-danger .ui-button,
html body .ui-splitbutton.ui-button-danger > .ui-button {
    border-color: transparent !important;
    background: var(--red-100) !important;
    color: var(--red-700) !important;
    box-shadow: none;
}

html body .ui-button.ui-button-danger:hover:not(.ui-state-disabled),
html body .ui-button-danger .ui-button:hover:not(.ui-state-disabled),
html body .ui-splitbutton.ui-button-danger > .ui-button:hover:not(.ui-state-disabled) {
    background: #FBD3CF !important;
    color: #8F1C14 !important;
}

/* Apenas icone */
html body .ui-button.ui-button-icon-only {
    width: var(--control-height);
    min-width: var(--control-height);
    padding: 0 !important;
}

/* Desabilitado */
html body .ui-button.ui-state-disabled,
html body .ui-button:disabled {
    border-color: transparent !important;
    background: var(--slate-100) !important;
    color: #9CA3AB !important;
    opacity: 0.56 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* commandLink e p:link: acao textual, sem caixa */
html body a.ui-commandlink,
html body a.ui-link {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary) !important;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        color var(--transition),
        background-color var(--transition);
}

html body a.ui-commandlink:hover,
html body a.ui-link:hover {
    color: var(--blue-800) !important;
}

/* MenuButton: visual secundario do prototipo */
html body .ui-menubutton > .ui-button {
    border-color: var(--slate-300) !important;
    background: #FFFFFF !important;
    color: var(--slate-700) !important;
    box-shadow: none !important;
}

html body .ui-menubutton > .ui-button:hover:not(.ui-state-disabled) {
    border-color: #8BC5E2 !important;
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

/* SplitButton: os dois segmentos formam um unico controle */
html body .ui-splitbutton {
    display: inline-flex;
    vertical-align: middle;
}

html body .ui-splitbutton > .ui-button {
    margin: 0;
    border-radius: 0 !important;
}

html body .ui-splitbutton > .ui-button:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

html body .ui-splitbutton > .ui-button:last-child {
    min-width: 2.65rem;
    padding-inline: 0.7rem !important;
    border-left-color: rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* ToggleSwitch - alinhado a linguagem visual dos controles do prototipo */
html body .ui-toggleswitch {
    width: 2.5rem;
    height: 1.45rem;
}

html body .ui-toggleswitch .ui-toggleswitch-slider {
    border: 0 !important;
    border-radius: 9999px !important;
    background: #E2E5E9 !important;
    transition: background-color var(--transition);
}

html body .ui-toggleswitch .ui-toggleswitch-handler {
    width: 1.05rem;
    height: 1.05rem;
    top: 0.20rem;
    left: 0.20rem !important;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(5, 10, 17, 0.18);
    transition:
        left var(--transition),
        background-color var(--transition);
}

html body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--color-primary) !important;
}

html body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-handler {
    left: 1.25rem !important;
    background: #FFFFFF !important;
}

html body .ui-toggleswitch.ui-state-disabled {
    opacity: 0.56;
    cursor: not-allowed;
}

/* ============================================================================
   CORRECOES - BOTOES E ACOES
   Corrige posicionamento legado do tema PrimeFaces/Olympia nos icones e textos.
   ============================================================================ */

/* O tema antigo usa posicionamento absoluto para icones de botoes.
   No novo visual todos os elementos participam do fluxo flex. */
html body .ui-button,
html body .ui-menubutton > .ui-button,
html body .ui-splitbutton > .ui-button {
    position: relative;
    overflow: visible;
}

html body .ui-button .ui-button-icon-left,
html body .ui-button .ui-button-icon-right,
html body .ui-menubutton > .ui-button .ui-button-icon-left,
html body .ui-menubutton > .ui-button .ui-button-icon-right,
html body .ui-splitbutton > .ui-button .ui-button-icon-left,
html body .ui-splitbutton > .ui-button .ui-button-icon-right {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    flex: 0 0 auto;
}

/* Impede recuos do tema antigo quando existe icone. */
html body .ui-button .ui-button-text,
html body .ui-button.ui-button-text-icon-left .ui-button-text,
html body .ui-button.ui-button-text-icon-right .ui-button-text,
html body .ui-menubutton > .ui-button .ui-button-text,
html body .ui-splitbutton > .ui-button .ui-button-text {
    display: inline-block;
    width: auto;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.15;
    flex: 0 1 auto;
}

/* PrimeFaces pode inserir o icone antes do texto sem gap real no DOM. */
html body .ui-button.ui-button-text-icon-left,
html body .ui-button.ui-button-text-icon-right,
html body .ui-menubutton > .ui-button,
html body .ui-splitbutton > .ui-button {
    gap: var(--space-2);
}

/* Mantem o botao apenas com icone perfeitamente centralizado. */
html body .ui-button.ui-button-icon-only {
    display: inline-grid;
    place-items: center;
}

html body .ui-button.ui-button-icon-only .ui-button-icon-left,
html body .ui-button.ui-button-icon-only .ui-button-icon-right {
    margin: 0 !important;
}

/* MenuButton: evita o icone encostar/sobrepor o rotulo. */
html body .ui-menubutton {
    display: inline-flex;
}

html body .ui-menubutton > .ui-button {
    min-width: 0;
}

/* SplitButton: separa corretamente acao principal e seta. */
html body .ui-splitbutton > .ui-button:first-child {
    display: inline-flex;
    min-width: 0;
}

html body .ui-splitbutton > .ui-button:last-child {
    display: inline-grid;
    width: 2.65rem;
    min-width: 2.65rem;
    place-items: center;
    gap: 0;
}

html body .ui-splitbutton > .ui-button:last-child .ui-button-text {
    display: none;
}

/* Success e danger usam as cores oficiais do root. */
html body .ui-button.ui-button-success,
html body .ui-button-success .ui-button,
html body .ui-splitbutton.ui-button-success > .ui-button {
    background: var(--green-700) !important;
    color: var(--white) !important;
}

html body .ui-button.ui-button-danger,
html body .ui-button-danger .ui-button,
html body .ui-splitbutton.ui-button-danger > .ui-button {
    background: var(--red-100) !important;
    color: var(--red-700) !important;
}

/* Estado desabilitado mais proximo do prototipo. */
html body .ui-button.ui-state-disabled,
html body .ui-button:disabled {
    background: var(--slate-100) !important;
    color: var(--slate-400) !important;
    opacity: 0.56 !important;
}

/* ============================================================================
   CORRECOES FINAIS - BOTOES E ACOES
   Ajustes para neutralizar posicionamentos internos herdados do PrimeFaces.
   ============================================================================ */

/* --- CommandButton somente com icone --- */
html body .ui-button.ui-button-icon-only {
    display: inline-flex !important;
    width: var(--control-height) !important;
    min-width: var(--control-height) !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
}

html body .ui-button.ui-button-icon-only .ui-button-text {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .ui-button.ui-button-icon-only .ui-button-icon-left,
html body .ui-button.ui-button-icon-only .ui-button-icon-right {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
}

/* --- MenuButton --- */
html body .ui-menubutton {
    display: inline-flex !important;
    align-items: stretch !important;
    vertical-align: middle;
}

html body .ui-menubutton > .ui-button {
    display: inline-flex !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.68rem 1rem !important;
}

html body .ui-menubutton > .ui-button .ui-button-icon-left,
html body .ui-menubutton > .ui-button .ui-button-icon-right {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
}

html body .ui-menubutton > .ui-button .ui-button-text {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- SplitButton --- */
html body .ui-splitbutton {
    display: inline-flex !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    align-items: stretch !important;
    overflow: hidden;
    border-radius: var(--radius-md);
    vertical-align: middle;
    box-shadow: 0 5px 14px rgba(23, 96, 143, 0.20);
}

html body .ui-splitbutton > .ui-button {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .ui-splitbutton > .ui-button:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    padding: 0.68rem 1rem !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

html body .ui-splitbutton > .ui-button:last-child {
    display: inline-flex !important;
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

html body .ui-splitbutton > .ui-button:last-child .ui-button-text {
    display: none !important;
}

html body .ui-splitbutton > .ui-button:last-child .ui-button-icon-left,
html body .ui-splitbutton > .ui-button:last-child .ui-button-icon-right {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
}

/* --- ToggleSwitch ---
   O tema Olympia desloca o handler por left/transform.
   Aqui o controle e totalmente redefinido para evitar o circulo fora da trilha. */
html body .ui-toggleswitch {
    position: relative !important;
    display: inline-block !important;
    width: 2.5rem !important;
    height: 1.5rem !important;
    min-width: 2.5rem !important;
    min-height: 1.5rem !important;
    vertical-align: middle;
}

html body .ui-toggleswitch .ui-toggleswitch-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 2.5rem !important;
    height: 1.5rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--slate-200) !important;
    box-shadow: none !important;
}

html body .ui-toggleswitch .ui-toggleswitch-slider::before {
    display: none !important;
}

html body .ui-toggleswitch .ui-toggleswitch-handler {
    position: absolute !important;
    top: 0.1875rem !important;
    left: 0.1875rem !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    box-shadow: 0 1px 3px rgba(5, 10, 17, 0.20) !important;
    transform: none !important;
    transition:
        left var(--transition),
        background-color var(--transition) !important;
}

html body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--color-primary) !important;
}

html body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-handler {
    left: 1.1875rem !important;
    background: var(--white) !important;
    transform: none !important;
}

html body .ui-toggleswitch.ui-state-disabled {
    opacity: 0.56 !important;
    cursor: not-allowed !important;
}

/* ============================================================================
   08. PRIMEFACES - CATALOGO "BOTOES E ACOES"
   Pagina de referencia: componentes.xhtml
   Toda a aparencia permanece no mury.css; o XHTML apenas aplica styleClass.
   ============================================================================ */

html body .componentesAcoesGrupo {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-3);
}

html body .ui-button.button--secondary {
    border-color:var(--color-border-strong)!important;
    background:var(--white)!important;
    color:var(--slate-700)!important;
    box-shadow:none!important;
}
html body .ui-button.button--secondary:hover:not(.ui-state-disabled):not(:disabled) {
    border-color:var(--blue-300,#8bc5e2)!important;
    background:var(--blue-50)!important;
    color:var(--blue-800)!important;
}

html body .ui-button.button--ghost {
    border-color:transparent!important;
    background:transparent!important;
    color:var(--blue-700)!important;
    box-shadow:none!important;
}
html body .ui-button.button--ghost:hover:not(.ui-state-disabled):not(:disabled) {
    background:var(--blue-50)!important;
    color:var(--blue-800)!important;
}

html body .ui-button.button--accent {
    border-color:transparent!important;
    background:var(--color-accent)!important;
    color:var(--slate-950)!important;
    box-shadow:0 5px 16px rgb(0 38 95 / .18)!important;
}
html body .ui-button.button--accent:hover:not(.ui-state-disabled):not(:disabled) {
    background:#dbf36e!important;
    color:var(--slate-950)!important;
}

html body .ui-button.button--danger {
    border-color:transparent!important;
    background:var(--red-100)!important;
    color:var(--red-700)!important;
    box-shadow:none!important;
}
html body .ui-button.button--danger:hover:not(.ui-state-disabled):not(:disabled) {
    background:#fbd3cf!important;
    color:#8f1c14!important;
}

html body .ui-button.button--sm {
    min-height:2.25rem!important;
    padding:.5rem .75rem!important;
    font-size:var(--font-size-xs)!important;
}

html body .ui-button.button--icon {
    display:inline-flex!important;
    width:2.5rem!important;
    min-width:2.5rem!important;
    height:2.5rem!important;
    min-height:2.5rem!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border-color:transparent!important;
    border-radius:var(--radius-md)!important;
    background:transparent!important;
    color:var(--slate-600)!important;
    box-shadow:none!important;
}
html body .ui-button.button--icon:hover:not(.ui-state-disabled):not(:disabled) {
    background:var(--slate-100)!important;
    color:var(--blue-800)!important;
    transform:none!important;
}
html body .ui-button.button--icon .ui-button-text, html body .ui-button.table-action .ui-button-text, html body .ui-button.operation-action .ui-button-text {
    display:none!important;
}

html body .ui-button.table-action {
    display:inline-flex!important;
    width:2.1rem!important;
    min-width:2.1rem!important;
    height:2.1rem!important;
    min-height:2.1rem!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:1px solid var(--color-border)!important;
    border-radius:50%!important;
    background:var(--white)!important;
    color:var(--blue-700)!important;
    box-shadow:none!important;
}
html body .ui-button.table-action:hover:not(.ui-state-disabled):not(:disabled) {
    border-color:var(--blue-700)!important;
    background:var(--blue-50)!important;
    color:var(--blue-700)!important;
    transform:none!important;
}

html body .ui-button.operation-action {
    display:inline-flex!important;
    width:2rem!important;
    min-width:2rem!important;
    height:2rem!important;
    min-height:2rem!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--slate-50)!important;
    color:var(--blue-700)!important;
    box-shadow:none!important;
}
html body .ui-button.operation-action:hover:not(.ui-state-disabled):not(:disabled), html body .ui-button.operation-action:focus-visible {
    background:var(--blue-700)!important;
    color:var(--white)!important;
    transform:none!important;
}

html body a.ui-commandlink.link--section, html body .ui-commandlink.link--section {
    display:inline-flex;
    align-items:center;
    gap:var(--space-1);
    color:var(--blue-700)!important;
    font-family:var(--font-sans);
    font-size:var(--font-size-sm);
    font-weight:700;
    line-height:1.3;
    text-decoration:none;
}
html body a.ui-commandlink.link--section:hover, html body .ui-commandlink.link--section:hover {
    color:var(--blue-900)!important;
    text-decoration:none;
}

html body a.ui-link.link--table, html body .ui-link.link--table {
    display:inline-flex;
    align-items:center;
    color:var(--blue-700)!important;
    font-family:var(--font-sans);
    font-size:var(--font-size-sm);
    font-weight:750;
    line-height:1.3;
    text-decoration:underline!important;
    text-decoration-color:rgb(0 71 187 / .24)!important;
    text-underline-offset:.18rem;
}
html body a.ui-link.link--table:hover, html body .ui-link.link--table:hover {
    color:var(--blue-900)!important;
    text-decoration-color:currentColor!important;
}

html body .ui-menubutton.menu-button--actions {
    display:inline-flex;
    vertical-align:middle;
}
html body .ui-menubutton.menu-button--actions > .ui-button {
    min-height:var(--control-height)!important;
    padding:.68rem 1rem!important;
    border:1px solid var(--color-border-strong)!important;
    border-radius:var(--radius-md)!important;
    background:var(--white)!important;
    color:var(--slate-700)!important;
    box-shadow:none!important;
}
html body .ui-menubutton.menu-button--actions > .ui-button:hover:not(.ui-state-disabled) {
    border-color:var(--blue-300,#8bc5e2)!important;
    background:var(--blue-50)!important;
    color:var(--blue-800)!important;
}
html body .ui-menubutton.menu-button--actions > .ui-button .ui-button-icon-left, html body .ui-menubutton.menu-button--actions > .ui-button .ui-button-icon-right {
    position:static!important;
    inset:auto!important;
    margin:0!important;
    transform:none!important;
}

html body .ui-menu.ui-menu-dynamic {
    border:0;
    border-radius:var(--radius-lg);
    background:var(--white);
    box-shadow:var(--shadow-md);
}
html body .ui-menu.ui-menu-dynamic .ui-menuitem-link {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:.75rem var(--space-4);
    border-radius:var(--radius-sm);
    color:var(--slate-700);
    font-family:var(--font-sans);
    font-size:var(--font-size-sm);
}
html body .ui-menu.ui-menu-dynamic .ui-menuitem-link:hover, html body .ui-menu.ui-menu-dynamic .ui-menuitem-link.ui-state-hover {
    background:var(--slate-50);
    color:var(--blue-700);
}

@media (max-width:48rem) {
    html body .componentesAcoesGrupo {
        align-items:stretch;
        flex-direction:column;
    }
    html body .componentesAcoesGrupo > .ui-button, html body .componentesAcoesGrupo > .ui-menubutton {
        width:100%;
    }
    html body .componentesAcoesGrupo > .ui-commandlink, html body .componentesAcoesGrupo > .ui-link {
        width:fit-content;
    }
    html body .componentesAcoesGrupo > .ui-button.button--icon, html body .componentesAcoesGrupo > .ui-button.table-action, html body .componentesAcoesGrupo > .ui-button.operation-action {
        width:auto!important;
        align-self:flex-start;
    }
}

/* ============================================================================
   DESIGN SYSTEM - PAGINA E ADAPTADORES PRIMEFACES
   Pagina de referencia: design_system.xhtml

   Referencia visual consolidada a partir do catalogo HTML do prototipo SGC.
   Todo o estilo final permanece neste mury.css; styles.css/app.js nao sao
   dependencias do projeto Java/PrimeFaces.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Estrutura do catalogo
   --------------------------------------------------------------------------- */
html body .design-system-page {
    width: 100%;
    color: var(--color-text);
    font-family: var(--font-sans);
}

html body .design-system-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

html body .design-system-page-header h1 {
    margin: 0.2rem 0 0.3rem;
    color: var(--color-text);
    font-size: 1.7rem;
    line-height: 1.2;
}

html body .design-system-page-header p {
    margin: 0;
    max-width: 52rem;
    color: var(--color-muted);
}

html body .design-system-eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html body .design-system-version {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

html body .design-system-layout {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
}

html body .design-system-nav {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-6));
    display: flex;
    max-height: calc(100vh - var(--topbar-height) - var(--space-10));
    flex-direction: column;
    gap: 0.8rem;
    padding: var(--space-5);
    overflow-y: auto;
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-float);
}

html body .design-system-nav > strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

html body .design-system-nav nav {
    display: grid;
    gap: 0.2rem;
}

html body .design-system-nav nav a {
    padding: 0.48rem 0.65rem;
    border-radius: 0.7rem;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

html body .design-system-nav nav a:hover,
html body .design-system-nav nav a:focus-visible {
    background: var(--blue-50);
    color: var(--color-primary);
}

html body .design-system-nav > small {
    padding-top: 0.8rem;
    border-top: 1px solid var(--slate-100);
    color: var(--color-muted);
}

html body .design-system-content {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
}

html body .design-system-section {
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-float);
    scroll-margin-top: calc(var(--topbar-height) + var(--space-8));
}

html body .design-system-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid var(--slate-100);
}

html body .design-system-section-header > div > span {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html body .design-system-section-header h2 {
    margin: 0 0 0.25rem;
    color: var(--color-text);
    font-size: var(--font-size-xl);
}

html body .design-system-section-header p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

html body .design-system-back {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-primary);
    text-decoration: none;
}

html body .design-system-section-body {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    padding: var(--space-6);
}

html body .design-system-principles,
html body .design-system-colors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .design-system-principles article {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-background);
}

html body .design-system-principles strong {
    color: var(--color-primary);
}

html body .design-system-principles p {
    margin: 0.5rem 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

html body .design-system-swatch {
    overflow: hidden;
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-lg);
    background: var(--white);
}

html body .design-system-swatch > b {
    display: block;
    height: 5.25rem;
}

html body .design-system-swatch > div {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-4);
}

html body .design-system-swatch code {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
}

html body .design-system-swatch small {
    color: var(--color-muted);
}

html body .design-system-type {
    gap: 0.75rem;
}

html body .design-system-type > span {
    color: var(--color-primary);
    font-weight: 800;
}

html body .design-system-type h1,
html body .design-system-type h2,
html body .design-system-type h3,
html body .design-system-type p {
    margin: 0;
}

html body .design-system-type p,
html body .design-system-type small {
    color: var(--color-muted);
}

html body .design-system-type > strong {
    margin-top: 0.75rem;
    color: var(--color-dark);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}

/* Fieldset passa a funcionar como subcard do catalogo. */
html body .design-system-page .ui-fieldset {
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: none !important;
}

html body .design-system-page .ui-fieldset .ui-fieldset-legend {
    margin-left: var(--space-4);
    padding: 0.4rem 0.65rem;
    border: 0 !important;
    border-radius: var(--radius-sm);
    background: var(--white) !important;
    color: var(--color-text) !important;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 750;
}

html body .design-system-page .ui-fieldset .ui-fieldset-content {
    padding: var(--space-5) !important;
}

html body .design-system-page .design-system-demo-row,
html body .design-system-page .form-grid {
    width: 100%;
}

html body .design-system-page .form-grid.ui-panelgrid .ui-panelgrid-cell {
    padding: 0.55rem 0.65rem;
    border: 0;
}

html body .design-system-page .form-label,
html body .design-system-page .ui-outputlabel {
    color: var(--slate-700);
    font-size: var(--font-size-sm);
    font-weight: 650;
}

/* ---------------------------------------------------------------------------
   Formularios PrimeFaces
   Referencia: .control do catalogo SGC.
   --------------------------------------------------------------------------- */
html body .ui-inputfield,
html body .ui-inputtextarea,
html body .ui-password input,
html body .ui-inputnumber input,
html body .ui-spinner-input,
html body .ui-autocomplete-input,
html body .ui-calendar input,
html body .ui-datepicker-trigger + input,
html body .ui-selectonemenu,
html body .ui-selectcheckboxmenu,
html body .ui-multiselectlistbox,
html body .ui-chips .ui-chips-container {
    min-height: var(--control-height);
    border-radius: var(--radius-md) !important;
    outline: 0;
    background: var(--white) !important;
    color: var(--color-text) !important;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    box-shadow: none !important;
    transition: border-color var(--transition), box-shadow var(--transition);
}

html body input.ui-inputfield,
html body textarea.ui-inputfield,
html body .ui-inputtextarea,
html body .ui-password input,
html body .ui-inputnumber input,
html body .ui-spinner-input,
html body .ui-autocomplete-input {
    padding: 0.65rem 0.8rem !important;
}

html body .ui-inputfield:focus,
html body .ui-inputfield.ui-state-focus,
html body .ui-selectonemenu.ui-state-focus,
html body .ui-selectcheckboxmenu.ui-state-focus,
html body .ui-chips .ui-chips-container.ui-state-focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgb(0 71 187 / 0.12) !important;
}

html body .ui-inputfield::placeholder,
html body textarea::placeholder {
    color: var(--slate-400);
}

html body .ui-inputfield.ui-state-disabled,
html body .ui-inputfield:disabled,
html body .ui-selectonemenu.ui-state-disabled {
    background: var(--slate-50) !important;
    color: var(--slate-400) !important;
    opacity: 0.72;
}

html body .ui-selectonemenu .ui-selectonemenu-label {
    padding: 0.65rem 2.4rem 0.65rem 0.8rem !important;
    color: var(--color-text);
}

html body .ui-selectonemenu .ui-selectonemenu-trigger,
html body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
    display: grid;
    width: 2.5rem;
    place-items: center;
    border: 0 !important;
    background: transparent !important;
    color: var(--slate-500);
}

html body .ui-selectonemenu-panel,
html body .ui-autocomplete-panel,
html body .ui-selectcheckboxmenu-panel {
    overflow: hidden;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

html body .ui-selectonemenu-panel .ui-selectonemenu-item,
html body .ui-autocomplete-panel .ui-autocomplete-item,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item {
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    color: var(--slate-700);
}

html body .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
html body .ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item.ui-state-highlight {
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

/* Checkbox e radio */
html body .ui-chkbox .ui-chkbox-box,
html body .ui-radiobutton .ui-radiobutton-box {
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border: 1.5px solid var(--color-border) !important;
    background: var(--white) !important;
    box-shadow: none !important;
}

html body .ui-chkbox .ui-chkbox-box {
    border-radius: 0.32rem !important;
}

html body .ui-radiobutton .ui-radiobutton-box {
    border-radius: 50% !important;
}

html body .ui-chkbox .ui-chkbox-box.ui-state-active,
html body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--white) !important;
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
    top: 40% !important;
}

/* ---------------------------------------------------------------------------
   Tabelas PrimeFaces
   --------------------------------------------------------------------------- */
html body .ui-datatable {
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--radius-lg);
    background: var(--white);
}

html body .ui-datatable .ui-datatable-header,
html body .ui-datatable .ui-datatable-footer {
    padding: var(--space-4) var(--space-5);
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white) !important;
    color: var(--color-text);
    font-weight: 700;
}

html body .ui-datatable thead th {
    padding: 0.78rem var(--space-4) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: var(--white) !important;
    color: var(--slate-500) !important;
    font-size: 0.7rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
}

html body .ui-datatable tbody td {
    padding: 0.9rem var(--space-4) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white);
    color: var(--slate-700);
    font-size: var(--font-size-sm);
}

html body .ui-datatable tbody tr:hover > td {
    background: var(--blue-50) !important;
}

html body .ui-datatable .ui-state-highlight > td {
    background: var(--blue-50) !important;
    color: var(--blue-900) !important;
}

html body .ui-paginator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    padding: var(--space-4) !important;
    border: 0 !important;
    border-top: 1px solid var(--color-border) !important;
    background: var(--white) !important;
}

html body .ui-paginator .ui-paginator-page,
html body .ui-paginator .ui-paginator-next,
html body .ui-paginator .ui-paginator-prev,
html body .ui-paginator .ui-paginator-first,
html body .ui-paginator .ui-paginator-last {
    display: inline-grid;
    min-width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--slate-600) !important;
}

html body .ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--color-primary) !important;
    color: var(--white) !important;
}

/* ---------------------------------------------------------------------------
   Paineis, tabs e agrupadores
   --------------------------------------------------------------------------- */
html body .ui-panel,
html body .ui-accordion .ui-accordion-content,
html body .ui-tabview .ui-tabview-panels {
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-xs);
}

html body .ui-panel .ui-panel-titlebar {
    padding: var(--space-4) var(--space-5) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white) !important;
    color: var(--color-text);
}

html body .ui-panel .ui-panel-content {
    padding: var(--space-5) !important;
    border: 0 !important;
}

html body .ui-accordion .ui-accordion-header {
    margin: 0 0 0.35rem;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--slate-700) !important;
}

html body .ui-accordion .ui-accordion-header.ui-state-active {
    border-color: var(--blue-100) !important;
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-tabview .ui-tabview-nav {
    display: flex;
    gap: var(--space-2);
    padding: 0.3rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill);
    background: var(--white) !important;
    box-shadow: var(--shadow-xs);
}

html body .ui-tabview .ui-tabview-nav li {
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
}

html body .ui-tabview .ui-tabview-nav li a {
    padding: 0.6rem 1rem !important;
    color: var(--slate-600) !important;
    font-size: var(--font-size-sm);
    font-weight: 750;
}

html body .ui-tabview .ui-tabview-nav li.ui-state-active {
    background: var(--color-accent) !important;
}

html body .ui-tabview .ui-tabview-nav li.ui-state-active a {
    color: var(--color-text) !important;
}

/* ---------------------------------------------------------------------------
   Mensagens, alerts, dialogos e overlays
   --------------------------------------------------------------------------- */
html body .ui-message,
html body .ui-messages > div {
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-sans);
}

html body .ui-messages-info,
html body .ui-message-info {
    border: 1px solid #c4e2f1 !important;
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-messages-warn,
html body .ui-message-warn {
    border: 1px solid #f0d99e !important;
    background: #fffbef !important;
    color: var(--amber-700) !important;
}

html body .ui-messages-error,
html body .ui-message-error,
html body .ui-messages-fatal,
html body .ui-message-fatal {
    border: 1px solid #f1caca !important;
    background: #fff6f6 !important;
    color: var(--red-700) !important;
}

html body .ui-dialog {
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--radius-xl) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

html body .ui-dialog .ui-dialog-titlebar {
    padding: var(--space-5) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white) !important;
    color: var(--color-text);
}

html body .ui-dialog .ui-dialog-content {
    padding: var(--space-5) !important;
    background: var(--white) !important;
}

html body .ui-dialog .ui-dialog-footer {
    padding: var(--space-4) var(--space-5) !important;
    border-top: 1px solid var(--slate-100) !important;
    background: var(--slate-50) !important;
}

html body .ui-overlaypanel {
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ---------------------------------------------------------------------------
   Navegacao PrimeFaces
   --------------------------------------------------------------------------- */
html body .ui-breadcrumb {
    padding: 0.7rem var(--space-4) !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    background: var(--slate-50) !important;
}

html body .ui-breadcrumb a {
    color: var(--blue-700) !important;
    font-size: var(--font-size-sm);
}

html body .ui-steps {
    background: transparent !important;
}

html body .ui-steps .ui-steps-item .ui-menuitem-link {
    background: transparent !important;
}

html body .ui-steps .ui-steps-number {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 2px solid var(--slate-300) !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    color: var(--slate-500) !important;
    font-size: var(--font-size-sm);
    font-weight: 800;
}

html body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--white) !important;
    box-shadow: 0 0 0 4px var(--blue-100);
}

html body .ui-tabmenu .ui-tabmenu-nav {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.3rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill);
    background: var(--white) !important;
    box-shadow: var(--shadow-xs);
}

html body .ui-tabmenu .ui-tabmenuitem {
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
}

html body .ui-tabmenu .ui-tabmenuitem.ui-state-active {
    background: var(--color-accent) !important;
}

html body .ui-tabmenu .ui-tabmenuitem.ui-state-active a {
    color: var(--color-text) !important;
}

/* ---------------------------------------------------------------------------
   Arquivos, progresso, chips e skeleton
   --------------------------------------------------------------------------- */
html body .ui-fileupload {
    overflow: hidden;
    border: 1px dashed var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--color-background) !important;
}

html body .ui-fileupload .ui-fileupload-buttonbar,
html body .ui-fileupload .ui-fileupload-content {
    padding: var(--space-4) !important;
    border: 0 !important;
    background: transparent !important;
}

html body .ui-progressbar {
    height: 0.75rem !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--slate-100) !important;
}

html body .ui-progressbar .ui-progressbar-value {
    border: 0 !important;
    background: var(--color-primary) !important;
}

html body .ui-skeleton {
    border-radius: var(--radius-pill) !important;
    background: linear-gradient(90deg, var(--slate-100), var(--slate-50), var(--slate-100)) !important;
    background-size: 220% 100% !important;
}

html body .ui-chip {
    border-radius: var(--radius-pill) !important;
    background: var(--slate-100) !important;
    color: var(--slate-700) !important;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Graficos e icones na pagina de referencia
   --------------------------------------------------------------------------- */
html body .design-system-page .testesGraficos .ui-fieldset {
    min-height: 20rem;
}

html body .design-system-page .testesIcones {
    width: 100%;
}

html body .design-system-page .testesIcones .ui-panelgrid-cell,
html body .design-system-page .testesIcones td {
    padding: var(--space-3) !important;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-md);
    color: var(--slate-600);
    font-size: var(--font-size-xs);
}

html body .design-system-page .testesIcones i {
    margin-right: 0.35rem;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Responsividade do catalogo
   --------------------------------------------------------------------------- */
@media (max-width: 64rem) {
    html body .design-system-layout {
        grid-template-columns: 1fr;
    }

    html body .design-system-nav {
        position: static;
        max-height: none;
    }

    html body .design-system-nav nav {
        display: flex;
        overflow-x: auto;
    }

    html body .design-system-nav nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    html body .design-system-principles,
    html body .design-system-colors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    html body .design-system-page-header,
    html body .design-system-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    html body .design-system-principles,
    html body .design-system-colors {
        grid-template-columns: 1fr;
    }

    html body .design-system-section-header,
    html body .design-system-section-body {
        padding: var(--space-5);
    }

    html body .design-system-version {
        white-space: normal;
    }
}

/* ============================================================================
   DESIGN SYSTEM - AJUSTES DE CATALOGO
   Pagina: design_system.xhtml
   ============================================================================ */

/* A pagina de Design System nao utiliza o shell visual do portal.
   Mantemos o template apenas para carregar os recursos JSF/PrimeFaces existentes. */
html body .design-system-page {
    width: min(100%, 100rem);
    margin: 0 auto;
    padding: 2rem var(--page-gutter) 4rem;
}

html body .design-system-layout {
    display: block;
}

html body .design-system-content {
    display: grid;
    gap: var(--space-6);
}

/* Remove o rotulo antigo "SGC UI" quando algum trecho legado ainda o renderizar. */
html body .design-system-eyebrow {
    display: none !important;
}

/* Cards recolhiveis. */
html body .design-system-collapsible,
html body .design-system-nested-details {
    overflow: hidden;
}

html body .design-system-collapsible > summary,
html body .design-system-nested-details > summary {
    list-style: none;
    cursor: pointer;
}

html body .design-system-collapsible > summary::-webkit-details-marker,
html body .design-system-nested-details > summary::-webkit-details-marker {
    display: none;
}

html body .design-system-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
}

html body .design-system-section-summary h2 {
    margin: 0 0 0.25rem;
}

html body .design-system-section-summary p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

html body .design-system-summary-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

html body details[open] > .design-system-section-summary {
    border-bottom: 1px solid var(--slate-100);
}

html body details[open] > .design-system-section-summary .pi-chevron-down,
html body .design-system-nested-details[open] > summary .pi-chevron-down {
    transform: rotate(180deg);
}

html body .design-system-section-summary .pi-chevron-down,
html body .design-system-nested-details > summary .pi-chevron-down {
    transition: transform var(--transition);
}

/* Cores */
html body .design-system-color-category {
    display: grid;
    gap: var(--space-4);
}

html body .design-system-color-category-title {
    display: grid;
    gap: 0.15rem;
}

html body .design-system-color-category-title h3,
html body .design-system-color-group h3 {
    margin: 0;
    color: var(--slate-900);
    font-size: var(--font-size-md);
}

html body .design-system-color-category-title p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

html body .design-system-color-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

html body .design-system-swatch--compact {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-xs);
}

html body .design-system-swatch--compact > b {
    display: block;
    height: 2.5rem;
}

html body .design-system-swatch--compact > div {
    display: grid;
    gap: 0.1rem;
    padding: 0.65rem 0.75rem;
}

html body .design-system-swatch--compact strong {
    color: var(--slate-900);
    font-size: var(--font-size-xs);
}

html body .design-system-swatch--compact code {
    overflow: hidden;
    color: var(--color-primary);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .design-system-swatch--compact small {
    overflow: hidden;
    color: var(--slate-500);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .design-system-nested-details {
    margin-top: var(--space-5);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-md);
    background: var(--slate-50);
}

html body .design-system-nested-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    color: var(--slate-800);
}

html body .design-system-nested-details > summary > span {
    display: grid;
    gap: 0.1rem;
}

html body .design-system-nested-details > summary small {
    color: var(--slate-500);
    font-size: var(--font-size-xs);
    font-weight: 400;
}

html body .design-system-nested-details-body {
    display: grid;
    gap: var(--space-5);
    padding: 0 var(--space-4) var(--space-4);
}

html body .design-system-color-group {
    display: grid;
    gap: var(--space-3);
}

/* Tipografia */
html body .design-system-font-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

html body .design-system-font-heading > span {
    color: var(--color-primary);
    font-weight: 800;
}

html body .design-system-font-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: none;
}

html body .design-system-font-link:hover {
    color: var(--blue-900);
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

/* CommandButton Accent em outline: mesma cor do destaque Novo Bordero,
   porem utilizada em borda, texto e icone. */
html body .ui-button.button--accent-outline {
    border: 1px solid var(--color-accent) !important;
    background: transparent !important;
    color: var(--color-accent) !important;
    box-shadow: none !important;
}

html body .ui-button.button--accent-outline .ui-button-icon-left,
html body .ui-button.button--accent-outline .ui-button-icon-right {
    color: inherit !important;
}

html body .ui-button.button--accent-outline:hover:not(.ui-state-disabled):not(:disabled) {
    border-color: var(--lime-600) !important;
    background: rgb(208 234 86 / 0.12) !important;
    color: #587000 !important;
}

/* CommandLink contextual com icone, equivalente ao "Ver todas ->" do prototipo. */
html body .ui-commandlink.link--section-icon {
    gap: var(--space-1);
}

html body .ui-commandlink.link--section-icon .pi {
    font-size: 0.78rem;
    transition: transform var(--transition);
}

html body .ui-commandlink.link--section-icon:hover .pi {
    transform: translateX(2px);
}

/* Selects: neutraliza amarelos do Olympia e usa branco + azul claro do root. */
html body .ui-selectonemenu-panel,
html body .ui-selectcheckboxmenu-panel,
html body .ui-multiselectlistbox .ui-multiselectlistbox-listcontainer {
    border-color: var(--color-border) !important;
    background: var(--white) !important;
}

html body .ui-selectonemenu-panel .ui-selectonemenu-items,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items {
    background: var(--white) !important;
}

html body .ui-selectonemenu-panel .ui-selectonemenu-item,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item,
html body .ui-autocomplete-panel .ui-autocomplete-item {
    background: var(--white) !important;
    color: var(--slate-700) !important;
}

html body .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover,
html body .ui-selectonemenu-panel .ui-selectonemenu-item:hover,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item.ui-state-hover,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item:hover,
html body .ui-autocomplete-panel .ui-autocomplete-item.ui-state-hover,
html body .ui-autocomplete-panel .ui-autocomplete-item:hover {
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
html body .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-active,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item.ui-state-highlight,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item.ui-state-active {
    background: var(--blue-100) !important;
    color: var(--blue-900) !important;
}

/* SelectOneRadio: centraliza o ponto interno e remove posicionamento do tema. */
html body .ui-radiobutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

html body .ui-radiobutton .ui-radiobutton-box {
    position: relative !important;
    display: inline-flex !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    box-sizing: border-box !important;
}

html body .ui-radiobutton .ui-radiobutton-icon {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background-image: none !important;
    background-color: transparent !important;
    transform: none !important;
}

html body .ui-radiobutton .ui-radiobutton-box.ui-state-active,
html body .ui-radiobutton .ui-radiobutton-box.ui-state-focus {
    border-color: var(--color-primary) !important;
}

html body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon,
html body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon.ui-icon-bullet {
    background-color: var(--color-primary) !important;
}

@media (max-width: 64rem) {
    html body .design-system-color-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    html body .design-system-page {
        padding-inline: var(--space-4);
    }

    html body .design-system-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .design-system-section-summary {
        align-items: flex-start;
    }

    html body .design-system-summary-label {
        display: none;
    }
}

html body .design-system-collapsible > .design-system-section-summary h2 {
    font-size: var(--font-size-xl);
}

/* ============================================================================
   DESIGN SYSTEM - PAGINA STANDALONE
   Esta pagina nao usa template_portal.xhtml.
   Portanto, nao renderiza sidebar nem topbar do sistema principal.
   Mantem apenas a navegacao interna do catalogo.
   ============================================================================ */

html body.design-system-standalone {
    min-height: 100vh;
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
}

html body.design-system-standalone .design-system-page {
    width: min(100%, 100rem);
    margin: 0 auto;
    padding: 2rem var(--page-gutter) 4rem;
}

html body.design-system-standalone .design-system-layout {
    display: grid !important;
    grid-template-columns: 13.5rem minmax(0, 1fr) !important;
    gap: var(--space-6) !important;
    align-items: start;
}

html body.design-system-standalone .design-system-nav {
    position: sticky !important;
    top: var(--space-6);
    display: flex !important;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-float);
}

html body.design-system-standalone .design-system-nav nav {
    display: grid;
    gap: 0.2rem;
}

html body.design-system-standalone .design-system-nav a {
    padding: 0.48rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

html body.design-system-standalone .design-system-nav a:hover {
    background: var(--blue-50);
    color: var(--color-primary);
}

html body.design-system-standalone .design-system-nav > small {
    padding-top: var(--space-3);
    border-top: 1px solid var(--slate-100);
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}

@media (max-width: 64rem) {
    html body.design-system-standalone .design-system-layout {
        grid-template-columns: 1fr !important;
    }

    html body.design-system-standalone .design-system-nav {
        position: static !important;
    }

    html body.design-system-standalone .design-system-nav nav {
        display: flex;
        overflow-x: auto;
        gap: var(--space-2);
    }

    html body.design-system-standalone .design-system-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ============================================================================
   DESIGN SYSTEM - DOCUMENTACAO DE COMPONENTES
   Referencia compacta para consulta e copia de implementacao.
   ============================================================================ */

html body .ds-component-reference {
    margin-top: 0.65rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
}

html body .ds-component-reference--section {
    margin: var(--space-3) var(--space-5) var(--space-5);
}

html body .ds-component-reference > summary {
    list-style: none;
}

html body .ds-component-reference > summary::-webkit-details-marker {
    display: none;
}

/* Barra compacta: visual de ferramenta, nao de card editorial. */
html body .ds-reference-trigger {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--slate-600);
    cursor: pointer;
    transition:
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition);
}

html body .ds-reference-trigger:hover {
    border-color: var(--blue-100);
    background: var(--blue-50);
    color: var(--blue-800);
}

html body .ds-reference-trigger__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

html body .ds-reference-trigger__label > .pi {
    color: var(--color-primary);
    font-size: 0.78rem;
}

html body .ds-reference-trigger__label strong {
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

html body .ds-reference-trigger__chevron {
    color: var(--slate-400);
    font-size: 0.65rem;
    transition: transform var(--transition);
}

html body .ds-component-reference[open] > .ds-reference-trigger {
    border-color: var(--blue-100);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--blue-50);
    color: var(--blue-800);
}

html body .ds-component-reference[open] > .ds-reference-trigger .ds-reference-trigger__chevron {
    transform: rotate(180deg);
}

/* Conteudo expandido */
html body .ds-component-reference__body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--blue-100);
    border-top: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    background: var(--white);
}

/* Metadados em uma faixa discreta, sem cards dentro de cards. */
html body .ds-reference-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0.1rem 0 0.35rem;
}

html body .ds-reference-meta__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

html body .ds-reference-meta__item > span {
    color: var(--slate-500);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

html body .ds-ref-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

html body .ds-ref-chip {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--blue-100);
    border-radius: 0.35rem;
    background: var(--blue-50);
    color: var(--blue-800);
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.68rem;
    line-height: 1.2;
}

html body .ds-ref-empty {
    color: var(--slate-400);
    font-size: 0.68rem;
}

/* Codigo */
html body .ds-reference-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

html body .ds-code-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--slate-800);
    border-radius: var(--radius-md);
    background: var(--slate-900);
}

html body .ds-code-card__header {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.45rem 0.55rem 0.45rem 0.85rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    background: var(--slate-900);
}

html body .ds-code-card__header > strong {
    color: var(--slate-400);
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html body .ds-copy-button {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 0.4rem;
    background: rgb(255 255 255 / 0.05);
    color: var(--slate-300);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 650;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
}

html body .ds-copy-button .pi {
    font-size: 0.72rem;
}

html body .ds-copy-button:hover {
    border-color: rgb(255 255 255 / 0.24);
    background: rgb(255 255 255 / 0.1);
    color: var(--white);
}

html body .ds-copy-button.is-copied {
    border-color: rgb(208 234 86 / 0.45);
    background: rgb(208 234 86 / 0.12);
    color: var(--color-accent);
}

html body .ds-code-card pre {
    max-height: 24rem;
    margin: 0;
    overflow: auto;
    padding: 0.9rem 1rem 1rem;
    background: var(--slate-900);
    color: #e8edf3;
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.72rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
}

html body .ds-code-card code {
    font-family: inherit;
    color: inherit;
}

@media (max-width: 48rem) {
    html body .ds-component-reference--section {
        margin-inline: var(--space-4);
    }

    html body .ds-reference-trigger {
        width: 100%;
    }

    html body .ds-reference-meta {
        display: grid;
        gap: var(--space-2);
    }

    html body .ds-code-card pre {
        max-height: 18rem;
        font-size: 0.68rem;
    }
}

/* Botao compacto de referencia de codigo */
html body .ds-reference-trigger,
html body .ds-component-reference[open] > .ds-reference-trigger {
    border-radius: var(--radius-pill) !important;
}

/* ============================================================================
   DESIGN SYSTEM - REVISAO DE COMPONENTES
   ============================================================================ */

/* Scrollspy da sidebar interna */
html body .design-system-nav a.is-active {
    background: var(--color-primary) !important;
    color: var(--white) !important;
    font-weight: 700;
}

/* Accent outline: o title do componente documenta que a variante e exclusiva
   para fundos Primary/Dark. Mantem hover sutil. */
html body .ui-button.button--accent-outline:hover:not(.ui-state-disabled):not(:disabled) {
    border-color: var(--color-accent) !important;
    background: rgb(208 234 86 / 0.08) !important;
    color: var(--color-accent) !important;
}

/* Copiar: confirmacao em Lime 500 sobre o bloco escuro. */
html body .ds-copy-button.is-copied {
    border-color: var(--lime-500) !important;
    background: rgb(208 234 86 / 0.12) !important;
    color: var(--lime-500) !important;
}

/* Spinner: restaura os dois botoes PrimeFaces, empilhados na direita.
   Skin nativa do p:spinner cru, sem depender de styleClass. */
html body .ui-spinner {
    position: relative;
    display: inline-flex;
    width: min(100%, 14rem);
}

html body .ui-spinner .ui-spinner-input {
    width: 100%;
    padding-right: 2.75rem !important;
}

html body .ui-spinner .ui-spinner-button {
    position: absolute !important;
    right: 0 !important;
    display: grid !important;
    width: 2.5rem !important;
    height: calc(var(--control-height) / 2) !important;
    min-height: 0 !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border: 1px solid var(--slate-200) !important;
    border-radius: 0 !important;
    background: var(--white) !important;
    color: var(--slate-600) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .ui-spinner .ui-spinner-up {
    top: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    border-top-right-radius: var(--radius-md) !important;
}

html body .ui-spinner .ui-spinner-down {
    bottom: 0 !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

html body .ui-spinner .ui-spinner-button:hover {
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-spinner .ui-spinner-button .ui-icon,
html body .ui-spinner .ui-spinner-button .pi {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
    font-size: 0.7rem !important;
}

/* Textarea de demonstracao */
html body .ds-textarea-large {
    width: min(100%, 46rem) !important;
    min-height: 9rem !important;
    resize: vertical !important;
}

/* Selecao */
html body .ds-select.ui-selectonemenu,
html body .ds-select.ui-selectcheckboxmenu {
    width: min(100%, 22rem) !important;
}

html body .ui-selectonemenu-panel,
html body .ui-selectcheckboxmenu-panel {
    z-index: 1200 !important;
}

html body .ds-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

html body .ds-radio-group td,
html body .ds-radio-group .ui-g-12 {
    padding: 0 !important;
}

html body .ds-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

html body .ds-slider-demo {
    display: grid;
    width: min(100%, 24rem);
    grid-template-columns: 5rem minmax(10rem, 1fr);
    align-items: center;
    gap: var(--space-4);
}

html body .ds-slider-value {
    width: 5rem !important;
}

html body .ui-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 0.4rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--slate-200) !important;
}

html body .ui-slider .ui-slider-range {
    height: 100% !important;
    border-radius: var(--radius-pill) !important;
    background: var(--color-primary) !important;
}

html body .ui-slider .ui-slider-handle {
    position: absolute !important;
    top: 50% !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin-top: -0.575rem !important;
    margin-left: -0.575rem !important;
    border: 3px solid var(--color-primary) !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-xs) !important;
}

/* Tabela no padrao do prototipo SGC. Skin nativa: aplica em qualquer
   p:dataTable cru, sem depender de styleClass. */
html body .ui-datatable:not(.ui-datatable-scrollable) {
    overflow: hidden;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-float);
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-datatable-tablewrapper {
    overflow-x: auto;
}

html body .ui-datatable:not(.ui-datatable-scrollable) tbody td {
    vertical-align: middle;
}

html body .ui-datatable:not(.ui-datatable-scrollable) tbody tr:last-child > td {
    border-bottom: 0 !important;
}

html body .ds-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

html body .ui-button.table-action.table-action--danger {
    border-color: var(--red-100) !important;
    color: var(--red-700) !important;
}

html body .ui-button.table-action.table-action--danger:hover {
    border-color: var(--red-700) !important;
    background: var(--red-100) !important;
    color: var(--red-700) !important;
}

/* Painel recolhivel */
html body .ds-panel-demo-actions {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

html body .ds-panel-control {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: var(--space-1);
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--slate-700);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
}

html body .ds-panel-control:hover {
    border-color: var(--color-primary);
    background: var(--blue-50);
    color: var(--color-primary);
}

html body .ds-toggle-panel .ui-panel-titlebar {
    position: relative;
    cursor: pointer;
}

html body .ds-toggle-panel .ui-panel-titlebar-icon,
html body .ds-toggle-panel .ui-panel-titlebar-toggler {
    display: inline-grid !important;
    width: 2rem !important;
    height: 2rem !important;
    place-items: center;
    border-radius: 50% !important;
    color: var(--color-primary) !important;
}

html body .ds-toggle-panel .ui-panel-titlebar-icon:hover,
html body .ds-toggle-panel .ui-panel-titlebar-toggler:hover {
    background: var(--blue-50) !important;
}

/* ============================================================================
   DESIGN SYSTEM - BOTOES E ACOES / AJUSTES FINAIS
   ============================================================================ */

/* Tooltip PrimeFaces usado pelos botoes Accent outline. */
html body .ui-tooltip .ui-tooltip-text {
    max-width: 22rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-dark);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
}

/* ============================================================================
   DESIGN SYSTEM - BOTOES E ACOES / REVISAO LOCAL
   Ajustes exclusivos da demonstracao no Design System.
   ============================================================================ */

/* Tooltip de uso do Accent outline: independente do widget PrimeFaces. */
html body .ds-usage-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

html body .ds-usage-tooltip__content {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.65rem);
    z-index: 3000;
    width: max-content;
    max-width: 20rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-md);
    background: var(--color-dark);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 0.25rem);
    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);
}

html body .ds-usage-tooltip__content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 0.35rem solid transparent;
    border-top-color: var(--color-dark);
    transform: translateX(-50%);
}

html body .ds-usage-tooltip:hover .ds-usage-tooltip__content,
html body .ds-usage-tooltip:focus-within .ds-usage-tooltip__content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ============================================================================
   COMPONENTES - VISUAL DO DESIGN SYSTEM
   A pagina continua usando template_portal.xhtml para manter a infraestrutura
   JSF/PrimeFaces que ja funcionava em componentes.xhtml.
   ============================================================================ */

/* Oculta apenas o shell visual do portal nesta pagina.
   Os recursos carregados pelo template continuam presentes. */
html body:has(.componentes-design-system) .layout-wrapper .layout-menu-container,
html body:has(.componentes-design-system) .layout-wrapper .ui-toolbar.topbarPortal,
html body:has(.componentes-design-system) .layout-wrapper .layout-topbar {
    display: none !important;
}

html body:has(.componentes-design-system) .layout-wrapper .layout-main,
html body:has(.componentes-design-system) .layout-wrapper.layout-static .layout-main {
    margin-left: 0 !important;
    padding-top: 0 !important;
}

html body:has(.componentes-design-system) .layout-wrapper .layout-main .layout-content {
    min-height: 100vh;
    padding: 0 !important;
    background: var(--color-background);
}

html body .componentes-design-system {
    width: min(100%, 100rem);
    min-height: 100vh;
    margin: 0 auto;
    padding: 2rem var(--page-gutter) 4rem;
    color: var(--color-text);
    font-family: var(--font-sans);
}

html body .componentes-design-system .design-system-layout {
    display: grid !important;
    grid-template-columns: 13.5rem minmax(0, 1fr) !important;
    gap: var(--space-6) !important;
    align-items: start;
}

html body .componentes-design-system .design-system-nav {
    position: sticky !important;
    top: var(--space-6);
    display: flex !important;
    max-height: calc(100vh - (2 * var(--space-6)));
    flex-direction: column;
    gap: var(--space-3);
    overflow: auto;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-float);
}

html body .componentes-design-system .design-system-nav nav {
    display: grid;
    gap: 0.2rem;
}

html body .componentes-design-system .design-system-nav a {
    padding: 0.48rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition:
        background-color var(--transition),
        color var(--transition);
}

html body .componentes-design-system .design-system-nav a:hover {
    background: var(--blue-50);
    color: var(--color-primary);
}

html body .componentes-design-system .design-system-nav a.is-active {
    background: var(--color-primary) !important;
    color: var(--white) !important;
    font-weight: 700;
}

html body .componentes-design-system .design-system-nav > small {
    padding-top: var(--space-3);
    border-top: 1px solid var(--slate-100);
    color: var(--slate-500);
    font-size: var(--font-size-xs);
}

html body .componentes-design-system .design-system-content {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
}

html body .componentes-design-system .componentes-section {
    scroll-margin-top: var(--space-6);
}

/* O antigo TabView principal foi removido apenas como estrutura de navegacao.
   TabViews que sao exemplos de componentes continuam intactos. */
html body .componentes-design-system .design-system-section {
    min-width: 0;
}

html body .componentes-design-system .design-system-demo-row {
    width: 100%;
}

@media (max-width: 64rem) {
    html body .componentes-design-system .design-system-layout {
        grid-template-columns: 1fr !important;
    }

    html body .componentes-design-system .design-system-nav {
        position: static !important;
        max-height: none;
    }

    html body .componentes-design-system .design-system-nav nav {
        display: flex;
        overflow-x: auto;
        gap: var(--space-2);
    }

    html body .componentes-design-system .design-system-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 40rem) {
    html body .componentes-design-system {
        padding-inline: var(--space-4);
    }
}

/* ============================================================================
   COMPONENTES - FASE 1B / DOCUMENTACAO DE BOTOES
   Documentacao aplicada somente a secao Botões e ações.
   ============================================================================ */

html body .componentes-design-system #botoes .ds-component-reference {
    margin-top: 0.65rem;
}

html body .componentes-design-system #botoes .ds-copy-button.is-copied,
html body .componentes-design-system #botoes .ds-copy-button.is-copied:hover {
    border-color: var(--lime-500) !important;
    background: rgb(208 234 86 / 0.12) !important;
    color: var(--lime-500) !important;
}

/* ============================================================================
   COMPONENTES - BOTOES E ACOES / COMPLEMENTOS DO DS
   Accent outline, link contextual e ToggleSwitch de status.
   ============================================================================ */

/* ToggleSwitch permanece 100% nativo do PrimeFaces.
   Apenas as cores dos estados são alteradas. */
html body .toggle-switch--status.ui-toggleswitch .ui-toggleswitch-slider {
    background: var(--red-700) !important;
}

html body .toggle-switch--status.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--green-700) !important;
}

/* O handler continua usando o posicionamento nativo já homologado no mury.css. */
html body .toggle-switch--status.ui-toggleswitch .ui-toggleswitch-handler {
    background: var(--white) !important;
}

/* ============================================================================
   COMPONENTES - DATAS / DATEPICKER HOMOLOGADO
   Mantem integralmente o comportamento nativo do PrimeFaces.
   As regras abaixo alteram somente aparencia.
   ============================================================================ */

html body .ui-datepicker {
    border: 1px solid var(--slate-200) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

html body .ui-datepicker .ui-datepicker-header {
    border: 0 !important;
    background: var(--white) !important;
    color: var(--color-text) !important;
}

html body .ui-datepicker .ui-datepicker-prev,
html body .ui-datepicker .ui-datepicker-next {
    color: var(--color-primary) !important;
}

html body .ui-datepicker .ui-datepicker-calendar td > a,
html body .ui-datepicker .ui-datepicker-calendar td > span {
    border-radius: var(--radius-sm) !important;
}

html body .ui-datepicker .ui-datepicker-calendar td > a:hover {
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-datepicker .ui-state-highlight,
html body .ui-datepicker .ui-state-active {
    background: var(--color-primary) !important;
    color: var(--white) !important;
}

html body .ui-datepicker .ui-timepicker {
    border-top: 1px solid var(--slate-100);
}

/* ============================================================================
   COMPONENTES - SELECAO / AJUSTES RADIO E SLIDER
   Corrige alinhamento do label no selectOneRadio e aplica Accent no slider.
   ============================================================================ */

/* PrimeFaces selectOneRadio responsive:
   mantém cada radio + texto lado a lado e evita quebra do label abaixo. */
html body .ds-radio-group .ui-g-12,
html body .ds-radio-group td {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    vertical-align: middle !important;
    gap: var(--space-2) !important;
    padding: 0 !important;
    margin-right: var(--space-4) !important;
}

html body .ds-radio-group label {
    display: inline-block !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

html body .ds-radio-group .ui-radiobutton {
    flex: 0 0 auto;
    margin: 0 !important;
}

/* Slider no Accent do Design System. */
html body .ui-slider .ui-slider-range {
    background: var(--color-accent) !important;
}

html body .ui-slider .ui-slider-handle {
    border-color: var(--color-accent) !important;
}

/* ============================================================================
   COMPONENTES - SELECAO / FILTROS BLUE 100
   Substitui o amarelo herdado do tema Olympia nos filtros dos selects.
   ============================================================================ */

html body .ui-selectonemenu-panel .ui-selectonemenu-filter-container,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-filter-container {
    background: var(--blue-100) !important;
    border-color: var(--blue-100) !important;
}

/* Mantém o campo de busca branco para contraste e leitura. */
html body .ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-inputfield,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-inputfield,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-filter-container .ui-inputfield {
    background: var(--white) !important;
}

/* ============================================================================
   COMPONENTES - SELECAO / REMOVE AMARELO CHECKBOX MENU
   Neutraliza bordas/sombras residuais herdadas do Olympia.
   ============================================================================ */

html body .ui-selectcheckboxmenu-panel {
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
}

html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header {
    border: 0 !important;
    border-bottom: 1px solid var(--blue-100) !important;
    box-shadow: none !important;
}

html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper,
html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--white) !important;
}

html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================================
   COMPONENTES - TABELAS / PADRAO PROTOTIPO SGC
   Referencia: index.html + styles.css enviados para homologacao da tabela.
   ============================================================================ */

/* O prototipo usa o corpo da secao sem padding ao redor da tabela. */
html body .ds-table-fieldset.ui-fieldset {
    overflow: hidden;
}

html body .ds-table-fieldset.ui-fieldset .ui-fieldset-content {
    padding: 0 !important;
}

/* Superficie */
html body .ui-datatable:not(.ui-datatable-scrollable) {
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--white) !important;
    box-shadow: none !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-datatable-tablewrapper {
    overflow-x: auto;
}

html body .ui-datatable:not(.ui-datatable-scrollable) table {
    width: 100% !important;
    min-width: 42rem;
    border-collapse: collapse !important;
}

/* Cabecalho */
html body .ui-datatable:not(.ui-datatable-scrollable) thead > tr > th {
    padding: 0.8rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white) !important;
    color: var(--slate-500) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Celulas e linhas */
html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr {
    background: var(--white) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr:hover {
    background: var(--blue-50) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr > td {
    padding: 0.8rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: transparent !important;
    color: var(--slate-700) !important;
    font-size: var(--font-size-sm) !important;
    vertical-align: middle;
}

html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* Filtro de coluna no mesmo vocabulário dos controls do protótipo. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-column-filter {
    width: 100% !important;
    min-height: 2.35rem !important;
    margin-top: 0.45rem !important;
    padding: 0.5rem 0.65rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-xs) !important;
    text-transform: none;
    letter-spacing: normal;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-column-filter:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgb(0 71 187 / 0.12) !important;
}

/* Status no formato de badge/pill do protótipo. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag {
    display: inline-flex !important;
    align-items: center;
    padding: 0.35rem 0.65rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag-success {
    background: var(--green-100) !important;
    color: var(--green-700) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag-warning {
    background: var(--amber-100) !important;
    color: var(--amber-700) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag-danger {
    background: var(--red-100) !important;
    color: var(--red-700) !important;
}

/* Acoes compactas como icon-button. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

/* Paginacao equivalente ao footer.pagination do protótipo. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator {
    display: flex !important;
    min-height: auto !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem !important;
    border: 0 !important;
    border-top: 1px solid var(--color-border) !important;
    background: var(--white) !important;
    color: var(--color-muted) !important;
    font-size: var(--font-size-xs) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-rpp-options {
    width: 4.5rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--color-text) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-current {
    margin: 0 0.25rem !important;
    color: var(--color-muted) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-prev,
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-next,
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-page {
    display: inline-grid !important;
    width: 2.6rem !important;
    min-width: 2.6rem !important;
    height: 2.6rem !important;
    place-items: center;
    margin: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--slate-700) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-page.ui-state-active {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--white) !important;
}

html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-state-disabled {
    opacity: 0.45 !important;
}

@media (max-width: 620px) {
    html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ============================================================================
   COMPONENTES - TABELAS / ACABAMENTO DA REFERENCIA
   Cabecalho sem pesquisa, tabela sem moldura extra e paginacao compacta.
   Referencia: tabela enviada em index.html, styles.css e captura de tela.
   O comportamento de ordenar e paginar permanece no PrimeFaces.
   ============================================================================ */

html body .componentes-design-system #tabelas {
    border-radius: 1.2rem;
}
html body .componentes-design-system #tabelas > .design-system-section-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
}
html body .componentes-design-system #tabelas > .design-system-section-body {
    padding: 0 !important;
    gap: 0;
}
html body .componentes-design-system #tabelas .ds-table-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--white);
    box-shadow: none;
}
html body .componentes-design-system #tabelas > .design-system-section-body > .ds-component-reference {
    margin: var(--space-4) var(--space-6) var(--space-6);
}
html body .componentes-design-system #tabelas > .design-system-section-body > .ui-fieldset {
    margin: 0 var(--space-6) var(--space-4);
}

/* Tabela: skin nativa, aplica em qualquer p:dataTable do sistema. */
html body .ui-datatable:not(.ui-datatable-scrollable) {
    width: 100%;
    margin: 0;
    font-family: var(--font-sans);
}
html body .ui-datatable:not(.ui-datatable-scrollable) > .ui-datatable-tablewrapper > table {
    width: 100% !important;
    min-width: 52rem;
    table-layout: auto !important;
    border-collapse: collapse !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) thead > tr > th {
    padding: 0.8rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white) !important;
    color: var(--slate-500) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: var(--line-height-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-column-title {
    display: inline-block;
    vertical-align: middle;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-column-header-content {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-sortable-column-icon {
    float: none;
    margin: 0 0 0 0.4rem;
    vertical-align: middle;
    color: var(--slate-400);
}
html body .ui-datatable:not(.ui-datatable-scrollable) th.ui-state-active .ui-sortable-column-icon {
    color: var(--color-primary);
}
html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr > td {
    padding: 0.8rem 1rem !important;
    border-bottom: 1px solid var(--slate-100) !important;
    color: var(--slate-700) !important;
    font-size: 0.82rem !important;
    line-height: var(--line-height-base);
    vertical-align: middle;
}
html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-primary-text,
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-amount {
    font-weight: 700;
    color: var(--slate-700);
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-col-amount,
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-col-actions {
    text-align: left !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) tbody > tr.ui-state-highlight > td {
    background: var(--blue-50) !important;
}

/* Badges no mesmo formato e nas cores da imagem de referencia. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag.ds-table-badge {
    padding: 0.35rem 0.65rem !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: var(--line-height-base);
    white-space: nowrap;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag-info {
    background: var(--blue-100) !important;
    color: var(--blue-800) !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-tag-warning {
    background: var(--amber-100) !important;
    color: var(--amber-700) !important;
}

/* Acoes: quadrados arredondados da referencia, sem substituir as acoes. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-actions {
    gap: var(--space-2);
    flex-wrap: nowrap;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-actions > .ui-button.table-action {
    width: 2.6rem !important;
    min-width: 2.6rem !important;
    height: 2.6rem !important;
    min-height: 2.6rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--slate-700) !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-actions > .ui-button.table-action:hover:not(.ui-state-disabled):not(:disabled) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: var(--white) !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-actions > .ui-button.table-action--danger:hover:not(.ui-state-disabled):not(:disabled) {
    border-color: var(--red-700) !important;
    color: var(--red-700) !important;
}

/* Linhas por pagina [10]  1-10 de N  [anterior]  1 de P  [proxima]. */
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-4) !important;
    border-top: 1px solid var(--color-border) !important;
    background: var(--white) !important;
    color: var(--color-muted) !important;
    font-size: 0.75rem !important;
    line-height: var(--line-height-base);
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-pagination-label,
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-record-range,
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-page-count {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--color-muted);
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-pagination-label {
    margin-right: -0.5rem;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-page-count {
    font-weight: 700;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator-rpp-options {
    flex: 0 0 4.5rem;
    width: 4.5rem !important;
    min-height: 2.4rem !important;
    height: 2.4rem;
    margin: 0 !important;
    padding: 0.45rem 0.6rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    font-family: var(--font-sans);
    font-size: 0.75rem !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator-prev,
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator-next {
    display: inline-flex !important;
    flex: 0 0 2.6rem;
    align-items: center;
    justify-content: center;
    width: 2.6rem !important;
    min-width: 2.6rem !important;
    height: 2.6rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--slate-700) !important;
    box-shadow: none !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator-prev:not(.ui-state-disabled):hover,
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator-next:not(.ui-state-disabled):hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-state-disabled {
    opacity: 0.45 !important;
    cursor: not-allowed;
}
/* O relatorio nativo continua disponivel aos leitores de tela.
   Sem o formatador, ele permanece visivel e a paginacao continua funcionando. */
html body .ui-datatable:not(.ui-datatable-scrollable) .has-mury-report .ui-paginator-current {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
}
@media (max-width: 620px) {
    html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator {
        justify-content: center;
        gap: var(--space-2);
    }
    html body .ui-datatable:not(.ui-datatable-scrollable) .ds-table-pagination-label {
        margin-right: 0;
    }
}

/* Painel de paginação customizado (usuarios.xhtml): em telas cheias os blocos ficam
   nas pontas (esquerda/direita); no mobile os dois centralizam, empilhados. */
html body .cadastro-pagination__right {
    float: right;
}
@media (max-width: 768px) {
    html body .cadastro-pagination__left,
    html body .cadastro-pagination__right {
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================================
   COMPONENTES - TABELAS / PAGINACAO TEXTO PRETO
   Mantem o valor selecionado em cor de texto neutra.
   ============================================================================ */
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-rpp-options,
html body .ui-datatable:not(.ui-datatable-scrollable) .ui-paginator .ui-paginator-rpp-options option {
    color: var(--color-text) !important;
}

/* ============================================================================
   COMPONENTES - TABELAS / CLONE DE CABECALHO (SCROLLABLE)
   O PrimeFaces cria um clone invisivel do thead (classe
   ui-datatable-scrollable-theadclone) soh para medir a largura das colunas,
   mantido colapsado via height:0 inline. Qualquer padding com !important nas
   celulas (ex.: a regra base "html body .ui-datatable thead th") quebra esse
   colapso e expoe o clone como uma segunda linha de cabecalho. Forca o clone
   de volta a altura zero, independente de outras regras de thead/th.
   ============================================================================ */
html body .ui-datatable-scrollable-theadclone,
html body .ui-datatable-scrollable-theadclone > tr {
    height: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

html body .ui-datatable-scrollable-theadclone > tr > th {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

/* ============================================================================
   COMPONENTES - PAINEIS / HOMOLOGACAO
   Ajustes visuais. O comportamento permanece nativo do PrimeFaces.
   ============================================================================ */

html body .ui-panel {
    overflow: hidden;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-xs) !important;
}

html body .ui-panel .ui-panel-titlebar {
    padding: var(--space-4) var(--space-5) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    background: var(--white) !important;
    color: var(--color-text) !important;
}

html body .ui-panel .ui-panel-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    background: var(--white) !important;
}

html body .ui-panel .ui-panel-titlebar-icon,
html body .ui-panel .ui-panel-titlebar-toggler {
    color: var(--color-primary) !important;
}

html body .ui-panel .ui-panel-titlebar-icon:hover,
html body .ui-panel .ui-panel-titlebar-toggler:hover {
    background: var(--blue-50) !important;
    border-radius: 50% !important;
}

html body .ui-accordion .ui-accordion-header {
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    color: var(--slate-700) !important;
}

html body .ui-accordion .ui-accordion-header.ui-state-active {
    border-color: var(--blue-100) !important;
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-accordion .ui-accordion-header .ui-icon,
html body .ui-accordion .ui-accordion-header .ui-accordion-toggle-icon {
    color: var(--color-primary) !important;
}

html body .ui-fieldset {
    border-color: var(--slate-100) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--white) !important;
}

html body .ui-fieldset .ui-fieldset-legend {
    color: var(--color-text) !important;
}

html body .ui-fieldset .ui-fieldset-toggler {
    color: var(--color-primary) !important;
}

/* ============================================================================
   COMPONENTES - MENSAGENS E DIALOGOS / HOMOLOGACAO
   Feedbacks, status e acionamento de dialogo no padrao visual do SGC.
   ============================================================================ */

html body .ds-feedback-actions,
html body .ds-status-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Messages */
html body .ui-messages {
    margin: 0 !important;
}

html body .ui-messages > div {
    padding: var(--space-4) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}

html body .ui-messages .ui-messages-info {
    border-color: var(--blue-100) !important;
    background: var(--blue-50) !important;
    color: var(--blue-800) !important;
}

html body .ui-messages .ui-messages-warn {
    border-color: var(--amber-100) !important;
    background: #fffbef !important;
    color: var(--amber-700) !important;
}

html body .ui-messages .ui-messages-error,
html body .ui-messages .ui-messages-fatal {
    border-color: var(--red-100) !important;
    background: #fff6f6 !important;
    color: var(--red-700) !important;
}

/* Tags e badges: formato pill do Design System. */
html body .ds-status-group .ui-tag,
html body .ds-status-group .ui-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.35rem 0.65rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body .ds-status-group .ui-tag-success,
html body .ds-status-group .ui-badge-success {
    background: var(--green-100) !important;
    color: var(--green-700) !important;
}

html body .ds-status-group .ui-tag-warning,
html body .ds-status-group .ui-badge-warning {
    background: var(--amber-100) !important;
    color: var(--amber-700) !important;
}

html body .ds-status-group .ui-tag-danger,
html body .ds-status-group .ui-badge-danger {
    background: var(--red-100) !important;
    color: var(--red-700) !important;
}

html body .ds-status-group .ui-tag-info,
html body .ds-status-group .ui-badge-info {
    background: var(--blue-100) !important;
    color: var(--blue-800) !important;
}

/* Variante neutra */
html body .ds-status-group .ui-tag:not(.ui-tag-success):not(.ui-tag-warning):not(.ui-tag-danger):not(.ui-tag-info) {
    background: var(--slate-100) !important;
    color: var(--slate-700) !important;
}

/* ============================================================================
   COMPONENTES - GROWL / PADRAO TOAST SGC
   Base visual inspirada no toast do prototipo enviado:
   canto inferior direito, card compacto, icone circular e fechamento a direita.
   Mantem as cores semanticas de cada severidade.
   ============================================================================ */

/* Região fixa no canto inferior direito. */
html body .ui-growl {
    position: fixed !important;
    top: auto !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    z-index: 7000 !important;
    width: min(24rem, calc(100vw - 2.5rem)) !important;
}

/* Cada mensagem passa a se comportar como um toast do SGC. */
html body .ui-growl .ui-growl-item-container {
    width: 100% !important;
    margin: 0 0 0.75rem !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 16px 42px rgb(5 10 17 / 0.22) !important;
    opacity: 1 !important;
}

html body .ui-growl .ui-growl-item {
    display: flex !important;
    min-height: 4.35rem;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.85rem 1rem !important;
}

/* Cores semanticas preservadas. */
html body .ui-growl .ui-growl-item-container.ui-growl-info {
    background: var(--color-dark) !important;
    color: var(--white) !important;
}

html body .ui-growl .ui-growl-item-container.ui-growl-warn {
    background: var(--amber-500) !important;
    color: var(--white) !important;
}

html body .ui-growl .ui-growl-item-container.ui-growl-error,
html body .ui-growl .ui-growl-item-container.ui-growl-fatal {
    background: var(--red-700) !important;
    color: var(--white) !important;
}

/* Icone circular a esquerda, como na referencia. */
html body .ui-growl .ui-growl-image {
    position: static !important;
    display: grid !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    margin: 0 !important;
    place-items: center;
    border-radius: 50% !important;
    background: var(--color-accent) !important;
    color: var(--color-text) !important;
    font-size: 1rem !important;
}

/* Texto ocupa o miolo do toast. */
html body .ui-growl .ui-growl-message {
    float: none !important;
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

html body .ui-growl .ui-growl-title {
    display: block !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

html body .ui-growl .ui-growl-message p {
    margin: 0.1rem 0 0 !important;
    color: rgb(255 255 255 / 0.72) !important;
    font-size: var(--font-size-xs) !important;
    line-height: 1.35 !important;
}

/* Fechar no lado direito, sem o botao quadrado padrao do tema. */
html body .ui-growl .ui-growl-icon-close {
    position: static !important;
    display: grid !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    margin-left: auto !important;
    place-items: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--white) !important;
    font-size: 0.9rem !important;
    opacity: 0.9;
}

html body .ui-growl .ui-growl-icon-close:hover {
    background: rgb(255 255 255 / 0.10) !important;
    opacity: 1;
}

@media (max-width: 620px) {
    html body .ui-growl {
        right: 1rem !important;
        bottom: 1rem !important;
        width: calc(100vw - 2rem) !important;
    }
}

/* ============================================================================
   COMPONENTES - GROWL / CORES SEMANTICAS SOLIDAS
   Uma unica familia de cor por severidade, usando apenas tokens do root.
   ============================================================================ */

html body .ui-growl .ui-growl-item-container.ui-growl-info {
    background: var(--blue-800) !important;
    color: var(--white) !important;
}

html body .ui-growl .ui-growl-item-container.ui-growl-warn {
    background: var(--amber-700) !important;
    color: var(--white) !important;
}

html body .ui-growl .ui-growl-item-container.ui-growl-error {
    background: var(--red-700) !important;
    color: var(--white) !important;
}

html body .ui-growl .ui-growl-item-container.ui-growl-fatal {
    background: var(--violet-700) !important;
    color: var(--white) !important;
}

/* O icone acompanha a severidade sem introduzir uma segunda cor de destaque. */
html body .ui-growl .ui-growl-item-container .ui-growl-image {
    background: rgb(255 255 255 / 0.16) !important;
    color: var(--white) !important;
}

html body .ui-growl .ui-growl-item-container .ui-growl-message p {
    color: rgb(255 255 255 / 0.76) !important;
}

/* ============================================================================
   COMPONENTES - GROWL / BOTOES POR SEVERIDADE
   As ações de simulação usam a mesma cor do Growl correspondente.
   ============================================================================ */

html body .ui-button.growl-action {
    border-color: transparent !important;
    color: var(--white) !important;
}

html body .ui-button.growl-action--info {
    background: var(--blue-800) !important;
}

html body .ui-button.growl-action--warn {
    background: var(--amber-500) !important;
}

html body .ui-button.growl-action--error {
    background: var(--red-700) !important;
}

html body .ui-button.growl-action--fatal {
    background: var(--violet-700) !important;
}

/* ============================================================================
   COMPONENTES - GROWL / CORRECAO FINAL CORES E HOVER
   Mantem as cores dos botoes no hover e fixa Aviso em Amber 500.
   ============================================================================ */

/* Aviso: fundo integral em Amber 500. */
html body .ui-growl .ui-growl-item-container.ui-growl-warn {
    background: var(--amber-500) !important;
    color: var(--white) !important;
}

/* Os botoes de simulacao nao mudam de cor no hover/focus. */
html body .ui-button.growl-action--info:hover,
html body .ui-button.growl-action--info:focus {
    background: var(--blue-800) !important;
    color: var(--white) !important;
    transform: none !important;
}

html body .ui-button.growl-action--warn:hover,
html body .ui-button.growl-action--warn:focus {
    background: var(--amber-500) !important;
    color: var(--white) !important;
    transform: none !important;
}

html body .ui-button.growl-action--error:hover,
html body .ui-button.growl-action--error:focus {
    background: var(--red-700) !important;
    color: var(--white) !important;
    transform: none !important;
}

html body .ui-button.growl-action--fatal:hover,
html body .ui-button.growl-action--fatal:focus {
    background: var(--violet-700) !important;
    color: var(--white) !important;
    transform: none !important;
}

/* ============================================================================
   COMPONENTES - P:MESSAGES / CORES SEMANTICAS SUAVES
   Mesmas familias definidas para o Growl, com fundos de baixa opacidade.
   ============================================================================ */

html body .ui-messages .ui-messages-info {
    border-color: rgb(0 63 168 / 0.20) !important;
    background: rgb(0 63 168 / 0.08) !important;
    color: var(--blue-800) !important;
}

html body .ui-messages .ui-messages-warn {
    border-color: rgb(255 131 29 / 0.22) !important;
    background: rgb(255 131 29 / 0.10) !important;
    color: var(--amber-500) !important;
}

html body .ui-messages .ui-messages-error {
    border-color: rgb(180 35 24 / 0.20) !important;
    background: rgb(180 35 24 / 0.08) !important;
    color: var(--red-700) !important;
}

html body .ui-messages .ui-messages-fatal {
    border-color: rgb(105 65 198 / 0.20) !important;
    background: rgb(105 65 198 / 0.08) !important;
    color: var(--violet-700) !important;
}

/* Ícones e textos acompanham a cor semântica da própria mensagem. */
html body .ui-messages .ui-messages-info .ui-messages-info-icon,
html body .ui-messages .ui-messages-info .ui-messages-summary,
html body .ui-messages .ui-messages-info .ui-messages-detail {
    color: var(--blue-800) !important;
}

html body .ui-messages .ui-messages-warn .ui-messages-warn-icon,
html body .ui-messages .ui-messages-warn .ui-messages-summary,
html body .ui-messages .ui-messages-warn .ui-messages-detail {
    color: var(--amber-500) !important;
}

html body .ui-messages .ui-messages-error .ui-messages-error-icon,
html body .ui-messages .ui-messages-error .ui-messages-summary,
html body .ui-messages .ui-messages-error .ui-messages-detail {
    color: var(--red-700) !important;
}

html body .ui-messages .ui-messages-fatal .ui-messages-fatal-icon,
html body .ui-messages .ui-messages-fatal .ui-messages-summary,
html body .ui-messages .ui-messages-fatal .ui-messages-detail {
    color: var(--violet-700) !important;
}

/* ============================================================================
   COMPONENTES - GROWL / SOMENTE APOS ACAO DO USUARIO
   Evita mensagens automáticas no carregamento da página de componentes.
   O Growl é liberado pelo clique nos botões .growl-action.
   ============================================================================ */

html body:not(.ds-growl-enabled) .ui-growl {
    display: none !important;
}

/* ============================================================================
   COMPONENTES - DIALOG / SOMENTE APOS CLIQUE
   O dialog de exemplo fica bloqueado ate o usuario clicar em "Abrir dialogo".
   Isso neutraliza qualquer show tardio disparado durante a inicializacao.
   ============================================================================ */

html body:not(.ds-demo-dialog-enabled) .ds-demo-dialog.ui-dialog {
    display: none !important;
}

html body:not(.ds-demo-dialog-enabled) [id$="dlgDemo_modal"] {
    display: none !important;
}

/* ============================================================================
   COMPONENTES - P:MESSAGES / ICONES MATERIAL SYMBOLS
   Substitui os glifos do tema pelos Material Symbols Rounded.
   ============================================================================ */

html body .ui-messages .ui-messages-info-icon,
html body .ui-messages .ui-messages-warn-icon,
html body .ui-messages .ui-messages-error-icon,
html body .ui-messages .ui-messages-fatal-icon {
    display: inline-grid !important;
    width: 1.65rem !important;
    min-width: 1.65rem !important;
    height: 1.65rem !important;
    margin-right: 0.45rem !important;
    place-items: center;
    background: none !important;
    background-image: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

html body .ui-messages .ui-messages-info-icon::before,
html body .ui-messages .ui-messages-warn-icon::before,
html body .ui-messages .ui-messages-error-icon::before,
html body .ui-messages .ui-messages-fatal-icon::before {
    font-family: "Material Symbols Rounded" !important;
    font-size: 1.55rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

html body .ui-messages .ui-messages-info-icon::before {
    content: "info";
    color: var(--blue-800);
}

html body .ui-messages .ui-messages-warn-icon::before {
    content: "warning";
    color: var(--amber-500);
}

html body .ui-messages .ui-messages-error-icon::before {
    content: "error";
    color: var(--red-700);
}

html body .ui-messages .ui-messages-fatal-icon::before {
    content: "block";
    color: var(--violet-700);
}

/* O X exibido no topo pertence ao p:messages e, neste exemplo,
   acompanha a primeira severidade apresentada: Erro. */
html body .ui-messages .ui-messages-close,
html body .ui-messages .ui-messages-close .ui-icon,
html body .ui-messages .ui-messages-close-icon {
    color: var(--red-700) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .ui-messages .ui-messages-close:hover,
html body .ui-messages .ui-messages-close:focus {
    color: var(--red-700) !important;
    background: rgb(180 35 24 / 0.08) !important;
}

/* ============================================================================
   COMPONENTES - P:MESSAGES / ICONES E FECHAR POR STATUS
   Cada severidade usa ícone e botão de fechar coerentes com sua cor.
   ============================================================================ */

/* Ícones: círculo chapado + símbolo branco. */
html body .ui-messages .ui-messages-info-icon,
html body .ui-messages .ui-messages-warn-icon,
html body .ui-messages .ui-messages-error-icon,
html body .ui-messages .ui-messages-fatal-icon {
    width: 1.7rem !important;
    min-width: 1.7rem !important;
    height: 1.7rem !important;
    border-radius: 50% !important;
    background-image: none !important;
}

html body .ui-messages .ui-messages-info-icon {
    background: var(--blue-800) !important;
}

html body .ui-messages .ui-messages-warn-icon {
    background: var(--amber-500) !important;
}

html body .ui-messages .ui-messages-error-icon {
    background: var(--red-700) !important;
}

html body .ui-messages .ui-messages-fatal-icon {
    background: var(--violet-700) !important;
}

html body .ui-messages .ui-messages-info-icon::before,
html body .ui-messages .ui-messages-warn-icon::before,
html body .ui-messages .ui-messages-error-icon::before,
html body .ui-messages .ui-messages-fatal-icon::before {
    color: var(--white) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

/* Símbolos coerentes com cada status. */
html body .ui-messages .ui-messages-info-icon::before {
    content: "info";
}

html body .ui-messages .ui-messages-warn-icon::before {
    content: "chat_bubble";
}

html body .ui-messages .ui-messages-error-icon::before {
    content: "error";
}

html body .ui-messages .ui-messages-fatal-icon::before {
    content: "error";
}

/* Botão X de fechar: cada mensagem acompanha a própria severidade. */
html body .ui-messages .ui-messages-info .ui-messages-close {
    background: var(--blue-800) !important;
    color: var(--white) !important;
}

html body .ui-messages .ui-messages-warn .ui-messages-close {
    background: var(--amber-500) !important;
    color: var(--white) !important;
}

html body .ui-messages .ui-messages-error .ui-messages-close {
    background: var(--red-700) !important;
    color: var(--white) !important;
}

html body .ui-messages .ui-messages-fatal .ui-messages-close {
    background: var(--violet-700) !important;
    color: var(--white) !important;
}

html body .ui-messages .ui-messages-close {
    display: grid !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    place-items: center;
    border-radius: 50% !important;
    box-shadow: none !important;
}

html body .ui-messages .ui-messages-close .ui-icon,
html body .ui-messages .ui-messages-close-icon {
    color: var(--white) !important;
    background: transparent !important;
}

/* Mantém a própria cor no hover/focus. */
html body .ui-messages .ui-messages-info .ui-messages-close:hover,
html body .ui-messages .ui-messages-info .ui-messages-close:focus {
    background: var(--blue-800) !important;
}

html body .ui-messages .ui-messages-warn .ui-messages-close:hover,
html body .ui-messages .ui-messages-warn .ui-messages-close:focus {
    background: var(--amber-500) !important;
}

html body .ui-messages .ui-messages-error .ui-messages-close:hover,
html body .ui-messages .ui-messages-error .ui-messages-close:focus {
    background: var(--red-700) !important;
}

html body .ui-messages .ui-messages-fatal .ui-messages-close:hover,
html body .ui-messages .ui-messages-fatal .ui-messages-close:focus {
    background: var(--violet-700) !important;
}

/* ============================================================================
   COMPONENTES - P:MESSAGES / FORCE MATERIAL SYMBOLS
   Força os ligatures corretos contra ícones herdados do tema PrimeFaces.
   ============================================================================ */

html body .ui-messages .ui-messages-info-icon::before,
html body .ui-messages .ui-messages-warn-icon::before,
html body .ui-messages .ui-messages-error-icon::before,
html body .ui-messages .ui-messages-fatal-icon::before {
    font-family: "Material Symbols Rounded" !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-feature-settings: "liga" !important;
    -webkit-font-feature-settings: "liga" !important;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24 !important;
    text-indent: 0 !important;
}

html body .ui-messages .ui-messages-info-icon::before {
    content: "info" !important;
}

html body .ui-messages .ui-messages-warn-icon::before {
    content: "chat_bubble" !important;
}

html body .ui-messages .ui-messages-error-icon::before {
    content: "error" !important;
}

html body .ui-messages .ui-messages-fatal-icon::before {
    content: "error" !important;
}

/* ============================================================================
   COMPONENTES - NAVEGACAO / TABVIEW E PANELMENU REFERENCIA
   Base visual: navegacao segmentada do prototipo SGC.
   ============================================================================ */

/* TAB VIEW --------------------------------------------------------------- */
/*
 * Compatibilidade com as duas estruturas de markup encontradas no PrimeFaces:
 * - versões mais novas: .ui-tabview / .ui-tabview-nav
 * - versão do projeto/Olympia: .ui-tabs / .ui-tabs-nav
 *
 * Skin nativa: aplica em qualquer p:tabView/p:panelMenu cru, sem styleClass.
 */

html body .ui-tabview,
html body .ui-tabs {
    display: block !important;
    max-width: 100%;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Container das abas ----------------------------------------------------- */
html body .ui-tabview .ui-tabview-nav,
html body .ui-tabs .ui-tabs-nav {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    min-height: 0 !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    padding: 0.25rem !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-xs) !important;
    white-space: nowrap;
}

/* Remove linha inferior / indicadores herdados do Olympia. */
html body .ui-tabview .ui-tabview-nav::before,
html body .ui-tabview .ui-tabview-nav::after,
html body .ui-tabs .ui-tabs-nav::before,
html body .ui-tabs .ui-tabs-nav::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    content: none !important;
}

/* Item ------------------------------------------------------------------- */
html body .ui-tabview .ui-tabview-nav > li,
html body .ui-tabs .ui-tabs-nav > li {
    position: relative !important;
    float: none !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
    box-shadow: none !important;
    top: auto !important;
}

/* Remove indicadores/bordas criados no próprio item pelo tema. */
html body .ui-tabview .ui-tabview-nav > li::before,
html body .ui-tabview .ui-tabview-nav > li::after,
html body .ui-tabs .ui-tabs-nav > li::before,
html body .ui-tabs .ui-tabs-nav > li::after {
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    content: none !important;
}

/* Link da aba ------------------------------------------------------------ */
html body .ui-tabview .ui-tabview-nav > li > a,
html body .ui-tabs .ui-tabs-nav > li > a {
    position: relative !important;
    display: inline-flex !important;
    min-height: 2.6rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0.55rem 0.9rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
    color: var(--color-muted) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition:
        background-color var(--transition),
        color var(--transition) !important;
}

/* Hover das abas não selecionadas.
   Cobre :hover nativo e .ui-state-hover aplicado pelo PrimeFaces/Olympia. */
html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected):hover,
html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected).ui-state-hover,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active):hover,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active).ui-state-hover {
    background: var(--slate-50) !important;
}

html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected):hover > a,
html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected).ui-state-hover > a,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active):hover > a,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active).ui-state-hover > a {
    background: var(--slate-50) !important;
    color: var(--color-primary) !important;
}

html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected):hover .ds-tabview-title__icon,
html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected).ui-state-hover .ds-tabview-title__icon,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active):hover .ds-tabview-title__icon,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active).ui-state-hover .ds-tabview-title__icon {
    background: var(--blue-100) !important;
    color: var(--color-primary) !important;
}

html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected):hover .ds-tabview-badge,
html body .ui-tabview .ui-tabview-nav > li:not(.ui-state-active):not(.ui-tabs-selected).ui-state-hover .ds-tabview-badge,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active):hover .ds-tabview-badge,
html body .ui-tabs .ui-tabs-nav > li:not(.ui-tabs-selected):not(.ui-state-active):not(.ui-tabs-active).ui-state-hover .ds-tabview-badge {
    background: var(--blue-100) !important;
    color: var(--color-primary) !important;
}

/* Aba ativa — cobre estados usados por diferentes versões do PrimeFaces. */
html body .ui-tabview .ui-tabview-nav > li.ui-state-active,
html body .ui-tabview .ui-tabview-nav > li.ui-tabs-selected,
html body .ui-tabs .ui-tabs-nav > li.ui-tabs-selected,
html body .ui-tabs .ui-tabs-nav > li.ui-state-active,
html body .ui-tabs .ui-tabs-nav > li.ui-tabs-active {
    border: 0 !important;
    background: var(--color-accent) !important;
    box-shadow: none !important;
}

html body .ui-tabview .ui-tabview-nav > li.ui-state-active > a,
html body .ui-tabview .ui-tabview-nav > li.ui-tabs-selected > a,
html body .ui-tabs .ui-tabs-nav > li.ui-tabs-selected > a,
html body .ui-tabs .ui-tabs-nav > li.ui-state-active > a,
html body .ui-tabs .ui-tabs-nav > li.ui-tabs-active > a {
    border: 0 !important;
    background: var(--color-accent) !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
}

/* Título customizado ----------------------------------------------------- */
html body .ds-tabview-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: inherit !important;
}

html body .ds-tabview-title__icon.material-icons-round {
    display: inline-grid !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex: 0 0 1.5rem !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--slate-200) !important;
    color: var(--color-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

html body .ui-tabview .ui-tabview-nav > li.ui-state-active .ds-tabview-title__icon,
html body .ui-tabview .ui-tabview-nav > li.ui-tabs-selected .ds-tabview-title__icon,
html body .ui-tabs .ui-tabs-nav > li.ui-tabs-selected .ds-tabview-title__icon,
html body .ui-tabs .ui-tabs-nav > li.ui-state-active .ds-tabview-title__icon,
html body .ui-tabs .ui-tabs-nav > li.ui-tabs-active .ds-tabview-title__icon {
    background: rgb(5 10 17 / 0.08) !important;
    color: var(--color-text) !important;
}

/* Badge ------------------------------------------------------------------ */
html body .ds-tabview-badge.ui-badge {
    display: inline-grid !important;
    min-width: 1.45rem !important;
    height: 1.45rem !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 0.35rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--slate-200) !important;
    color: var(--color-muted) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* Conteúdo das abas ------------------------------------------------------ */
html body .ui-tabview .ui-tabview-panels,
html body .ui-tabs .ui-tabs-panels {
    margin-top: var(--space-3) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--white) !important;
    box-shadow: none !important;
}

html body .ui-tabview .ui-tabview-panel,
html body .ui-tabs .ui-tabs-panel {
    padding: 0 !important;
    border: 0 !important;
    background: var(--white) !important;
}

html body .ds-tabview-demo-content {
    padding: var(--space-4);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--slate-700);
    font-size: var(--font-size-sm);
}

/* Controles de overflow do PrimeFaces ----------------------------------- */
html body .ui-tabview .ui-tabview-nav-container,
html body .ui-tabview .ui-tabview-nav-content,
html body .ui-tabs .ui-tabs-nav-container,
html body .ui-tabs .ui-tabs-nav-content {
    overflow: visible !important;
}

html body .ui-tabview .ui-tabview-nav-prev,
html body .ui-tabview .ui-tabview-nav-next,
html body .ui-tabs .ui-tabs-nav-prev,
html body .ui-tabs .ui-tabs-nav-next {
    display: none !important;
}

/* PANEL MENU ------------------------------------------------------------- */

html body .ui-panelmenu {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.25rem !important;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-pill) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-xs) !important;
}

html body .ui-panelmenu .ui-panelmenu-panel {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body .ui-panelmenu .ui-panelmenu-header {
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
}

html body .ui-panelmenu .ui-panelmenu-header > a {
    display: inline-flex !important;
    min-height: 2.85rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
    color: var(--slate-600) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body .ui-panelmenu .ui-panelmenu-header.ui-state-active,
html body .ui-panelmenu .ui-panelmenu-header.ui-state-active > a {
    background: var(--color-accent) !important;
    color: var(--color-text) !important;
}

html body .ui-panelmenu .ui-panelmenu-header .ui-icon,
html body .ui-panelmenu .ui-panelmenu-header .ui-menuitem-icon {
    color: inherit !important;
}

/* Submenus continuam funcionais, mas abrem como dropdown/card abaixo. */
html body .ui-panelmenu .ui-panelmenu-content {
    position: absolute;
    z-index: 20;
    min-width: 13rem;
    margin-top: 0.35rem;
    padding: 0.35rem !important;
    border: 1px solid var(--slate-100) !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-sm) !important;
}

html body .ui-panelmenu .ui-menuitem-link {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem !important;
    border-radius: var(--radius-sm) !important;
    color: var(--slate-700) !important;
}

html body .ui-panelmenu .ui-menuitem-link:hover {
    background: var(--blue-50) !important;
}

@media (max-width: 620px) {
    html body .ui-tabview,
    html body .ui-tabs,
    html body .ui-panelmenu {
        width: 100% !important;
    }

    html body .ui-tabview .ui-tabview-nav,
    html body .ui-tabs .ui-tabs-nav {
        display: flex !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    html body .ui-tabview .ui-tabview-nav::-webkit-scrollbar,
    html body .ui-tabs .ui-tabs-nav::-webkit-scrollbar,
    html body .ui-panelmenu::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================================================
   COMPONENTES - ICONES / GOOGLE MATERIAL ICONS ROUNDED
   Biblioteca principal de ícones do Design System.
   ============================================================================ */

.material-icons-round {
    display: inline-block;
    font-family: "Material Icons Round" !important;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

html body .design-system-page .ds-material-icons-grid .ui-panelgrid-cell,
html body .design-system-page .ds-material-icons-grid td {
    vertical-align: middle;
}

html body .design-system-page .ds-material-icons-grid .material-icons-round {
    margin-right: 0.45rem;
    color: var(--color-primary);
    font-size: 1.25rem;
    vertical-align: middle;
}

html body .design-system-page .ds-icon-library-note {
    margin-bottom: var(--space-4);
    color: var(--slate-600);
    font-size: var(--font-size-sm);
}

html body .design-system-page .ds-icon-library-note a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

html body .design-system-page .ds-icon-library-note a:hover {
    text-decoration: underline;
}

html body .design-system-back .material-icons-round {
    color: var(--color-primary);
    font-size: 1.25rem;
}

html body #form\:painelFiltros .ui-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

html body #form\:barraAcoes {
    display: flex;
    justify-content: end;
    gap: var(--space-3);
    padding: 0 var(--space-5);
}

html body #form\:barraAcoes .ui-button {
    max-width: 180px;
}

@media only screen and (max-width: 640px) {
    /* No reflow do PrimeFaces (<= 640px) a tabela vira cartões e não pode manter o min-width de 46rem do .data-table. */
    html body .ui-datatable-reflow.data-table {
        min-width: 0;
    }
}

/* Trava geral: nada do cadastro (dialog e lista do select Tipo) passa da largura da tela nem gera rolagem lateral. */
html body #form\:dlgNovoRegistro.ui-dialog,
html body .tipoUsuarioPainel {
    max-width: 100vw;
    overflow-x: hidden;
}

html body #form\:dlgNovoRegistro *,
html body .tipoUsuarioPainel * {
    max-width: 100%;
    box-sizing: border-box;
}

/* table-layout: fixed impede que o texto longo do select "Tipo" alargue a coluna do h:panelGrid (tabela);
   !important vence o width em px que o JS do p:selectOneMenu grava a partir do item mais longo. */
html body #form\:formCad table {
    table-layout: fixed;
}

html body #form\:formCad .ui-selectonemenu {
    width: 100% !important;
    overflow: hidden;
}

html body #form\:formCad .ui-selectonemenu .ui-selectonemenu-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .tipoUsuarioPainel {
    max-width: min(100vw - 1rem, 40rem);
}

html body .tipoUsuarioPainel .ui-selectonemenu-item {
    white-space: normal !important;
}

@media only screen and (max-width: 768px) {
    html body #form\:barraAcoes {
        flex-direction: column;
    }

    html body #form\:barraAcoes .ui-button {
        width: 100%;
        max-width: none;
    }



    /* !important vence o padding/width inline e o padding !important do .ui-dialog-content, que estouravam a largura no celular. */
    html body #form\:dlgNovoRegistro .ui-dialog-content {
        padding: var(--space-3) !important;
        overflow-x: hidden;
    }

    html body #form\:formCad {
        width: 100% !important;
        box-sizing: border-box;
        padding: var(--space-2);
    }

    html body #form\:formCad .field__label,
    html body #form\:formCad input,
    html body #form\:formCad .ui-selectonemenu-label {
        font-size: 0.8rem;
    }

    html body #form\:formCad input.ui-inputtext,
    html body #form\:formCad .ui-selectonemenu {
        margin-bottom: var(--space-3) !important;
    }

    /* !important vence o width inline do p:sidebar (style="width: 30vw" no usuarios.xhtml),
       que fica ilegível em telas estreitas. */
    html body #form\:painelFiltros.ui-sidebar-right {
        width: 100% !important;
    }

    /* !important vence o width/left inline que o JS do p:dialog aplica (width="850px"). */
    html body #form\:dlgNovoRegistro.ui-dialog {
        width: 100vw !important;
        max-width: 100vw;
        left: 0 !important;
    }

    /* O dialog tem overflow: hidden e max-height: 95vh; se o conteúdo não reservar espaço para título + rodapé,
       o rodapé é cortado e o Salvar fica colado na borda de baixo. !important vence o max-height inline do fitViewport. */
    html body #form\:dlgNovoRegistro .ui-dialog-content {
        max-height: calc(95vh - 10rem) !important;
        overflow-y: auto;
    }

    /* Botão do rodapé ocupa a largura toda no celular; !important vence o width: 120px inline do botaoSalvar. */
    html body #form\:dlgNovoRegistro .ui-dialog-footer .ui-button {
        width: 100% !important;
    }

    /* fieldset tem min-width: min-content por padrão e o h:panelGrid gera <table> sem a classe ui-panelgrid. */
    html body #form\:formCad {
        min-width: 0;
    }

    html body #form\:formCad table,
    html body #form\:formCad tbody,
    html body #form\:formCad tr,
    html body #form\:formCad td {
        display: block;
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    html body #form\:formCad input.ui-inputtext,
    html body #form\:formCad .ui-selectonemenu,
    html body #form\:formCad .ui-password {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    html body #form\:formCad input.ui-inputtext,
    html body #form\:formCad .ui-selectonemenu {
        min-height: 2rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    html body #form\:formCad .ui-selectonemenu {
        overflow: hidden;
    }

    html body #form\:formCad .ui-selectonemenu .ui-selectonemenu-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* O painel do select é anexado ao body, fora de #form:formCad; por isso a classe própria (panelStyleClass).
       !important vence o width/left inline que o JS do p:selectOneMenu grava a partir da largura do texto sem quebra. */
    html body .tipoUsuarioPainel {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem);
        left: 0.5rem !important;
        box-sizing: border-box;
    }

    html body .tipoUsuarioPainel .ui-selectonemenu-items-wrapper {
        overflow-x: hidden;
    }

    html body .tipoUsuarioPainel .ui-selectonemenu-item {
        white-space: normal !important;
    }
}

/* ============================================================================
   CLIENTES - DIALOG DE TAXAS (clientestaxas.xhtml)
   Mesmo padrão do dialog de cadastro: regras presas ao id da tela, em tela cheia no celular.
   ============================================================================ */

/* Trava geral: nada do dialog passa da largura da tela nem gera rolagem lateral. */
html body #form\:dlgTaxas.ui-dialog {
    max-width: 100vw;
    overflow-x: hidden;
}

html body #form\:dlgTaxas * {
    max-width: 100%;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
    /* !important vence o width/left inline que o JS do p:dialog aplica (width="850px"). */
    html body #form\:dlgTaxas.ui-dialog {
        width: 100vw !important;
        max-width: 100vw;
        left: 0 !important;
    }

    /* Reserva espaço para título + rodapé (dois botões empilhados) para o Salvar nunca ser cortado;
       !important vence o max-height inline do fitViewport e o padding !important do .ui-dialog-content.
       A linha em vh é o fallback de navegador sem dvh (barra de endereço do celular). */
    html body #form\:dlgTaxas .ui-dialog-content {
        padding: var(--space-3) !important;
        max-height: calc(95vh - 14rem) !important;
        max-height: calc(95dvh - 14rem) !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Salvar em cima e Cancelar embaixo, ambos em largura total. No HTML o Cancelar vem primeiro
       (ordem do desktop, primário à direita); column-reverse inverte só no celular. */
    html body #form\:dlgTaxas .ui-dialog-footer {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    html body #form\:dlgTaxas .ui-dialog-footer .ui-button {
        width: 100% !important;
        margin: 0;
        min-height: 2.5rem;
    }

    /* fieldset tem min-width: min-content por padrão; !important vence o width: 98% inline. */
    html body #form\:formTaxas .ui-fieldset {
        width: 100% !important;
        min-width: 0;
    }

    /* O h:panelGrid gera <table> sem a classe ui-panelgrid: vira bloco para o campo ocupar a largura da coluna do grid. */
    html body #form\:formTaxas table,
    html body #form\:formTaxas tbody,
    html body #form\:formTaxas tr,
    html body #form\:formTaxas td {
        display: block;
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
    }

    /* Alvo de toque >= 2.5rem e fonte >= 16px (abaixo disso o iOS dá zoom ao focar o campo).
       !important vence o width inline do span do p:inputNumber. */
    html body #form\:formTaxas .ui-inputnumber,
    html body #form\:formTaxas .ui-inputnumber input {
        width: 100% !important;
        min-width: 0;
        min-height: 2.5rem;
        font-size: 1rem;
    }
}

/* ============================================================================
   DESIGN SYSTEM - FINALIZACAO
   Remove estilos inline do XHTML e consolida os últimos padrões do catálogo.
   ============================================================================ */

/* Swatches de cor */
html body .ds-swatch-bg {
    display: block;
}
html body .ds-swatch-bg.ds-swatch-bg--color-primary {
    background: var(--color-primary) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-dark {
    background: var(--color-dark) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-accent {
    background: var(--color-accent) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-muted {
    background: var(--color-muted) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-text {
    background: var(--color-text) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-warning {
    background: var(--color-warning) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-border {
    background: var(--color-border) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-background {
    background: var(--color-background) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-black {
    background: var(--color-black) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-950 {
    background: var(--blue-950) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-900 {
    background: var(--blue-900) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-800 {
    background: var(--blue-800) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-700 {
    background: var(--blue-700) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-600 {
    background: var(--blue-600) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-500 {
    background: var(--blue-500) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-100 {
    background: var(--blue-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--blue-50 {
    background: var(--blue-50) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--lime-600 {
    background: var(--lime-600) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--lime-500 {
    background: var(--lime-500) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--lime-200 {
    background: var(--lime-200) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--lime-100 {
    background: var(--lime-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-950 {
    background: var(--slate-950) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-900 {
    background: var(--slate-900) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-800 {
    background: var(--slate-800) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-700 {
    background: var(--slate-700) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-600 {
    background: var(--slate-600) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-500 {
    background: var(--slate-500) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-400 {
    background: var(--slate-400) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-300 {
    background: var(--slate-300) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-200 {
    background: var(--slate-200) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-100 {
    background: var(--slate-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--slate-50 {
    background: var(--slate-50) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--white {
    background: var(--white) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--green-700 {
    background: var(--green-700) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--green-100 {
    background: var(--green-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--amber-700 {
    background: var(--amber-700) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--amber-500 {
    background: var(--amber-500) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--amber-100 {
    background: var(--amber-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--red-700 {
    background: var(--red-700) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--red-100 {
    background: var(--red-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--violet-700 {
    background: var(--violet-700) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--violet-100 {
    background: var(--violet-100) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-primary-hover {
    background: var(--color-primary-hover) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-primary-soft {
    background: var(--color-primary-soft) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-surface {
    background: var(--color-surface) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-text-secondary {
    background: var(--color-text-secondary) !important;
}
html body .ds-swatch-bg.ds-swatch-bg--color-border-strong {
    background: var(--color-border-strong) !important;
}

/* Classes utilitárias que substituem style="" no XHTML. */
html body .ds-column-center {
    text-align: center !important;
}
html body .ds-column-control {
    width: 3rem !important;
}
html body .ds-control-full {
    width: 100% !important;
}
html body .ds-column-right {
    text-align: right !important;
}
html body .ds-column-edit-action {
    width: 5rem !important;
    text-align: center !important;
}
html body .ds-blockui-demo {
    padding: var(--space-4) !important;
}
html body .ds-blockui-spinner {
    font-size: 2rem !important;
}
html body .ds-panelmenu-reference {
    width: 16.25rem !important;
}
html body .ds-chart-demo {
    height: 16.25rem !important;
}

/* FileUpload — cartões de seleção XML/CNAB */
html body .ds-file-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

html body .ui-fileupload {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html body .ui-fileupload .ui-fileupload-buttonbar {
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body .ui-fileupload .ui-fileupload-content,
html body .ui-fileupload .ui-fileupload-upload,
html body .ui-fileupload .ui-fileupload-cancel {
    display: none !important;
}

html body .ui-fileupload .ui-fileupload-choose {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    min-height: 4.75rem;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.8rem;
    row-gap: 0.12rem;
    align-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0.85rem 1rem !important;
    overflow: hidden;
    border: 1px dashed var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-background) !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
    text-align: left !important;
    transition:
        border-color var(--transition),
        background-color var(--transition);
}

html body .ui-fileupload .ui-fileupload-choose:hover,
html body .ui-fileupload .ui-fileupload-choose:focus-within {
    border-color: var(--color-primary) !important;
    background: var(--blue-50) !important;
}

html body .ui-fileupload .ui-fileupload-choose > .ui-button-icon-left,
html body .ui-fileupload .ui-fileupload-choose > .ui-icon {
    display: none !important;
}

html body .ui-fileupload .ui-fileupload-choose::before {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--color-primary);
    content: "upload_file";
    font-family: "Material Icons Round" !important;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
}

html body .ui-fileupload .ui-fileupload-choose .ui-button-text {
    grid-column: 2;
    grid-row: 1;
    padding: 0 !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

html body .ui-fileupload .ui-fileupload-choose::after {
    grid-column: 2;
    grid-row: 2;
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.3;
}

html body .ds-file-upload-tile--xml.ui-fileupload .ui-fileupload-choose::after {
    content: "Selecionar arquivo XML";
}

html body .ds-file-upload-tile--cnab.ui-fileupload .ui-fileupload-choose::after {
    content: "Selecionar arquivo .rem ou .txt";
}

html body .ui-fileupload .ui-fileupload-choose input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
    opacity: 0 !important;
}

@media (max-width: 48rem) {
    html body .ds-file-upload-grid {
        grid-template-columns: 1fr;
    }
}