/*Borda roxa abaixo do cabeçalho das regiões*/
  .t-Header { 
  border-bottom: 3px solid #c95788;
  }

/* Menu Lateral - Ao expandir não sobrepor informações quando for página com Left Side Column*/
/*
.apex-side-nav.js-navExpanded.t-PageBody--showLeft .t-Body-content {
transform: translate3d(240px, 0, 0) !important;
}
*/

/* Menu Superior - Navigation Menu Bar */
  .t-Header-nav-list{ 
    background-color: #552179 !important;
  }

  .a-MenuBar-item{ 
    background-color: #552179 !important;
  }

  .a-Menu-content{ 
    background-color: #2c1a63 !important;
  }

  .a-Menu-labelContainer{
    color: #fafafa !important;
  }

/* Cores Padrões */
  .colorPurple {
   color: #511C76 !important;
  }

  .colorBlue {
   color: #2C1A63 !important;
  }

  .colorPink {
   color: #C95788 !important;
  }

  .backgroundColorPurple {
   background-color: #511C76 !important;
  }

  .backgroundColorBlue {
   background-color: #2C1A63 !important;
  }

  .backgroundColorPink {
   background-color: #C95788 !important;
  }

/*
.t-Region-headerItems.t-Region-headerItems--title{
border-left: 5px solid #511c76;
}
*/

/*Borda roxa à esquerda do cabeçalho das regiões*/
  .t-Region-header{ 
  border-left: 5px solid #511c76 !important;
  }

/*Cor do ícone em região em template Hero*/
  .t-HeroRegion-icon{ 
    background-color: #c95788 !important;
    color: #2C1A63 !important;
  }

/*Formatação da Fonte dos Headers das regiões*/
  .t-Region-title { 
      font-weight: 500 !important;
      font-size: large !important;
      color: #262626 !important;
  }

/*Borda roxa abaixo do cabeçalho das regiões*/
  .a-IRR-toolbar { 
      border-bottom: 3px solid #511c76;
  }

/*Borda roxa abaixo do cabeçalho das regiões*/
  .a-IG-header{ 
      border-bottom: 3px solid #511c76;
  }

/*Borda roxa abaixo do cabeçalho das regiões*/
  .ui-dialog.ui-dialog--inline .ui-dialog-titlebar{ 
      border-bottom: 3px solid #511c76;
  }

/*Borda roxa abaixo do cabeçalho das regiões*/
  .ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix{ 
      border-bottom: 3px solid #511c76;
  }

/*Cor do ícone no header das regiões*/
  .t-Region-headerIcon{ 
  color: #c95788 !important;
  }

/*Margem do item*/
  .t-Form-fieldContainer{ 
  margin-top:6px !important; 
  }

/*Cor do Radio Button quando selecionado*/
  .apex-button-group input:checked+label, .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked+label{
  border-color: #c95788 !important; 
    background-color: #c95788 !important;
  }

/*Cor do ícone do tipo Alert*/
  .t-Alert--info .t-Alert-icon .t-Icon{ 
  color: #fff !important;
  }
/* Estrutura certa do ícone do alerta "info": a região do ícone
   (.t-Alert-icon) ocupa toda a altura do aviso, com um fundo azul
   claro — e DENTRO dela fica uma bolinha pequena e escura (o
   próprio <span class="t-Icon">), com o "i" branco centralizado. */
.t-Alert--defaultIcons.t-Alert--info .t-Alert-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F3ECF9 !important;
}
.t-Alert--info .t-Alert-icon .t-Icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background-color: var(--nc-primary) !important;
  background-image: none !important;
  position: relative !important;
}
.t-Alert--info .t-Alert-icon .t-Icon::before {
  content: "i" !important;
  display: block !important;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1 !important;
}

/* Espaço nas laterais do texto do aviso — estava colado nas bordas. */
.t-Alert-content {
  padding: 12px 16px !important;
}

/*Cor do botão do tipo Link*/
  .t-Button--link.t-Button, .t-Button--link .t-Icon{ 
  color: #2C1A63 !important;
  }

/*Borda do ícone das breadcrumbs das regiões com template Hero*/
  .t-HeroRegion-icon{ 
    /*transform: rotate(45deg);*/
    border-radius: 7px !important;
  }

/*Cor do marcador da região Wizard, quando ok*/
  .t-WizardSteps-step.is-complete .t-WizardSteps-marker { 
      background-color: #2c1b63 !important;
      color: #FFF;
  }

/*Cor do marcador da região Wizard, quando ativo*/
  .t-WizardSteps-step.is-active .t-WizardSteps-marker { 
      background-color: #c95788; 
  }

/*Cor do item selecionado, com foco*/
  .apex-item-multi:focus, .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus, select.listmanager:focus {
  border-color: #c95788 !important; 
  }

/*Cor do item selecionado, com foco*/
  .t-Form-fieldContainer--floatingLabel .apex-item-has-icon:focus+.apex-item-icon, .t-Form-fieldContainer--floatingLabel .apex-item-multi.is-focused+.apex-item-icon {
  background-color: #c95788 !important; 
  }

/*Formatação das cores e formatos dos ícones das regiões do tipo Card*/
  .t-Card-icon{ 
    border-radius: 7px !important;
    /*transform: rotate(45deg);*/
  }

/*Formatação das cores e formatos dos ícones das regiões do tipo Card*/
  .t-Card-colorFill, .t-Card-icon { 
      background:
          linear-gradient(#511C76, transparent),
          linear-gradient(to top left, #C95788, transparent),
          linear-gradient(to bottom right, #2C1A63, transparent) !important;
      background-blend-mode: screen !important;
  }

/*Formatação da fonte dos títulos das Páginas Modais*/
  .ui-dialog-title{ 
      font-weight: 500 !important;
      font-size: large !important;
      color: #262626 !important;
  }

/*Formatação das fotos, circular e sem borda em formato Pequeno 50px*/
  .fotoColabSmall{ 
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      border-radius: 100px;
      margin-top: 5px;
      margin-bottom: 5px;
      min-width: 50px;
      min-height: 50px;
      max-width: 50px;
      max-height: 50px;
  }

  .fotoColabSmallComments{ 
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #511c76 !important;
}

/*Formatação das fotos, circular e com borda em formato Médio 100px*/
  .fotoColabMed{ 
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      border-radius: 100px;
      box-shadow: 0 0 0 3px #511c76 !important;
      margin-top: 5px;
      margin-bottom: 5px;
      min-width: 100px;
      min-height: 100px;
      max-width: 100px;
      max-height: 100px;
  }

/*Formatação das fotos, circular e com borda em formato Grande 120px*/
  .fotoColab{ 
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      border-radius: 100px;
      box-shadow: 0 0 0 3px #511c76 !important;
      margin-top: 5px;
      margin-bottom: 5px;
      min-width: 120px;
      min-height: 120px;
      max-width: 120px;
      max-height: 120px;
  }

/*Formatação das fotos nos relatórios (Classic Report, Interactive Report, etc...)*/
  td[headers=FOTO] img { 
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      border-radius: 50px;
      margin-top: 5px;
      margin-bottom: 5px;
      min-width: 60px;
      min-height: 60px;
      max-width: 60px;
      max-height: 60px;
  }

  .zoom100{
    zoom: 100%;
  }

  .zoom150{
    zoom: 150%;
  }

  .zoom140{
    zoom: 140%;
  }

  .zoom130{
    zoom: 130%;
  }

  .zoom120{
    zoom: 120%;
  }

  .zoom110{
    zoom: 110%;
  }

  .zoom90{
    zoom: 90%;
  }

  .zoom80{
    zoom: 80%;
  }

  .zoom70{
    zoom: 70%;
  }

  .zoom60{
    zoom: 60%;
  }

  .zoom50{
    zoom: 50%;
  }

  .zoom40{
    zoom: 40%;
  }

  .zoom30{
    zoom: 30%;
  }

  .zoom20{
    zoom: 20%;
  }

  .zoom10{
    zoom: 10%;
  }

/*Comando para Mostrar região ao clicar no + Ver Mais*/
  .expandRegion { 
  display: block;
  }

/*Comando para Esconder região ao clicar no + Ver Mais*/
  .collapseRegion { 
  display: none;
  }

/*A região PARAMETROS que fica na página global*/
  #GLOBAL_PARAMETROS{ 
    display: none;
  }

/*As cores dos ícones do Home, que não estavam ficando brancos*/
  .t-Cards-item > .t-Card .t-Card-icon{ 
  color: #fff !important;
  }


/*Dados do Usuário no Menu Lateral - Início*/
  #t_TreeNav {
      display: flex;
      flex-direction: column;
      height: 100%;
  }

  #t_TreeNav ul {
      flex: 1 0 auto;
  }

  div.sideuserdata{
      flex: 0 0 auto;
  }

  #t_PageBody.apex-side-nav.js-navCollapsed .sideuserdata {
     display: none;
  }

  .ui-dialog > div.sideuserdata {
      flex: 0 0 auto;
      display: none !important;
  }
/*Dados do Usuário no Menu Lateral - Fim*/


/*Nível de transparência de Itens desabilitados*/
  .apex_disabled { 
    opacity: 0.8 !important;
  }

/*Para utilizar na foto do perfil das consultas de colaboradores, identificar Admitidos, Afastados e Desligados*/
  .admitido {
  box-shadow: 0 0 0 3px #58e05c !important;
  }

  .afastado {
  box-shadow: 0 0 0 3px #fcdc21 !important;
  }

  .desligado {
  box-shadow: 0 0 0 3px #d64747 !important;
  }

  .picSuccess {
   box-shadow: 0 0 0 3px #47b74a !important;
  }

  .picAlert {
   box-shadow: 0 0 0 3px #fcdc21 !important;
  }

  .picDanger {
   box-shadow: 0 0 0 3px #d64747 !important;
  }

  .picInfo {
   box-shadow: 0 0 0 3px #2c1a63 !important;
  }

  .picNone {
   box-shadow: 0 0 0 3px #d1d1d1 !important;
  }

/*Classe para aplicar cor em ícones*/
  .colorSuccess {
   color: #47b74a !important;
  }

  .colorAlert {
   color: #fcdc21 !important;
  }

  .colorDanger {
   color: #d64747 !important;
  }

  .colorInfo {
   color: #2c1a63 !important;
  }

  .colorNone {
   color: #d1d1d1 !important;
  }

/*Corrigir Bug da atualização do Chrome que some o Item ao selecionar*/
  .apex-item-select,
  .apex-item-text,
  .apex-item-textarea,
  .apex-item-multi {
  backface-visibility: hidden;
  }


/*Breadcrumb via HTML customizado*/
    #BREADCRUMB{
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }

    /* Style the list */
    #BREADCRUMB ul.breadcrumb {
      /*padding: 10px 16px;*/
      list-style: none;
      /*background-color: #eee;*/
      background-color: #fff0;
    }

    /* Display list items side by side */
    #BREADCRUMB ul.breadcrumb li {
      display: inline;
      font-size: 14px;
    }

    /* Add a slash symbol (/) before/behind each list item */
    #BREADCRUMB ul.breadcrumb li+li:before {
      padding: 8px;
      color: #c95788;
      content: "/\00a0";
      font-size: 16px;
    }

    /* Add a color to all links inside the list */
    #BREADCRUMB ul.breadcrumb li a {
      color: #2C1A63;
      text-decoration: none;
    }

    /* Add a color on mouse-over */
    #BREADCRUMB ul.breadcrumb li a:hover {
      color: #c95788;
      text-decoration: underline;
    }




/*Botão do Chamado Interno*/

  .floatChamadoInterno{
    position: fixed;
    bottom: 13rem;
    right: 1rem;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #c95788 !important;
    color: #2c1a63 !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
    cursor: pointer;
    z-index: 9999 !important;
    transition: all 0.2s ease-in-out 0s;
    left: unset;
    transform: scale(1);
    border: 2px solid #2c1a63 !important;
  }
/*
  .floatChamadoInterno{
    z-index: 100 !important;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 80px;
    right: 10px;
    background-color: #c95788 !important;
    color: #2c1a63 !important;
    border-radius: 25px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
  }
*/

  .my-floatChamadoInterno{
    z-index: 9999 !important;
    margin-top:22px;
  }

/* Botão do ChatBot - CHATBASE */
#chatbase-bubble-button{
  bottom: 7rem !important;
  z-index: 500 !important;
}

/*Botão da NATI - IA da Natcorp - ChatBot*/

  .floatNati{
    position: fixed;
    bottom: 20rem;
    right: 1rem;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #c95788 !important;
    color: #2c1a63 !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
    cursor: pointer;
    z-index: 9999 !important;
    transition: all 0.2s ease-in-out 0s;
    left: unset;
    transform: scale(1);
    border: 2px solid #c95788 !important;
    /*
    background-image: url("#WORKSPACE_IMAGES#NATI - 128px.png");
    background-size: cover;
    background-position: center;
    */
  }

  .my-floatNati{
    z-index: 9999 !important;
    margin-top:22px;
  }

.floatNati:hover {
  transform: scale(1.07);
}

.nati-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #c95788 !important;
}

.btnNATIlive {
  background-color: #c95788 !important;
  color: #2C1A63 !important;
  animation: btnNATIpulse 1500ms infinite;
}

@keyframes btnNATIpulse {
  0% {
    box-shadow: #c95788 0 0 0 0;
  }
  75% {
    box-shadow: #c9578800 0 0 0 16px;
  }
}


/*CSS Class: floatNati my-floatNati fab-nati */
/*Custom Attributes: style="background-image: url('#WORKSPACE_IMAGES#NATI - 128px.png'); background-size: cover; background-position: center;" */

/* Botão de IA */

  .btnIA{
    right: 1rem;
    width: 42px;
    height: 42px;
    /*border-radius: 50%;*/
    background-color: transparent !important;
    color: rgb(0 0 0 / 0%) !important;
    /*box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;*/
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    left: unset;
    /*transform: scale(1);*/

    /*transform: rotate(45deg) scale(1);*/
    /*padding:10px 22px;*/
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    overflow: visible;
  }

/*
.btnIA span {
    display: inline-block;
    //transform: rotate(-45deg);
}
*/

.fab-ia-natcorp:hover {
  transform: scale(1.10);
  /*box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 8px 0px;*/
  border: none !important;
  border-radius: 14px !important;
  box-shadow: rgba(201,87,136, 0.60) 0px 0px 12px 6px !important;
}

.ia-natcorp-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px !important;
  object-fit: cover;
  /*border: 1.5px solid #c95788 !important;*/
}

.btnIAlive {
  /*background-color: transparent !important;
  color: rgb(0 0 0 / 0%) !important;*/
  border-radius: 14px !important;
  box-shadow: linear-gradient(#C95788, transparent),
          linear-gradient(to top left, #C95788, transparent),
          linear-gradient(to bottom right, #C95788, transparent) 20px 20px 20px 20px !important;
  animation: btnIApulse 1500ms infinite;
    content: "";
    position: absolute;
    inset: -18px; /* controla distância do halo */
    border-radius: 20px;
    /* Define o formato do halo IGUAL ao botão */
    z-index: -1;
}

@keyframes btnIApulse {
  0% {
    box-shadow: #C95788 0 0 0 0;
  }
  75% {
    box-shadow: #C9578800 0 0 0 14px;
  }
  100% {
    box-shadow: #C9578800 0 0 0 20px;
  }
}


/* Modal: Arredondar pontas da modal */
.ui-dialog{
  border-radius: 10px !important;
}

/* Interactive Report: Arredondar pontas da regiao */
.a-IRR{
  border-radius: 10px !important;
}


/* Cabecalho Regiao: Arredondar pontas da regiao
.t-Region-header{
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
*/


/* Regiao: Arredondar pontas da regiao 
.t-Region{
  border-radius: 10px !important; 
}
*/


/* CSS para aumentar o texto do custom-alerts.js SweetAlert2 */
.swal2-popup {
  font-size: 1.2em; /* Aumenta o tamanho do texto */
}

.swal2-title {
  font-size: 2em; /* Aumenta o tamanho do título */
}

.swal2-html-container {
  font-size: 1.4em; /* Aumenta o tamanho do texto do corpo do alert */
}





/* === A PARTIR DAQUI: Natcorp_Style_New === */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
/* Fontes exclusivas da tela de login (Sora/Manrope), fiéis ao
   protótipo aprovado — o resto do sistema continua com Jakarta Sans. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');


/* =====================================================================
   Natcorp Skin — Oracle APEX 19.x / Universal Theme 19.x
   Aplica a identidade visual Natcorp (violeta profundo + ametista +
   grafite) sobre as telas existentes, sem alterar páginas ou itens.

   Instalação:
   1. Shared Components > Static Application Files > Upload natcorp.css
      e natcorp.js.
   2. Shared Components > User Interface Attributes > Desktop >
      CSS > File URLs:      #APP_IMAGES#natcorp.css
      JavaScript > File URLs: #APP_IMAGES#natcorp.js
   3. Se o tema já é customizado (Theme Style próprio), mantenha-o:
      este arquivo carrega DEPOIS e sobrescreve por especificidade.
   ===================================================================== */


:root {
  --nc-primary: #5b2a86;
  --nc-primary-rgb: 91, 42, 134;
  --nc-primary-deep: #3d1a5e;
  --nc-primary-glow: #8e4fb8;
  --nc-primary-glow-rgb: 142, 79, 184;
  --nc-primary-soft: #f3ecf9;
  --nc-primary-border: #e0d2ee;
  --nc-graphite: #4a4a52;
  --nc-ink: #2b2233;
  --nc-muted: #6E6978;
  --nc-bg: #f8f6fb;
  --nc-card: #ffffff;
  --nc-border: #e5e0ec;
  --nc-success: #1f8a5a;
  --nc-success-soft: #e4f5ec;
  --nc-warning: #c98411;
  --nc-warning-soft: #fbf0dc;
  --nc-danger: #c8342f;
  --nc-danger-soft: #fbe6e5;
  --nc-radius: 10px;
  --nc-radius-sm: 6px;
  --nc-radius-md: 8px;
  --nc-radius-lg: 12px;
  --nc-shadow: 0 1px 2px rgba(43, 34, 51, 0.06), 0 8px 24px rgba(43, 34, 51, 0.05);
  --nc-shadow-xs: 0 1px 2px rgba(43, 34, 51, 0.04);
  --nc-shadow-md: 0 6px 18px rgba(43, 34, 51, 0.1);
  --nc-font: "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Aliases — mesmos nomes usados no arquivo 2, apontando para as cores
     já aprovadas acima, só para os seletores de item poderem ser
     transportados sem adivinhar valores novos. */
  --nc-fg: var(--nc-ink);
  --nc-input: var(--nc-border);
  --nc-muted-fg: var(--nc-muted);
  --nc-muted-bg: #f4f1f8;
  --nc-destructive: var(--nc-danger);
  --nc-primary-fg: #faf8fc;
  --nc-secondary: var(--nc-primary-soft);
  --nc-secondary-fg: var(--nc-primary-deep);
  --nc-accent: var(--nc-primary-soft);
  --nc-accent-fg: var(--nc-primary-deep);
  --nc-ring: var(--nc-primary-glow);
}

/* ---------- Temas de cor alternativos ---------- */
/* Cada tema redefine só os tokens principais de cor — como todo o
   resto do CSS já usa var(--nc-primary...), a troca de tema acontece
   automaticamente em toda a aplicação, sem reescrever nenhuma regra.
   Aplicado como classe no <html> (ex.: html.nc-theme-oceano). Cores
   extraídas do protótipo (Ametista é o padrão, sem classe extra). */
html.nc-theme-standard {
  --nc-primary: #2c1a63;
  --nc-primary-rgb: 44, 26, 99;
  --nc-primary-deep: #1a0f3d;
  --nc-primary-glow: #5b2a86;
  --nc-primary-glow-rgb: 91, 42, 134;
  --nc-primary-soft: #eef1f6;
  --nc-primary-border: #d7dce6;
  /* A pedido: fundo de página do tema Standard Natcorp precisa ser
     #fefefe (não usa o --nc-bg "de fábrica" dos outros temas). */
  --nc-bg: #fefefe;
  --nc-muted-bg: #eef0f3;
}
html.nc-theme-lavanda {
  --nc-primary: #6e3c91;
  --nc-primary-rgb: 110, 60, 145;
  --nc-primary-deep: #4a2861;
  --nc-primary-glow: #be6de2;
  --nc-primary-glow-rgb: 190, 109, 226;
  --nc-primary-soft: #e6effd;
  --nc-primary-border: #d6e2f8;
  --nc-bg: #f5f7fc;
  --nc-muted-bg: #eef2fb;
}
html.nc-theme-iris {
  --nc-primary: #511c76;
  --nc-primary-rgb: 81, 28, 118;
  --nc-primary-deep: #35134e;
  --nc-primary-glow: #c95788;
  --nc-primary-glow-rgb: 201, 87, 136;
  --nc-primary-soft: #f3eef7;
  --nc-primary-border: #e8dcee;
  --nc-bg: #f8f6fa;
  --nc-muted-bg: #f3eef7;
}
html.nc-theme-orquidea {
  --nc-primary: #643a7a;
  --nc-primary-rgb: 100, 58, 122;
  --nc-primary-deep: #422650;
  --nc-primary-glow: #c95788;
  --nc-primary-glow-rgb: 201, 87, 136;
  --nc-primary-soft: #eef5f4;
  --nc-primary-border: #d7ebe8;
  --nc-bg: #f6faf9;
  --nc-muted-bg: #eef5f4;
}
html.nc-theme-safira {
  --nc-primary: #2c1a63;
  --nc-primary-rgb: 44, 26, 99;
  --nc-primary-deep: #1a0f3d;
  --nc-primary-glow: #c95788;
  --nc-primary-glow-rgb: 201, 87, 136;
  --nc-primary-soft: #eef0f8;
  --nc-primary-border: #d8ddf0;
  --nc-bg: #f5f6fb;
  --nc-muted-bg: #eef0f8;
}
html.nc-theme-ameixa {
  --nc-primary: #5a214f;
  --nc-primary-rgb: 90, 33, 79;
  --nc-primary-deep: #3c1635;
  --nc-primary-glow: #2a8fa3;
  --nc-primary-glow-rgb: 42, 143, 163;
  --nc-primary-soft: #f5eef4;
  --nc-primary-border: #ecd7e6;
  --nc-bg: #faf6f9;
  --nc-muted-bg: #f5eef4;
}
html.nc-theme-violeta {
  --nc-primary: #511c76;
  --nc-primary-rgb: 81, 28, 118;
  --nc-primary-deep: #35134e;
  --nc-primary-glow: #779a87;
  --nc-primary-glow-rgb: 119, 154, 135;
  --nc-primary-soft: #f1f5f1;
  --nc-primary-border: #dbe8de;
  --nc-bg: #f7faf7;
  --nc-muted-bg: #f1f5f1;
}
html.nc-theme-magenta {
  --nc-primary: #a43e6b;
  --nc-primary-rgb: 164, 62, 107;
  --nc-primary-deep: #6e2948;
  --nc-primary-glow: #511c76;
  --nc-primary-glow-rgb: 81, 28, 118;
  --nc-primary-soft: #f8eff3;
  --nc-primary-border: #ecd4e0;
  --nc-bg: #fbf5f8;
  --nc-muted-bg: #f8eff3;
}
html.nc-theme-berinjela {
  --nc-primary: #4a2348;
  --nc-primary-rgb: 74, 35, 72;
  --nc-primary-deep: #301730;
  --nc-primary-glow: #d56f67;
  --nc-primary-glow-rgb: 213, 111, 103;
  --nc-primary-soft: #f7f0f1;
  --nc-primary-border: #ecd9d7;
  --nc-bg: #faf6f7;
  --nc-muted-bg: #f7f0f1;
}
html.nc-theme-indigo {
  --nc-primary: #39307a;
  --nc-primary-rgb: 57, 48, 122;
  --nc-primary-deep: #251f52;
  --nc-primary-glow: #258e91;
  --nc-primary-glow-rgb: 37, 142, 145;
  --nc-primary-soft: #eef4f5;
  --nc-primary-border: #d7e6e7;
  --nc-bg: #f6f9fa;
  --nc-muted-bg: #eef4f5;
}
html.nc-theme-aurora {
  --nc-primary: #511c76;
  --nc-primary-rgb: 81, 28, 118;
  --nc-primary-deep: #35134e;
  --nc-primary-glow: #c95788;
  --nc-primary-glow-rgb: 201, 87, 136;
  --nc-primary-soft: #f2f3f6;
  --nc-primary-border: #dde0ea;
  --nc-bg: #f7f8fb;
  --nc-muted-bg: #f2f3f6;
}
html.nc-theme-concreto {
  --nc-primary: #511c76;
  --nc-primary-rgb: 81, 28, 118;
  --nc-primary-deep: #35134e;
  --nc-primary-glow: #8a6a9c;
  --nc-primary-glow-rgb: 138, 106, 156;
  --nc-primary-soft: #eeecef;
  --nc-primary-border: #d9d7db;
  --nc-bg: #c9c9c9;
  --nc-muted-bg: #eeecef;
}
html.nc-theme-roxoaurora {
  --nc-primary: #3d2952;
  --nc-primary-rgb: 61, 41, 82;
  --nc-primary-deep: #2e2160;
  --nc-primary-glow: #c95788;
  --nc-primary-glow-rgb: 201, 87, 136;
  --nc-primary-soft: #ede6f3;
  --nc-primary-border: #ddd0e5;
  --nc-bg: #d9cfe3;
  --nc-muted-bg: #ede6f3;
}

/* ---------- Botão flutuante + janela de escolha de tema ---------- */
/* ---------- Ícone de tema dentro do menu superior ---------- */
html body .nc-theme-navitem .t-Icon.nc-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .nc-theme-navitem .t-Icon.nc-theme-icon svg {
  width: 18px;
  height: 18px;
}
html body .nc-theme-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 34, 51, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
html body .nc-theme-modal {
  background: var(--nc-card);
  border-radius: var(--nc-radius-lg);
  padding: 24px 28px;
  width: 1120px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--nc-shadow-md);
  font-family: var(--nc-font);
}
html body .nc-theme-modal h3 {
  margin: 0 0 4px;
  color: var(--nc-ink);
  font-size: 18px;
  font-weight: 700;
}
html body .nc-theme-modal p {
  margin: 0 0 4px;
  color: var(--nc-muted);
  font-size: 13px;
}
html body .nc-theme-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 1000px) {
  html body .nc-theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  html body .nc-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  html body .nc-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  html body .nc-theme-grid { grid-template-columns: 1fr; }
}
html body .nc-theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius-lg);
  padding: 14px;
  background: var(--nc-card);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
html body .nc-theme-card:hover {
  border-color: var(--nc-primary-glow);
  box-shadow: var(--nc-shadow-xs);
}
html body .nc-theme-card.is-selected {
  border-color: var(--nc-primary);
  background: var(--nc-primary-soft);
  box-shadow: var(--nc-shadow-md);
}
html body .nc-theme-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html body .nc-theme-card-swatches {
  display: flex;
  gap: 5px;
}
html body .nc-theme-card-swatch {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
html body .nc-theme-card-check {
  display: none;
  color: var(--nc-primary);
  flex-shrink: 0;
}
html body .nc-theme-card.is-selected .nc-theme-card-check {
  display: block;
}
html body .nc-theme-card-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--nc-ink);
}
html body .nc-theme-card-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--nc-muted);
}
html body .nc-theme-modal-close {
  margin-top: 22px;
  padding: 9px 20px;
  border-radius: var(--nc-radius-md);
  border: 0;
  background: var(--nc-primary);
  color: #fff;
  font-family: var(--nc-font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html body .nc-theme-modal-close svg {
  width: 16px;
  height: 16px;
}
html body .nc-theme-modal-close:hover {
  background: var(--nc-primary-deep);
}

/* Fonte padrão forçada pra workspace inteira — exceto ícones, que usam
   fontes especiais onde cada caractere desenha um símbolo, não uma
   letra (Font Awesome, ícones nativos do APEX, jQuery UI, Lucide). */
html body,
html body *:not(.fa):not([class*=" fa-"]):not([class^="fa-"]):not(.a-Icon):not(.t-Icon):not([class*=" icon-"]):not([class^="icon-"]):not(.ui-icon):not([class*="lucide"]):not(.a-TreeView-toggle):not(.a-MenuBar-icon):not(.a-Menu-subMenuCol):not(.a-IG):not(.a-IG *):not(.a-GV):not(.a-GV *):not(.a-GV-columnItemContainer *):not(.u-selector):not([class*="CheckboxLabel"]):not([class*="controlsCheckbox"]):not([class*="RadioLabel"]) {
  font-family: var(--nc-font) !important;
}
/* A pedido: mantém a fonte, tamanho e demais métricas de texto do
   Interactive Grid 100% nativas do APEX (mesmo com nosso tema de
   cores ativo) — o desalinhamento entre a coluna de checkbox e a de
   dados parece estar ligado a essas métricas de alguma forma ainda
   não totalmente explicada, e usar a fonte nativa evita o problema. */
html body .a-IG,
html body .a-IG * {
  font-family: revert !important;
}

/* ---------- Base ---------- */
body,
.t-Body {
  background-color: var(--nc-bg);
  color: var(--nc-ink);
  font-family: var(--nc-font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nc-primary); }
a:hover { color: var(--nc-primary-glow); }
/* Exceção: o menu de filtro de coluna da Interactive Report/Grid
   (Sort Widget) usa links internamente, e nossa regra genérica acima
   estava sobrescrevendo a cor nativa do hover desse menu (pensada
   pra ficar legível no fundo escuro dele) por um roxo claro que
   ficava difícil de ler. Mantém a cor nativa aqui. */
html body .a-IRR-sortWidget a:hover,
html body [class*="sortWidget"] a:hover {
  color: inherit !important;
}

/* ---------- Header (t-Header) ---------- */
.t-Header {
  background: linear-gradient(135deg, var(--nc-primary-deep), var(--nc-primary) 55%, var(--nc-primary-glow));
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(61, 26, 94, 0.18);
}
/* Sem !important de propósito: em ambientes que já têm uma cor fixa
   escrita direto no HTML (inline style, indicador de ambiente
   DEV/TESTE), o inline sempre vence e essa cor customizada é
   respeitada. Em ambientes sem essa marcação, o degradê do tema
   escolhido passa a valer normalmente. */
.t-Header-branding {
  background: linear-gradient(135deg, var(--nc-primary-deep), var(--nc-primary) 55%, var(--nc-primary-glow));
}
/* Menu dinâmico do topo (.t-Header-nav) — parte de baixo da barra,
   onde ficam os itens tipo "Frequência", "Lançamentos", etc. Usa a
   mesma cor sólida do tema pra ficar visualmente unido com a parte de
   cima da barra. */
.t-Header-nav {
  background: var(--nc-primary) !important;
}
.t-Header-nav-list.a-MenuBar {
  background: transparent !important;
}
/* Botões do próprio cabeçalho (Blog, Notificações, usuário logado) —
   usam .t-NavigationBar-item, mas ficam dentro do cabeçalho escuro,
   então só precisam de destaque no hover/foco, sem fundo fixo no
   estado normal. */
html body .t-Header-navBar .t-NavigationBar-item .t-Button--navBar:hover,
html body .t-Header-navBar .t-NavigationBar-item .t-Button--navBar:focus,
html body .t-Header-navBar .t-NavigationBar-item .t-Button--navBar[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}
/* .t-NavigationBar usado DENTRO do conteúdo da página (não no
   cabeçalho) — ex.: menus de abas tipo "Requisições / Dados
   Cadastrais / ...". Usa as MESMAS classes nativas do menu do
   cabeçalho (.t-Button--navBar/.t-Button--header), mas como está
   sobre um fundo claro (não o cabeçalho escuro), precisa de uma cor
   de fundo própria — sem isso, o texto força branco fica ilegível. */
/* Região "LISTA_COLAB" (Dados do Colaborador) — o fundo escuro atrás
   dos botões de navegação também precisa seguir o tema. */
/* Lista de navegação (Requisições/Dados Cadastrais/...) usada em
   regiões tipo "sidebar" — sempre em coluna vertical, um item por
   linha, independente da largura da região que a contém (evita
   quebrar em 2 colunas quando a região é mais larga). */
html body .t-Region .t-NavigationBar {
  display: flex !important;
  flex-direction: column !important;
  max-width: 220px !important;
}
html body .t-Region .t-NavigationBar .t-NavigationBar-item {
  width: 100% !important;
}
html body #LISTA_COLAB {
  background-color: var(--nc-primary) !important;
  border-top-width: 0px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
html body #LISTA_COLAB .t-Button--navBar {
  background-color: var(--nc-primary) !important;
  color: #fff !important;
}
/* Fecha o vão vazio: a coluna que contém essa lista ainda ocupava a
   largura original do grid (ex.: col-3), mesmo o conteúdo tendo
   encolhido. Usa :has() pra mirar só ESSA coluna específica (não
   qualquer .col-3 do sistema), encolhendo ela e alargando a coluna
   vizinha (a dos dados do colaborador) pra ocupar o espaço sobrando. */
html body .row:has(#LISTA_COLAB) {
  display: flex !important;
  flex-wrap: nowrap !important;
}
html body .row > [class*="col-"]:has(#LISTA_COLAB) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 240px !important;
}
html body .row > [class*="col-"]:has(#LISTA_COLAB) + [class*="col-"] {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body .row > [class*="col-"]:has(#LISTA_COLAB) + [class*="col-"] > * {
  margin-top: 0 !important;
}
html body .t-Region .t-NavigationBar .t-NavigationBar-item .t-Button--navBar,
html body .t-Region .t-NavigationBar .t-NavigationBar-item .t-Button--navBar[aria-expanded="true"],
html body .t-Region .t-NavigationBar .t-NavigationBar-item .t-Button--navBar[aria-expanded="false"],
html body .t-Region .t-NavigationBar .t-NavigationBar-item .t-Button--navBar.is-active {
  background-color: var(--nc-primary) !important;
  background-image: none !important;
  color: #fff !important;
}
html body .t-Region .t-NavigationBar .t-NavigationBar-item .t-Button--navBar:hover {
  background-color: var(--nc-primary-deep) !important;
}
.t-Header-branding,
.t-Header-navBar,
.t-Header-controls,
.t-Header-logo-link,
.t-Header-logo,
.t-Button--header,
.t-NavTabs-link,
.a-MenuBar-label,
.a-MenuBar-item {
  color: #fff !important;
}
/* Foto de perfil padrão (quando não há foto real) — o ícone/avatar de
   fallback usa uma cor roxa fixa do tema nativo, sem relação com
   nosso sistema. Sobrescreve pra seguir o tema escolhido. */
html body .fotoColabSmall,
html body img.fotoColabSmall {
  background: var(--nc-primary) !important;
  color: var(--nc-primary) !important;
}
/* Foto "Média" (tela de detalhes do colaborador) — força um círculo
   perfeito (largura = altura), já que o formato oval vinha de a
   imagem não ser um quadrado perfeito com border-radius:50% em cima. */
html body img.fotoColabMed {
  width: 96px !important;
  height: 96px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
  image-rendering: -webkit-optimize-contrast;
  outline: 1px solid transparent;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
/* Ajuste geral pra imagens de exibição (display_image): deixa o
   TAMANHO natural (sem esticar/cortar) por padrão — a versão
   anterior forçava um quadrado fixo em TODAS elas, o que ficava bom
   pra fotos de perfil arredondadas, mas cortava logos e outras
   imagens não-quadradas. Cada uso específico que precisar de círculo
   perfeito (como fotoColabMed) tem sua própria regra à parte. */
html body img.display_image.apex-item-image {
  max-width: 100% !important;
  height: auto !important;
}
/* Foto de perfil específica (#P1_FOTO) que precisa ser um círculo
   perfeito — usa o ID em vez da classe genérica, pra não afetar
   outras imagens (como logos) que usam a mesma classe. */
html body img#P1_FOTO.display_image {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover !important;
}
/* Menu dinâmico do topo (.a-MenuBar) — item "atual" e hover usavam a
   cor nativa do tema Oracle (roxo fixo do Theme Style), sem nenhuma
   relação com nosso sistema de variáveis. Agora seguem o tema
   escolhido. Força fundo transparente nos itens NÃO atuais, pra
   neutralizar qualquer resquício de cor fixa do tema nativo. */
html body .a-MenuBar-item.a-MenuBar-item:not(.a-Menu--current) > .a-MenuBar-label,
html body .a-MenuBar-item.a-MenuBar-item:not(.a-Menu--current) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html body .a-MenuBar-item.a-MenuBar-item:not(.a-Menu--current) > .a-MenuBar-label::before,
html body .a-MenuBar-item.a-MenuBar-item:not(.a-Menu--current) > .a-MenuBar-label::after,
html body .a-MenuBar-item.a-MenuBar-item:not(.a-Menu--current)::before,
html body .a-MenuBar-item.a-MenuBar-item:not(.a-Menu--current)::after {
  background: transparent !important;
  background-color: transparent !important;
}
html body .a-MenuBar-item.a-Menu--current,
html body .a-MenuBar-item.a-Menu--current > .a-MenuBar-label {
  background: var(--nc-primary-glow) !important;
  color: #fff !important;
}
html body .a-MenuBar-label:hover,
html body .a-MenuBar-item:hover > .a-MenuBar-label {
  background: rgba(255, 255, 255, 0.12) !important;
}
html body .a-Menu {
  background: var(--nc-primary) !important;
  border-color: var(--nc-primary-deep) !important;
}
html body .a-Menu-content,
html body .t-NavigationBar-menu .a-Menu-content {
  background: var(--nc-primary) !important;
}
/* Itens desabilitados do menu (ex.: "Reverter Alterações" quando não
   há nada pra reverter) usam uma cor escura pensada pra fundo claro
   — no nosso fundo roxo, ficava quase invisível. */
html body .a-Menu-item.is-disabled,
html body .a-Menu-item[aria-disabled="true"] {
  color: rgba(255, 255, 255, 0.45) !important;
}
html body .a-Menu-item.is-disabled .a-Menu-label,
html body .a-Menu-item[aria-disabled="true"] .a-Menu-label,
html body .a-Menu-item.is-disabled .a-Icon,
html body .a-Menu-item[aria-disabled="true"] .a-Icon {
  color: rgba(255, 255, 255, 0.45) !important;
}
html body .t-NavigationBar-menu a,
html body .t-NavigationBar-menu .a-Menu-label {
  color: #fff !important;
}
html body .t-NavigationBar-menu li:hover > a,
html body .t-NavigationBar-menu a:hover {
  background: var(--nc-primary-deep) !important;
}
html body .a-Menu-item:hover,
html body .a-Menu-item.is-highlighted,
html body .a-Menu-item:focus,
html body .a-Menu-item:focus-within,
html body .a-Menu-item[aria-selected="true"],
html body .a-Menu-item:hover .a-Menu-inner,
html body .a-Menu-item:hover .a-Menu-label,
html body .a-Menu-label:hover,
html body .a-Menu-label:focus,
html body .a-Menu-inner:hover {
  background: var(--nc-primary-deep) !important;
  transition: background-color 0.12s ease !important;
}
html body .a-Menu-item.is-current,
html body .a-Menu-item.is-selected {
  background: var(--nc-primary-deep) !important;
  color: #fff !important;
}
/* Espaço vazio dentro de cada item do submenu (reservado pra ícone de
   submenu, quando não tem submenu fica vazio) — tinha cor de fundo
   própria sobrepondo a do item. Deixa transparente pra sempre mostrar
   a cor de baixo. */
html body .a-Menu-subMenuCol {
  background: transparent !important;
}
/* Item "em foco" automaticamente quando o menu abre (antes de mover o
   mouse) — usa :focus-within, que funciona independente do nome da
   classe que o JavaScript do widget usa pra marcar esse estado. Cobre
   tanto o .a-Menu-item quanto o <li> mais simples usado em alguns
   dropdowns (ex.: menu do usuário). */
html body .t-NavigationBar-menu li:focus-within,
html body .t-NavigationBar-menu li:focus-within > a,
html body .a-Menu li:focus-within,
html body .a-Menu li:focus-within > a,
html body .a-Menu-item:focus-within,
html body .a-Menu-item:focus-within .a-Menu-inner {
  background: var(--nc-primary-deep) !important;
  color: #fff !important;
}
.t-Button--header {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: var(--nc-radius-sm);
}
.t-Button--header:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Side navigation (t-TreeNav) ---------- */
.t-Body-nav,
.t-TreeNav {
  background: var(--nc-primary-deep);
}
.t-TreeNav .a-TreeView-content,
.t-TreeNav .a-TreeView-label {
  color: rgba(255, 255, 255, 0.86);
}
.t-TreeNav .a-TreeView-node .a-TreeView-content:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: var(--nc-radius-sm);
}
.t-TreeNav .a-TreeView-node.is-current > .a-TreeView-content,
.t-TreeNav .a-TreeView-node.is-current--top > .a-TreeView-content {
  background: var(--nc-primary-glow);
  color: #fff;
  border-radius: var(--nc-radius-sm);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5);
}
.t-TreeNav .a-TreeView-content .a-TreeView-icon,
.t-TreeNav .a-TreeView-toggle::before { color: rgba(255, 255, 255, 0.7); }

/* ---------- Regions / cards ---------- */
.t-Region,
.t-Alert,
.t-Card,
.a-IRR-region,
.t-Report,
.t-Region--hideHeader {
  background-color: var(--nc-card);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
/* A pedido: quando a região tem "Remove UI Decoration" marcado em
   Appearance > Template Options > Style (classe nativa do APEX
   .t-Region--noUI), isso tem que ser respeitado SEMPRE — em
   qualquer aplicação, independente de estar combinado com outras
   opções de template (--removeHeader, --scrollBody etc.). Sem fundo,
   borda, sombra ou cantos arredondados de "card" do nosso skin; a
   região fica como conteúdo cru, do jeito que foi pedido no Page
   Designer. Precisa de mais especificidade (.t-Region + o modificador)
   e !important pra sempre vencer a regra genérica de card acima. */
.t-Region.t-Region--noUI {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Mesma lógica pros Display Items DENTRO de uma região --noUI: o
   nosso CSS de "Somente leitura / Display Only" (mais abaixo) dá a
   qualquer Display Item uma "caixa" de campo — borda e fundo cinza —
   que o APEX nativo não tinha antes das nossas mudanças. Numa região
   sem decoração, esse item normalmente está sendo usado como
   conteúdo solto (um título, uma logo, um texto centralizado), não
   como campo de formulário — então a caixa não deveria aparecer ali.
   Mantém só o alinhamento (flex + width:100%, já corrigido acima). */
.t-Region--noUI .apex-item-display-only,
.t-Region--noUI span.display_only,
.t-Region--noUI .t-Region-body .apex-item-display-only,
.t-Region--noUI .t-Region-body span.display_only {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  color: var(--nc-ink) !important;
}
/* Mesmo caso, agora dentro de um Alert (.t-Alert) usado como banner
   de status (ex.: "Existe pendência de assinatura...") — um Display
   Only ali dentro é só o texto do próprio aviso, não um campo de
   formulário, então também não deveria ganhar a caixa (borda/fundo/
   padding). A cor do texto continua a que o Alert já define (não força
   nc-ink aqui), pra não brigar com a cor de cada tipo de aviso. */
.t-Alert .apex-item-display-only,
.t-Alert span.display_only,
.t-Alert .t-Alert-body .apex-item-display-only,
.t-Alert .t-Alert-body span.display_only {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-weight: 700 !important;
  color: var(--nc-ink) !important;
}
/* Toda a cadeia de "embrulhos" entre o Alert e o texto (container >
   row > col > campo) precisa ficar transparente também — senão sobra
   um retângulo com a cor de fundo da PÁGINA por trás do texto, em vez
   da cor cheia do Alert (ex.: o amarelo do warning) aparecer inteira e
   uniforme atrás de tudo. */
.t-Alert .container,
.t-Alert .row,
.t-Alert [class*="col-"],
.t-Alert .t-Form-fieldContainer,
.t-Alert .t-Form-inputContainer,
.t-Alert .t-Form-itemWrapper {
  background: transparent !important;
}
/* Faltava neutralizar 3 camadas ACIMA da cadeia acima: .t-Alert-wrap,
   .t-Alert-content e .t-Alert-body ficam entre a <div class="t-Alert
   ...-colorBG..."> (que o APEX pinta de amarelo/etc. nativamente) e o
   .container de dentro — sem essa transparência aqui, o fundo colorido
   "para" nessas 3 divs e não chega até o texto. Escopado só em Alerts
   com --colorBG (Highlight Background), pra não mexer nos Alerts SEM
   essa opção, que devem continuar com o conteúdo branco de propósito
   (só o ícone/borda coloridos). */
.t-Alert--colorBG .t-Alert-wrap,
.t-Alert--colorBG .t-Alert-content,
.t-Alert--colorBG .t-Alert-body {
  background: transparent !important;
}
/* A região "avó" (nc-stepper-host) é só uma casca estrutural pro
   stepper — sem borda, sombra, fundo ou padding próprios. */
html body .nc-stepper-host {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .nc-stepper-host > .t-Region-bodyWrap > .t-Region-body {
  padding: 0 !important;
}
/* Cada etapa do stepper (a "filha", ex.: Identificação) também vira
   uma casca sem borda/fundo/padding próprios — só o conteúdo dela. */
html body .nc-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html body .nc-section > .t-Region-bodyWrap > .t-Region-body {
  padding: 0 !important;
}

/* Duas marcações manuais e simétricas pro cabeçalho de uma região:
   - nc-no-header    -> força ESCONDER (mesmo se o tema mostraria)
   - nc-show-header  -> força MOSTRAR  (mesmo se o tema esconderia,
                         como acontece com Template Options "Remove
                         Header"/"noUI" — .t-Region--removeHeader /
                         .t-Region--noUI)
   Sem marcação nenhuma, vale o comportamento padrão do próprio tema. */
html body .nc-show-header .t-Region-header {
  display: flex !important;
}
html body .nc-no-header .t-Region-header {
  display: none !important;
}
/* A região "avó" (a que leva nc-stepper-host) nunca precisa mostrar o
   próprio cabeçalho — é só uma casca estrutural pro stepper. Escondemos
   automaticamente aqui, sem precisar de mais nenhuma classe além da
   nc-stepper-host que já é obrigatória pro recurso funcionar. */
html body .nc-stepper-host > .t-Region-header {
  display: none !important;
}
/* Qualquer região dentro do Footer da Global Page (Desktop) nunca
   mostra o próprio cabeçalho — automático, sem precisar da classe
   nc-no-header em cada aplicação. O <footer class="t-Footer"> é
   estrutural do próprio tema, sempre presente. */
html body .t-Footer .t-Region-header {
  display: none !important;
}
/* Região de breadcrumb de cada página (fica dentro de .t-Body-title,
   uma área estrutural do próprio tema, diferente do .t-Header/.t-Footer
   da Global Page) nunca mostra o próprio cabeçalho — automático, sem
   precisar de nc-no-header em cada página. */
html body .t-Body-title .t-Region-header {
  display: none !important;
}

html body .t-Region:not(.t-Region--removeHeader):not(.t-Region--noUI) > .t-Region-header {
  display: flex !important;
  align-items: center !important;
  gap: 1.125rem !important;
  background: var(--nc-card) !important;
  border-bottom: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius) var(--nc-radius) 0 0 !important;
  padding: 0.3rem 0.75rem !important;
}
html body .t-Region-headerItems--title {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body .t-Region-title,
html body .t-Region-headerItems--title .t-Region-title {
  font-family: var(--nc-font) !important;
  color: var(--nc-primary) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-native-header__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nc-native-header__subtitle {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nc-muted) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-Region-body { padding: 0.75rem !important; }

/* Desativa a linha roxa fixa que vem do Natcorp_Style.css
   (.t-Region-headerItems.t-Region-headerItems--title), pra não
   ficar duas linhas roxas coladas no canto da região. */
html body .t-Region-headerItems.t-Region-headerItems--title {
  border-left: none !important;
}
/* A pedido: removida a listra roxa da borda esquerda das regiões —
   agora usa a mesma cor cinza clara das outras bordas, ficando
   consistente em volta toda. */
html body .t-Region:not(.t-Region--noUI) {
  border-left-color: var(--nc-border) !important;
  border-left-width: 1px !important;
}
html body .t-Region-header:not(.t-Region--noUI) {
  border-left-color: var(--nc-border) !important;
  border-left-width: 1px !important;
}

/* Cabeçalho nativo "comum" (fora do stepper) — ícone claro em cima do
   título da região, feito 100% em CSS via ::before (SVG embutido),
   sem JavaScript. Antes isso era montado pelo natcorp.js junto com a
   separação de subtítulo via "Título|Subtítulo" — essa parte do
   subtítulo não é mais suportada (não dá pra "ler" e dividir texto só
   com CSS); o título aparece inteiro, numa linha só, como veio. */
html body .t-Region:not(.nc-section):not(.t-Region--removeHeader):not(.t-Region--noUI) > .t-Region-header .t-Region-headerItems--title::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: 0 0 auto;
  background-color: var(--nc-primary-deep);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Esconde só o cabeçalho da PRÓPRIA etapa (filho direto), nunca o de
   sub-regiões aninhadas mais fundo dentro dela — essas mantêm seu
   próprio cabeçalho normalmente. */
html body .nc-section > .t-Region-header {
  display: none !important;
}

/* Sub-região usada como agrupador de assunto */
.t-Region--scrollBody > .t-Region-bodyWrap > .t-Region-body { padding: 0.75rem 0.9rem; }

/* ---------- Form fields (t-Form-*) — porte literal do arquivo 2 ---------- */
html body .t-Form-fieldContainer,
html body .t-Form-fieldContainer--stacked {
  margin-bottom: 3px !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
html body .t-Form-labelContainer {
  margin: 0 !important;
  padding-bottom: 0 !important;
}

html body .t-Form-inputContainer {
  margin: 0 !important;
}
html body .row {
  row-gap: 1px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
html body .container {
  padding: 0 !important;
}
html body .t-Form-fieldContainer .col,
html body .t-Form-fieldContainer[class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
/* Label ao lado do campo (não flutuante, ex.: layout "Optional"/
   "Required" com label à esquerda) — empurra o label um pouco pra
   baixo (padding-top), aproximando do centro vertical do campo
   (altura padrão 44px), sem mexer no display/flex da linha (isso
   desalinhava o espaçamento nativo das colunas nas duas tentativas
   anteriores). */
html body .t-Form-fieldContainer:not(.t-Form-fieldContainer--floatingLabel) > .t-Form-labelContainer[class*="col-"] {
  padding-top: 12px !important;
}
html body .t-Form-fieldContainer .t-Form-label,
html body .t-Form-fieldContainer label,
html body label.t-Form-label {
  font-family: var(--nc-font) !important;
  font-size: 10.2px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  color: #9691a0 !important;
  color: color-mix(in srgb, var(--nc-muted) 70%, white) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
  display: block !important;
}
html body .t-Form-fieldContainer.is-required .t-Form-label::after,
html body .t-Form-fieldContainer .t-Form-label .a-Icon.icon-asterisk,
html body .apex-item-icon-required {
  color: var(--nc-destructive) !important;
}
html body .t-Form-fieldContainer .t-Form-itemText--inlineHelp,
html body .apex-item-wrapper .t-Form-inlineHelp,
html body .t-Form-helpText {
  font-size: 1rem !important;
  color: var(--nc-muted-fg) !important;
}

/* Itens de formulário — texto, número, e-mail, telefone, senha,
   datepicker, popup LOV, color picker, select, textarea */
html body input.text_field:not(#P9999_SEARCH),
html body input.apex-item-text:not(#P9999_SEARCH):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input[type="text"].apex-item-text:not(#P9999_SEARCH):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input[type="email"]:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input[type="tel"]:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input[type="number"]:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input[type="password"]:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input.apex-item-datepicker:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input.apex-item-popup-lov:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body input.apex-item-color-picker:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body select.selectlist:not([multiple]):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body select.apex-item-select:not([multiple]):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .apex-item-select:not([multiple]):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .a-Button.a-Button--calendar + input:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .apex-item-group--popup-lov input:not(.a-GV *):not(.a-GV-columnItemContainer *) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 42px !important;
  color: var(--nc-muted-fg) !important;
  background-color: var(--nc-card) !important;
  background-image: none !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  box-shadow: var(--nc-shadow-xs);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease !important;
}
/* A pedido: textarea foi REVERTIDO pro padrão nativo do APEX (sem
   nenhuma altura/resize/padding customizados nossos) — o resize
   nativo estava sendo bloqueado por algum script da própria
   aplicação, e nossas tentativas de contornar isso via CSS/JS não
   resolveram, então preferimos não mexer nisso e deixar 100% no
   comportamento original do Apex. */

/* Campos com label "Floating" (.t-Form-fieldContainer--floatingLabel)
   — o label fica flutuando em cima, então o valor precisa ficar
   "grudado" na parte de baixo da caixa, sem padding inferior, senão
   o label sobrepõe o texto digitado. Caixa mais alta pra sobrar
   espaço em cima pro label. */
html body .t-Form-fieldContainer--floatingLabel input.apex-item-text:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input[type="text"]:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input[type="email"]:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input[type="tel"]:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input[type="number"]:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input.apex-item-datepicker:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input.apex-item-popup-lov:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *) {
  height: 44px !important;
  min-height: 44px !important;
  padding: 20px 12px 2px !important;
  line-height: 1 !important;
}
html body .t-Form-fieldContainer--floatingLabel input.number_field:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input.text_field:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel .apex-item-wrapper[class*="clockpicker"] input[type="text"]:not(.a-GV *):not(.a-GV-columnItemContainer *) {
  height: 44px !important;
  min-height: 44px !important;
  padding: 20px 12px 2px !important;
  line-height: 1 !important;
}
/* Pega qualquer OUTRO tipo de campo de texto do APEX dentro de um
   floating label que não esteja explicitamente listado acima (ex.:
   itens mais novos, variações de máscara, etc.) — garante o mesmo
   alinhamento embaixo pra qualquer campo de texto/número/data. */
html body .t-Form-fieldContainer--floatingLabel input[type="text"]:not(.a-GV *):not(.a-GV-columnItemContainer *):not(#nc-fake-id),
html body .t-Form-fieldContainer--floatingLabel input[type="search"]:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input[type="url"]:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel input.apex-item-text:not(.a-GV *):not(.a-GV-columnItemContainer *) {
  height: 44px !important;
  min-height: 44px !important;
  padding: 20px 12px 2px !important;
  line-height: 1 !important;
}
/* Exceção: campo de código de verificação (tela de Token) — o
   label desse campo vem vazio (sem texto), então não precisa
   reservar espaço de floating label lá em cima. A regra genérica de
   campo de texto (font-size: 14px !important) vencia até a fonte
   nativa gigante desse campo específico — aqui, o seletor por ID
   tem especificidade maior e consegue restaurar o tamanho grande.
   Centraliza o número dentro do campo (mantendo nosso visual
   arredondado), sem cortar. */
html body input#P2_VERIFICATION_CODE#P2_VERIFICATION_CODE.text_field.apex-item-text {
  height: 80px !important;
  min-height: 80px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  line-height: 80px !important;
  text-align: center !important;
  font-size: 40px !important;
  letter-spacing: 12px !important;
}
/* <select> não segue padding + line-height do mesmo jeito que
   <input> pra empurrar o texto pra baixo — o navegador centraliza o
   conteúdo dele verticalmente na altura disponível, ignorando boa
   parte disso. Em vez de padding-top grande + line-height:1 (que
   funciona pra input mas não pra select), usa padding-bottom maior
   que o padding-top — a diferença entre os dois "empurra" o texto
   pra mais perto da borda de baixo, aproximando do efeito do input. */
html body .t-Form-fieldContainer--floatingLabel select.apex-item-select:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel select.selectlist:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .t-Form-fieldContainer--floatingLabel select.apex-item-multi:not(.a-GV *):not(.a-GV-columnItemContainer *) {
  height: 44px !important;
  min-height: 44px !important;
  padding: 22px 36px 2px 12px !important;
  line-height: normal !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2377707f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
}
html body .t-Form-fieldContainer--floatingLabel textarea.apex-item-textarea,
html body .t-Form-fieldContainer--floatingLabel textarea.textarea {
  padding: 20px 12px 2px !important;
}
html body .t-Form-fieldContainer--floatingLabel .select2-container--default .select2-selection--single {
  height: 44px !important;
  padding-top: 20px !important;
}
html body .t-Form-fieldContainer--floatingLabel .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1 !important;
}
html body .t-Form-fieldContainer--floatingLabel ul.apex-item-multi {
  align-items: flex-end !important;
  padding: 20px 10px 2px !important;
}
/* Radio Group (toggle segmentado Sim/Não etc.) dentro de floating
   label — empurra só o grupo em si pra baixo (margin-top), sem mexer
   no wrapper que também contém o label flutuante. */
html body .t-Form-fieldContainer--floatingLabel .apex-item-group--rc.apex-item-radio {
  margin-top: 20px !important;
}
html body .t-Form-fieldContainer--floatingLabel .apex-item-display-only,
html body .t-Form-fieldContainer--floatingLabel span.display_only {
  align-items: flex-end !important;
  padding: 20px 12px 2px !important;
}
/* Reforço universal (não depende de ID, vale pra qualquer aplicação):
   Popup LOV é sempre readonly, e essa combinação de atributo+classe,
   repetida, ganha força extra pra vencer a regra genérica de campo. */
html body .t-Form-fieldContainer--floatingLabel input[readonly].apex-item-popup-lov.apex-item-popup-lov:not(#nc-fake-id) {
  height: 44px !important;
  min-height: 44px !important;
  padding: 20px 12px 2px !important;
  line-height: 1 !important;
}

/* Campos com ícone nativo do APEX (classe apex-item-has-icon, ex.: os
   campos de Usuário/Senha da tela de login) — precisam de mais espaço
   à esquerda pro texto/placeholder não ficar embaixo do ícone.
   Especificidade reforçada (classe dupla + truque :not(#nc-fake-id),
   igual usado nas regras de label flutuante) pra empatar/vencer a
   regra base de normalização de campo (que usa :not(#P9999_SEARCH) e
   por isso já carrega especificidade de ID). */
html body input.apex-item-text.apex-item-has-icon.apex-item-has-icon:not(#nc-fake-id),
html body input[type="text"].apex-item-has-icon.apex-item-has-icon:not(#nc-fake-id),
html body input[type="password"].apex-item-has-icon.apex-item-has-icon:not(#nc-fake-id),
html body input.apex-item-has-icon.apex-item-has-icon:not(#nc-fake-id) {
  padding-left: 40px !important;
}
/* Reforço extra específico pra tela de login (.t-Login-body), com
   especificidade bem acima de qualquer regra genérica de campo.
   Vale para qualquer página da família login (900, 901 - Alterar Senha,
   etc.), já que todas usam o mesmo template .t-Login-body. */
html body .t-Login-body input.apex-item-text.apex-item-has-icon.apex-item-has-icon:not(#nc-fake-id),
html body .t-Login-body input.apex-item-has-icon.apex-item-has-icon:not(#nc-fake-id) {
  padding-left: 38px !important;
  padding-right: 12px !important;
}
html body #P900_USUARIO {
  padding-left: 38px !important;
}
html body #P900_SENHA {
  padding-left: 38px !important;
}
html body #P900_EMPRESA {
  padding-left: 38px !important;
}
html body #P900_MATRICULA {
  padding-left: 38px !important;
}
html body #P900_EMAIL {
  padding-left: 38px !important;
}
html body .apex-item-icon {
  z-index: 1;
}

/* Restaura o ícone nativo de calendário em <input type="date"> — o
   appearance:none da regra acima também pegava esses campos (mesma
   classe apex-item-text) e escondia o ícone do navegador. */
html body input[type="date"],
html body input[type="time"],
html body input[type="datetime-local"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
}
html body input[type="date"]::-webkit-calendar-picker-indicator,
html body input[type="time"]::-webkit-calendar-picker-indicator,
html body input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  cursor: pointer !important;
}
/* Universal: QUALQUER input ou textarea do sistema (não importa o
   tipo de item nem a classe) tem que mostrar o placeholder com a
   mesma cor legível, com opacidade 100% — antes só cobria
   apex-item-text/textarea, deixando passar Popup LOV, datepicker,
   color picker, multi-item etc., que caíam no padrão fraco do
   navegador. Campos com regra própria mais específica (ex.: o campo
   de busca do filtro de coluna, mais abaixo no arquivo) continuam
   podendo se sobrepor normalmente. */
html body input::placeholder,
html body textarea::placeholder {
  color: var(--nc-muted-fg) !important;
  opacity: 1 !important;
}

/* Foco — anel ametista idêntico ao protótipo */
html body input.apex-item-text:focus,
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body input[type="number"]:focus,
html body input[type="password"]:focus,
html body input.apex-item-datepicker:focus,
html body input.apex-item-popup-lov:focus,
html body select.apex-item-select:focus,
html body select.selectlist:focus,
html body textarea.apex-item-textarea:focus,
html body textarea.textarea:focus {
  outline: none !important;
  border-color: var(--nc-ring) !important;
  box-shadow:
    0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.28),
    var(--nc-shadow-xs) !important;
  background-color: var(--nc-card) !important;
}

/* Somente leitura / desabilitado */
html body input.apex-item-text[readonly],
html body input.apex-item-text[disabled],
html body input.apex-item-text.apex_disabled,
html body textarea.apex-item-textarea[readonly],
html body textarea.apex-item-textarea.apex_disabled,
html body select.apex-item-select[disabled],
html body select.apex-item-select.apex_disabled,
html body .apex-item-display-only,
html body span.display_only {
  background-color: var(--nc-muted-bg) !important;
  color: var(--nc-muted-fg) !important;
  border-color: var(--nc-border) !important;
  box-shadow: none !important;
  cursor: default !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* A pedido: no tema Standard Natcorp especificamente, todo item
   desativado (Disabled/readonly) — incluindo os Display Items — usa
   um fundo levemente diferente do resto (#fafafa), em vez do
   --nc-muted-bg padrão usado nos demais temas. Mesma lista de
   seletores da regra "Somente leitura / desabilitado" acima, só que
   com prefixo do tema. */
html.nc-theme-standard body input.apex-item-text[readonly],
html.nc-theme-standard body input.apex-item-text[disabled],
html.nc-theme-standard body input.apex-item-text.apex_disabled,
html.nc-theme-standard body textarea.apex-item-textarea[readonly],
html.nc-theme-standard body textarea.apex-item-textarea.apex_disabled,
html.nc-theme-standard body select.apex-item-select[disabled],
html.nc-theme-standard body select.apex-item-select.apex_disabled,
html.nc-theme-standard body .apex-item-display-only,
html.nc-theme-standard body span.display_only {
  background-color: #fafafa !important;
}
/* Display Only usa <span>, que não tem caixa/altura de campo por
   padrão como um <input> tem — replica a caixa inteira do Text Item
   (altura, padding, borda, cantos) pra ficar uma cópia visual completa.
   Exceção: quando o conteúdo tem HTML rico (parágrafos <p>, como uma
   descrição/comentário formatado), NÃO usa flex — isso forçava todo
   o texto (incluindo os parágrafos) pra uma linha só, ignorando as
   quebras naturais. Nesses casos, mantém o empilhamento normal de
   bloco, só ajustando largura/borda/padding pra ficar consistente
   visualmente com os outros campos. */
html body .apex-item-display-only:not(:has(p)),
html body span.display_only:not(:has(p)) {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius-md) !important;
}
/* Corrige o alinhamento de texto (ex.: <center>, ou qualquer outra tag
   com text-align próprio) que o desenvolvedor coloca DENTRO do valor
   de um Display Only. Sem isto, o filho direto encolhe pro tamanho do
   próprio conteúdo (comportamento padrão de item flex) e fica sempre
   "colado" à esquerda da caixa, mesmo com <center> — o texto continua
   centralizado dentro da tag, só que a tag em si não ocupa a largura
   toda, então visualmente parece que o alinhamento não fez efeito.
   Isso NÃO muda nada nos Display Items comuns (texto puro, sem tag),
   que continuam alinhados à esquerda como sempre. */
html body .apex-item-display-only:not(:has(p)) > *,
html body span.display_only:not(:has(p)) > * {
  width: 100% !important;
}
html body .apex-item-display-only:has(p),
html body span.display_only:has(p) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 12px !important;
  border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius-md) !important;
}
html body .apex-item-display-only:has(p) p {
  margin: 0 0 10px !important;
}
html body .apex-item-display-only:has(p) p:last-child {
  margin-bottom: 0 !important;
}

/* Clock Picker (plugin de.danielh.clockpicker) — o <input> dele não
   tem nenhuma classe nossa (apex-item-text), então mira o wrapper do
   plugin. Só layout, mesma caixa do Text Item (altura, padding, borda,
   fonte). */
html body .apex-item-wrapper[class*="clockpicker"] input[type="text"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 42px !important;
  color: var(--nc-muted-fg) !important;
  background-color: var(--nc-card) !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  box-shadow: var(--nc-shadow-xs) !important;
}
html body .apex-item-wrapper[class*="clockpicker"] input[type="text"]:focus {
  outline: none !important;
  border-color: var(--nc-ring) !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.28) !important;
}

/* File Browse — 100% nativo do APEX (sem nenhum layout, arredondado
   ou reposicionamento customizado). Só a cor do tema (no quadradinho
   da pastinha) e o hover seguem nosso padrão visual. */
html body .apex-item-group--file:hover {
  border-color: var(--nc-primary-glow) !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.2) !important;
}
html body .apex-item-file-dropzone-icon {
  background-color: var(--nc-primary) !important;
  color: #fff !important;
}
/* Hero Region (Static Content) — mesma fonte e cor padrão dos itens,
   sem mexer no tamanho. */
html body .t-HeroRegion-title {
  font-family: var(--nc-font) !important;
  color: var(--nc-fg) !important;
}

/* Select List — seta customizada do protótipo.
   CORRIGIDO: a regra base de normalização (bem acima, a que tira o
   "appearance" nativo de todos os campos) já força background-image:
   none !important no mesmo seletor, só que com ":not(.a-GV *):not(.a-
   GV-columnItemContainer *)" a mais — isso deixava ela mais específica
   e vencia, apagando a seta em qualquer select FORA de Floating Label
   (que tem uma classe extra e por isso escapava do problema). Repete
   aqui os mesmos ":not()" pra empatar em especificidade — como essa
   regra vem DEPOIS no arquivo, empate = ela vence, e a seta volta a
   aparecer em qualquer select comum. */
html body select.apex-item-select:not([multiple]):not(.a-GV *):not(.a-GV-columnItemContainer *),
html body select.selectlist:not([multiple]):not(.a-GV *):not(.a-GV-columnItemContainer *) {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2377707f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}
html body select.apex-item-select::-ms-expand {
  display: none !important;
}

/* Select2 (plugin) — o <select> real fica escondido; quem aparece é o
   .select2-container. Estilizando pra ficar igual aos demais campos. */
html body .select2-container {
  width: 100% !important;
  font-family: var(--nc-font) !important;
}
html body .select2-container--default .select2-selection--single {
  height: 44px !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  background-color: var(--nc-card) !important;
  box-shadow: var(--nc-shadow-xs);
  display: flex !important;
  align-items: center !important;
}
html body .select2-container--disabled .select2-selection--single {
  background-color: var(--nc-muted-bg) !important;
  border-color: var(--nc-border) !important;
  box-shadow: none !important;
  cursor: default !important;
}
html body .select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: var(--nc-muted-fg) !important;
}
html body .select2-container--disabled .select2-selection--single .select2-selection__arrow {
  opacity: 0.5 !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: normal !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nc-muted-fg) !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--nc-muted-fg) !important;
}
/* Seta customizada, igual ao select nativo */
html body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 10px !important;
  width: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2377707f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Estado aberto/foco — mesmo anel ametista dos outros campos */
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--nc-ring) !important;
  box-shadow:
    0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.28),
    var(--nc-shadow-xs) !important;
}
/* Painel de opções */
html body .select2-dropdown {
  border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius-lg) !important;
  box-shadow: var(--nc-shadow-md);
  overflow: hidden !important;
}
html body .select2-search--dropdown {
  padding: 8px !important;
}
html body .select2-search--dropdown .select2-search__field {
  height: 40px !important;
  padding: 0 10px !important;
  font-size: 1rem !important;
  font-family: var(--nc-font) !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-sm) !important;
  outline: none !important;
}
html body .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--nc-ring) !important;
}
html body .select2-results__option {
  padding: 10px 14px !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  color: var(--nc-fg) !important;
}
html body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--nc-primary-soft) !important;
  color: var(--nc-primary-deep) !important;
}
html body .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--nc-primary) !important;
  color: #ffffff !important;
}

/* Botão de ajuda ao lado do item (ícone "?") */
/* Garante que o botão de ajuda sempre fique do lado direito do item,
   mesmo em campos "complexos" (radio group, popup LOV, etc.) cujo
   conteúdo interno é um <div> em bloco e empurraria o botão pra uma
   linha separada. Aplica nos dois níveis possíveis (itemWrapper e
   inputContainer), porque a posição do botão varia conforme o tipo
   de item. */
html body .t-Form-itemWrapper,
html body .t-Form-inputContainer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}
/* itemWrapper (ícone + campo, ex.: usuário/senha da tela de login)
   precisa ficar SEMPRE numa linha só — o campo tem width:100%
   forçado, então com wrap habilitado aqui o ícone não cabia mais do
   lado e quebrava pra cima do campo. */
html body .t-Form-itemWrapper {
  flex-wrap: nowrap !important;
}
/* inputContainer (campo + botão de ajuda + mensagem de erro) precisa
   de wrap pra mensagem de validação poder cair pra própria linha. */
html body .t-Form-inputContainer {
  flex-wrap: wrap !important;
}
html body .t-Form-itemWrapper > *:not(.t-Form-helpButton):not(.js-resize-sensor):not(img):not(.a-Form-error),
html body .t-Form-inputContainer > *:not(.t-Form-helpButton):not(.js-resize-sensor):not(img):not(.a-Form-error) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Mensagem de validação (obrigatório, formato inválido etc.) — no Apex
   nativo ela sempre cai pra linha de baixo do campo. Como o
   inputContainer/itemWrapper viraram flex (regra acima, pro botão de
   ajuda ficar do lado do item), a mensagem de erro virava só mais um
   item flexível na MESMA linha do campo, espremendo tudo e cortando
   labels. Forçando ela a ocupar 100% da largura, ela sempre "quebra"
   pra própria linha, embaixo do campo — igual ao nativo. */
html body .t-Form-itemWrapper > .a-Form-error,
html body .t-Form-inputContainer > .a-Form-error {
  flex: 1 1 100% !important;
  min-width: 100% !important;
}
/* Imagens (display_image) não devem virar "item flexível esticável"
   como os campos de formulário — mantém proporção natural, só
   limitando pra nunca ultrapassar a largura do container. */
html body .t-Form-itemWrapper > img,
html body .t-Form-inputContainer > img {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
}
/* Sensor de redimensionamento (utilitário invisível de bibliotecas como
   Select2/multi-value) — nunca deve crescer nem ocupar espaço visível.
   Nossa regra de flex:1 acima estava "inflando" ele sem querer. */
html body .js-resize-sensor {
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html body .t-Form-helpButton {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
html body .t-Form-helpButton {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--nc-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body .t-Form-helpButton:disabled,
html body .t-Form-helpButton[disabled] {
  background: transparent !important;
  border: 0 !important;
  color: var(--nc-muted) !important;
  opacity: 0.55 !important;
  cursor: default !important;
}
html body .t-Form-helpButton .a-Icon,
html body .t-Form-helpButton .a-Icon::before {
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
}
html body .t-Form-helpButton:hover {
  background: var(--nc-primary-soft) !important;
  color: var(--nc-primary) !important;
}
/* Reposiciona visualmente o botão de ajuda pro lado do campo, sem
   mover ele de verdade no HTML (CSS não move elemento de um contêiner
   pai pro outro) — usamos position:absolute pra "fingir" que ele está
   lá, calculado pra pousar próximo de onde o campo começa. É uma
   aproximação: pode não encaixar perfeitamente em todo tipo de layout
   de campo (labels com texto de 2 linhas, floating label, etc.),
   diferente da versão em JavaScript que sempre acerta o lugar certo. */
html body .t-Form-fieldContainer {
  position: relative !important;
}
html body .t-Form-labelContainer > .t-Form-helpButton {
  position: absolute !important;
  top: 20px !important;
  right: 4px !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* Popup LOV com múltiplos valores (mostra as seleções como "tags") —
   o campo visual de verdade é o <ul class="apex-item-multi">, não o
   <input> de busca escondido dentro do <li>. Sem isso, o input interno
   herdava a borda/fundo genérica de campo e sobrava como um quadrado
   vazio do lado das tags. */
html body ul.apex-item-multi {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  gap: 6px !important;
  min-height: 44px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  background-color: var(--nc-card) !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  box-shadow: var(--nc-shadow-xs);
}
html body ul.apex-item-multi .apex-item-multi-item {
  display: flex !important;
  align-items: center !important;
  max-width: 100% !important;
}
/* Tags como texto simples (sem virar "pilulazinha" colorida) — mesmo
   visual limpo do popup LOV de valor único. */
html body ul.apex-item-multi .apex-item-multi-item > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--nc-fg) !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html body ul.apex-item-multi .apex-item-multi-item:not(:last-child) > span::after {
  content: ",";
  color: var(--nc-muted);
}
html body .apex-item-multi-remove {
  background: transparent !important;
  border: 0 !important;
  color: var(--nc-muted) !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .apex-item-multi-remove:hover {
  color: var(--nc-destructive) !important;
}
html body .apex-item-multi-remove .a-Icon {
  font-size: 12px !important;
}
html body ul.apex-item-multi input.apex-item-text {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  height: 28px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 4px !important;
  flex: 0 1 auto !important;
}

/* Pop-Up LOV e Datepicker (grupo input + botão) */
html body .apex-item-group--popup-lov,
html body .apex-item-group.apex-item-group--popup-lov,
html body .apex-item-group--datepicker {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
}
html body .apex-item-group--popup-lov .a-Button,
html body .apex-item-group--datepicker .a-Button:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .ui-datepicker-trigger:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body button.a-Button--popupLOV:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body button.a-Button--calendar:not(.a-GV *):not(.a-GV-columnItemContainer *) {
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 10px !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  background: var(--nc-secondary) !important;
  color: var(--nc-primary) !important;
  box-shadow: var(--nc-shadow-xs);
  transition: background 0.15s ease, color 0.15s ease !important;
}
html body .apex-item-group--popup-lov .a-Button:not(.a-GV *):not(.a-GV-columnItemContainer *):hover,
html body .apex-item-group--datepicker .a-Button:not(.a-GV *):not(.a-GV-columnItemContainer *):hover,
html body .ui-datepicker-trigger:not(.a-GV *):not(.a-GV-columnItemContainer *):hover,
html body button.a-Button--calendar:not(.a-GV *):not(.a-GV-columnItemContainer *):hover {
  background: var(--nc-accent) !important;
  color: var(--nc-accent-fg) !important;
}

/* Datepicker (jQuery UI) */
html body .ui-datepicker.a-DatePicker,
html body .ui-datepicker {
  border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius-lg) !important;
  box-shadow: var(--nc-shadow-md);
  background: var(--nc-card) !important;
  font-family: var(--nc-font);
  padding: 8px !important;
}
html body .ui-datepicker .ui-datepicker-header {
  background: var(--nc-secondary) !important;
  border: 0 !important;
  border-radius: var(--nc-radius-md) !important;
  color: var(--nc-primary) !important;
  font-weight: 800 !important;
}
html body .ui-datepicker td a.ui-state-default {
  border-radius: var(--nc-radius-sm) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--nc-fg) !important;
  text-align: center !important;
}
html body .ui-datepicker td a.ui-state-default:hover {
  background: var(--nc-accent) !important;
  color: var(--nc-accent-fg) !important;
}
html body .ui-datepicker td a.ui-state-active,
html body .ui-datepicker td a.ui-state-highlight {
  background: var(--nc-primary) !important;
  color: var(--nc-primary-fg) !important;
  font-weight: 800 !important;
}

/* Radio e Checkbox */
html body .apex-item-group--rc .apex-item-option,
html body .apex-item-group--rc label {
  font-size: 1.05rem !important;
  color: var(--nc-fg) !important;
  font-weight: 500 !important;
}
/* Checkbox (padrão, sem virar toggle) — mesma fonte/tamanho/cor que já
   usamos pro Display Item, só no label do checkbox, sem tocar no Radio
   Group (que mantém o font-size próprio dele, acima). */
html body .apex-item-group--rc.apex-item-checkbox .apex-item-option,
html body .apex-item-group--rc.apex-item-checkbox label {
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nc-fg) !important;
}
html body input[type="radio"].apex-item-radio,
html body input[type="radio"],
html body input[type="checkbox"].apex-item-checkbox,
html body input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 8px 0 0 !important;
  vertical-align: -5px !important;
  border: 1.5px solid var(--nc-input) !important;
  background-color: var(--nc-card) !important;
  box-shadow: var(--nc-shadow-xs);
  cursor: pointer !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
html body input[type="radio"] {
  border-radius: 999px !important;
}
html body input[type="checkbox"] {
  border-radius: 5px !important;
}
html body input[type="radio"]:hover,
html body input[type="checkbox"]:hover {
  border-color: var(--nc-primary-glow) !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.2) !important;
}
html body input[type="radio"]:checked {
  border-color: var(--nc-primary) !important;
  background-color: var(--nc-primary) !important;
  box-shadow: inset 0 0 0 4px var(--nc-card) !important;
}
html body input[type="checkbox"]:checked {
  border-color: var(--nc-primary) !important;
  background-color: var(--nc-primary) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}
html body input[type="radio"]:focus,
html body input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.28) !important;
}
/* Interactive Grid — o checkbox de seleção de linha (<span
   class="u-selector">) desenha o símbolo de "check" usando uma
   fonte de ícones própria do APEX (um caractere especial, não uma
   imagem). Nossa troca de fonte global sobrescrevia isso e o
   símbolo sumia. "revert" não resolve aqui porque ele pula direto
   pro padrão do navegador, ignorando o CSS do próprio APEX — por
   isso força explicitamente o nome exato da fonte de ícone nativa.
   Mesmo mecanismo/correção pro checkbox de alternar controles do
   Interactive Report (.a-IRR-controlsCheckboxLabel). */
html body .u-selector,
html body .u-selector:before,
html body .a-IRR-controlsCheckboxLabel,
html body .a-IRR-controlsCheckboxLabel:before {
  font-family: apex-5-icon-font !important;
}

/* Espaço extra embaixo, pra caixa maior (com o anel de destaque
   quando marcado) não ficar cortada pela borda da região. */
html body .apex-item-group--rc.apex-item-checkbox {
  margin-bottom: 10px !important;
}
/* Cada opção do Checkbox Group precisa de mais altura de linha que o
   padrão nativo, já que nosso quadradinho (26px) é maior que o
   original (16px) — sem isso, opções empilhadas ficam grudadas ou até
   sobrepostas. */
html body .apex-item-group--rc.apex-item-checkbox input + label {
  min-height: 30px !important;
  margin: 6px 0 !important;
  padding-left: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .apex-item-group--rc.apex-item-checkbox input + label:before {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--nc-input) !important;
  background-color: var(--nc-card) !important;
  box-shadow: 0 1px 3px rgba(43, 34, 51, 0.08) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
html body .apex-item-group--rc.apex-item-checkbox input:hover + label:before {
  border-color: var(--nc-primary-glow) !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.2) !important;
}
html body .apex-item-group--rc.apex-item-checkbox input:checked + label:before {
  border-color: var(--nc-primary) !important;
  background-color: var(--nc-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--nc-primary-glow-rgb), 0.28) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
/* O ::after nativo do tema desenha o próprio checkmark por cima do
   ::before — como já desenhamos o nosso checkmark no ::before (via
   background-image acima), escondemos o ::after nativo pra não
   sobrepor/duplicar. */
html body .apex-item-group--rc.apex-item-checkbox input + label:after {
  display: none !important;
}

/* Radio Group estilo "Switch" (Sim/Não como botões, não bolinhas) —
   classe .apex-item-group--switch. Opção selecionada usa a cor do
   tema (igual aos botões "Hot"); a não selecionada fica neutra,
   igual aos botões normais do sistema. */
html body .apex-item-group--switch {
  display: inline-flex !important;
  border-radius: var(--nc-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--nc-input) !important;
}
html body .apex-item-group--switch .apex-item-option {
  margin: 0 !important;
}
html body .apex-item-group--switch input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
html body .apex-item-group--switch label.a-Button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  color: var(--nc-primary-deep) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
html body .apex-item-group--switch input[type="radio"]:checked + label.a-Button {
  background-color: var(--nc-primary) !important;
  color: #fff !important;
}
html body .apex-item-group--switch input[type="radio"]:not(:checked) + label.a-Button:hover {
  background-color: var(--nc-primary-soft) !important;
}
html body .apex-item-group--switch .apex-item-option:not(:last-child) label.a-Button {
  border-right: 1px solid var(--nc-input) !important;
}

/* Radio Group exibido como toggle segmentado (ex.: Sim/Não) — versão
   universal: em vez de mirar só `.apex-item-grid-row` (que às vezes
   fica mais fundo, dependendo de "Number of Columns"), miramos o
   CONTAINER EXTERNO que todo Radio Group tem (.apex-item-group--rc
   .apex-item-radio) e fazemos os <div> de wrapper no meio (apex-item-
   grid, radio_group, apex-item-grid-row) "sumirem" do layout com
   display:contents — assim não importa quantos níveis de divs existam,
   o resultado é sempre o mesmo. */
html body .apex-item-group--rc.apex-item-radio,
html body .apex-item-grid-row {
  display: flex !important;
  align-items: stretch !important;
  height: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: var(--nc-card) !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  overflow: hidden !important;
}
html body .apex-item-group--rc.apex-item-radio .apex-item-grid,
html body .apex-item-group--rc.apex-item-radio .radio_group,
html body .apex-item-group--rc.apex-item-radio .apex-item-grid-row {
  display: contents !important;
}
html body .apex-item-group--rc.apex-item-radio .apex-item-option,
html body .apex-item-grid-row .apex-item-option {
  flex: 1 1 0 !important;
  display: flex !important;
  margin: 0 !important;
}
/* Esconde o rádio nativo (é nele que fica a classe própria do app,
   "borda-campo-valido", de onde vinha a cor rosa, e também a bolinha
   visível) — o clique continua funcionando porque o <label for="...">
   aciona o input escondido normalmente. */
html body .apex-item-group--rc.apex-item-radio .apex-item-option input[type="radio"],
html body .apex-item-grid-row .apex-item-option input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body .apex-item-group--rc.apex-item-radio .apex-item-option label,
html body .apex-item-grid-row .apex-item-option label {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--nc-fg) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
html body .apex-item-group--rc.apex-item-radio .apex-item-option input[type="radio"]:checked + label,
html body .apex-item-grid-row .apex-item-option input[type="radio"]:checked + label {
  background: var(--nc-primary) !important;
  color: #ffffff !important;
}

/* Label vazio (sem texto nenhum) pareado com opção de valor vazio —
   convenção comum quando o desenvolvedor deixa uma opção em branco pra
   representar "nenhum valor". Preenche visualmente com "Não" via
   ::after num label :empty — só aparência, não altera o texto real do
   elemento (o value="" já vem assim direto no HTML da página). */
html body input[type="radio"][value=""] + label:empty::after,
html body input[type="checkbox"][value=""] + label:empty::after {
  content: "Não";
}

/* Quando NENHUMA opção do Radio Group está marcada (banco veio nulo),
   mostra a primeira opção ("Não") como selecionada visualmente — com
   uma bolinha extra pra deixar claro que é um padrão, não uma escolha
   real do usuário. Importante: isso é só aparência, feito com :has() —
   não marca o input de verdade, não muda o valor do campo, não dispara
   nenhuma Dynamic Action. Só se aplica a grupos de exatamente 2 opções
   (padrão Não/Sim); grupos com mais opções não são afetados. */
html body .apex-item-group--rc.apex-item-radio:not(.nc-checkbox-single):not(:has(input[type="radio"]:checked)) .apex-item-option:first-child label,
html body .apex-item-grid-row:not(:has(input[type="radio"]:checked)) .apex-item-option:first-child label {
  background: var(--nc-primary) !important;
  color: #ffffff !important;
  position: relative !important;
}
html body .apex-item-group--rc.apex-item-radio:not(.nc-checkbox-single):not(:has(input[type="radio"]:checked)) .apex-item-option:first-child label::after,
html body .apex-item-grid-row:not(:has(input[type="radio"]:checked)) .apex-item-option:first-child label::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin-left: 8px;
  vertical-align: middle;
}

/* Erros de item */
html body .apex-page-item-error,
html body .t-Form-error,
html body span.a-Form-error:not(:empty) {
  display: block !important;
  margin-top: -4px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--nc-destructive) !important;
}
html body span.a-Form-error:empty {
  display: none !important;
  margin: 0 !important;
}
html body .apex-page-item-error-wrapper input.apex-item-text,
html body .apex-page-item-error-wrapper select.apex-item-select,
html body .apex-page-item-error-wrapper textarea.apex-item-textarea,
html body input.apex-item-text.apex-page-item-error,
html body .is-error input.apex-item-text {
  border-color: var(--nc-destructive) !important;
  box-shadow: 0 0 0 3px rgba(214, 47, 42, 0.18) !important;
}

/* ---------- Buttons ---------- */
.t-Button {
  border-radius: var(--nc-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.t-Button:active { transform: translateY(1px); }
html body .t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):not(.t-Button--simple),
html body .t-Button.t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):not(.t-Button--simple),
html body button.t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):not(.t-Button--simple) {
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-primary-glow)) !important;
  border-color: var(--nc-primary-deep) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--nc-primary-rgb), 0.28) !important;
}
html body .t-Button--hot:hover:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):not(.t-Button--simple) {
  background: linear-gradient(135deg, var(--nc-primary-deep), var(--nc-primary)) !important;
}
/* Botões com "Remove UI Decoration" + "Hot" ao mesmo tempo (ex.:
   #SSO_MANUAL) — fundo continua branco/nativo (prioridade do
   simple), mas texto e ícone seguem a cor do tema. */
html body .t-Button--simple.t-Button--hot,
html body .t-Button--simple.t-Button--hot .t-Icon,
html body .t-Button--simple.t-Button--hot .t-Button-label {
  color: var(--nc-primary) !important;
}
html body .t-Button--simple.t-Button--hot:hover,
html body .t-Button--simple.t-Button--hot:hover .t-Icon,
html body .t-Button--simple.t-Button--hot:hover .t-Button-label {
  color: var(--nc-primary-deep) !important;
}
html body .t-Button--simple.t-Button--hot,
html body .t-Button--simple.t-Button--hot:hover,
html body .t-Button--simple.t-Button--hot:focus,
html body .t-Button--simple.t-Button--hot:active,
html body .t-Button--simple.t-Button--hot.is-active {
  background-color: #fff !important;
  background-image: none !important;
}
/* Sem isso, esse botão ficava "preso" num fundo escuro depois de
   clicado (estilo nativo de foco do tema, que essa combinação de
   classes não tinha sobrescrito ainda) — garante que o fundo
   continue branco/nativo e o texto legível em qualquer estado. */
html body .t-Button--simple.t-Button--hot:focus,
html body .t-Button--simple.t-Button--hot:active,
html body .t-Button--simple.t-Button--hot.is-active {
  background-color: #fff !important;
  border-color: var(--nc-border) !important;
  color: var(--nc-primary-deep) !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.28) !important;
}
html body .t-Button--simple.t-Button--hot:focus .t-Icon,
html body .t-Button--simple.t-Button--hot:focus .t-Button-label,
html body .t-Button--simple.t-Button--hot:active .t-Icon,
html body .t-Button--simple.t-Button--hot:active .t-Button-label,
html body .t-Button--simple.t-Button--hot.is-active .t-Icon,
html body .t-Button--simple.t-Button--hot.is-active .t-Button-label {
  color: var(--nc-primary-deep) !important;
}
html body .t-Button:not(.t-Button--hot):not(.t-Button--header):not(.t-Button--noUI):not(.t-Button--danger):not(.t-Button--warning):not(.t-Button--success):not(.t-Button--info):not(.t-Button--primary):not(.t-Button--simple):not(.btnIA):not(.floatChamadoInterno):not(.floatNati) {
  background-color: #fff !important;
  border: 1px solid var(--nc-border) !important;
  color: var(--nc-primary-deep) !important;
}
html body .t-Button:not(.t-Button--hot):not(.t-Button--header):not(.t-Button--noUI):not(.t-Button--danger):not(.t-Button--warning):not(.t-Button--success):not(.t-Button--info):not(.t-Button--primary):not(.t-Button--simple):not(.btnIA):not(.floatChamadoInterno):not(.floatNati):hover {
  background-color: var(--nc-primary-soft) !important;
  border-color: var(--nc-primary-border) !important;
}
/* Sem essa regra, o botão ficava "preso" numa cor escura depois de
   clicado (usando algum estilo nativo de foco/ativo do tema) — volta
   sempre pro visual normal (fundo branco, texto roxo). */
html body .t-Button:not(.t-Button--hot):not(.t-Button--header):not(.t-Button--noUI):not(.t-Button--danger):not(.t-Button--warning):not(.t-Button--success):not(.t-Button--info):not(.t-Button--primary):not(.t-Button--simple):not(.btnIA):not(.floatChamadoInterno):not(.floatNati):focus,
html body .t-Button:not(.t-Button--hot):not(.t-Button--header):not(.t-Button--noUI):not(.t-Button--danger):not(.t-Button--warning):not(.t-Button--success):not(.t-Button--info):not(.t-Button--primary):not(.t-Button--simple):not(.btnIA):not(.floatChamadoInterno):not(.floatNati):active,
html body .t-Button:not(.t-Button--hot):not(.t-Button--header):not(.t-Button--noUI):not(.t-Button--danger):not(.t-Button--warning):not(.t-Button--success):not(.t-Button--info):not(.t-Button--primary):not(.t-Button--simple):not(.btnIA):not(.floatChamadoInterno):not(.floatNati).is-active {
  background-color: #fff !important;
  border-color: var(--nc-border) !important;
  color: var(--nc-primary-deep) !important;
  box-shadow: 0 0 0 3px rgba(var(--nc-primary-glow-rgb), 0.28) !important;
}
/* "Remove UI Decoration" sempre prioriza esse visual (fundo branco,
   texto roxo, sem borda), mesmo que o botão também tenha "Hot"
   marcado — declarada por último, com a MESMA especificidade da
   variante de duas classes do Hot (.t-Button.t-Button--hot), pra
   vencer o empate de vez (foi exatamente isso que faltou da última
   vez que tentamos isso). */
html body .t-Button--noUI,
html body .t-Button.t-Button--noUI,
html body button.t-Button--noUI,
html body .t-Button--hot.t-Button--noUI,
html body .t-Button--hot.t-Button--noUI:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):not(.t-Button--simple) {
  background: #fff !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--nc-primary-deep) !important;
  box-shadow: none !important;
}
html body .t-Button--noUI:hover,
html body .t-Button.t-Button--noUI:hover,
html body button.t-Button--noUI:hover,
html body .t-Button--hot.t-Button--noUI:hover,
html body .t-Button--hot.t-Button--noUI:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):not(.t-Button--simple):hover {
  background: var(--nc-primary-soft) !important;
  border: 0 !important;
}

/* Botões flutuantes (position:fixed) não ocupam espaço na página, mas
   a região/container/row/col que os envolve continua existindo
   normalmente — sobrando como uma caixinha vazia perto de onde o
   botão foi colocado no código (geralmente perto do rodapé). Esconde
   essa "casca" vazia quando ela só contém um desses botões. */
html body .t-Region-body:has(> .container > .row > .col > .floatNati),
html body .t-Region-body:has(> .container > .row > .col > .floatChamadoInterno),
html body .t-Region-body:has(> .container > .row > .col > .btnIA),
html body .t-Region-body:has(> script:only-child) {
  display: none !important;
}
/* A regra acima esconde só o CONTEÚDO interno (.t-Region-body) —
   mas a "casca" da região (a moldura .t-Region em volta, com borda,
   padding, etc.) continuava aparecendo, ocupando espaço mesmo vazia.
   Esconde a região inteira nesses mesmos casos. */
html body .t-Region:has(> .t-Region-body > .container > .row > .col > .floatNati),
html body .t-Region:has(> .t-Region-body > .container > .row > .col > .floatChamadoInterno),
html body .t-Region:has(> .t-Region-body > .container > .row > .col > .btnIA),
html body .t-Region:has(> .t-Region-body > script:only-child),
html body .t-Region:has(> .t-Region-body > .container > .row > .col > script:only-child) {
  display: none !important;
}

/* ---------- Tabs Container ---------- */
/* Mira a classe base .a-Tabs (presente nos dois tipos de aba do APEX:
   Tabs Container nativo e Region Display Selector), com seletores por
   descendência (não só filho direto) pra funcionar em qualquer
   variante de estilo (--simple, --large, etc.) sem exceção. */
html body ul.a-Tabs {
  display: flex !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  justify-content: flex-start !important;
  border-bottom: 1.5px solid var(--nc-primary-border) !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Reforço pra variantes de estilo nativo (Fill Labels, Pill, etc.) que
   podem ter regras próprias de espaçamento com força maior — zera
   tudo de novo, especificamente nessas classes. */
html body ul.a-Tabs.t-Tabs--fillLabels,
html body ul.a-Tabs.t-Tabs--pill,
html body ul.a-Tabs.t-Tabs--simple,
html body ul.a-Tabs.t-Tabs--large {
  gap: 0 !important;
}
html body ul.a-Tabs.t-Tabs--fillLabels li,
html body ul.a-Tabs.t-Tabs--pill li,
html body ul.a-Tabs.t-Tabs--simple li,
html body ul.a-Tabs.t-Tabs--large li {
  margin: 0 !important;
  padding: 0 !important;
}
html body ul.a-Tabs li,
html body ul.a-Tabs > li,
html body ul.a-Tabs .a-Tabs-item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body ul.a-Tabs > li + li,
html body ul.a-Tabs .a-Tabs-item + .a-Tabs-item {
  margin-left: 0 !important;
}
html body ul.a-Tabs li > a,
html body ul.a-Tabs .a-Tabs-link {
  margin-left: 0 !important;
}
/* Esconde o asterisco vermelho que o APEX injeta automaticamente na
   aba quando ela tem um campo obrigatório vazio (vem com
   style="color:red" direto no HTML). Optamos por esconder em vez de
   reposicionar, já que o reposicionamento não estava sendo aplicado
   de forma confiável nessa aplicação específica. */
html body ul.a-Tabs a span[style*="color:red"],
html body ul.a-Tabs a span[style*="color: red"] {
  display: none !important;
}
html body ul.a-Tabs a,
html body ul.a-Tabs a:hover,
html body ul.a-Tabs a:focus,
html body ul.a-Tabs a:visited,
html body ul.a-Tabs a:active,
html body ul.a-Tabs a span {
  text-decoration: none !important;
}
html body ul.a-Tabs a {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  border: 1.5px solid var(--nc-primary-border) !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  margin-right: -1.5px !important;
  background: var(--nc-card) !important;
  color: var(--nc-primary) !important;
  font-family: var(--nc-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: normal !important;
  padding: 0 18px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
}
html body ul.a-Tabs a,
html body ul.a-Tabs a *,
html body ul.a-Tabs a span,
html body ul.a-Tabs a span[style] {
  white-space: nowrap !important;
}
html body ul.a-Tabs li {
  flex-shrink: 0 !important;
}
html body ul.a-Tabs a:hover {
  background: var(--nc-primary-soft) !important;
  border-color: var(--nc-primary-glow) !important;
}
html body ul.a-Tabs li.is-active a,
html body ul.a-Tabs li.a-Tabs-selected a,
html body ul.a-Tabs li.apex-rds-selected a {
  background: var(--nc-primary) !important;
  border-color: var(--nc-primary) !important;
  color: #fff !important;
  box-shadow: 0 -2px 8px rgba(var(--nc-primary-rgb), 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ---------- Reforço Tabs Container nativo (.t-Tabs) ---------- */
/* O Tabs Container nativo do APEX usa .t-Tabs/.t-Tabs-item/.t-Tabs-link.
   Algumas variantes (principalmente Fill Labels/Pill) aplicam regras próprias
   de distribuição e espaçamento. Este bloco força o mesmo padrão visual
   já aplicado ao .a-Tabs: abas agrupadas, sem espaços entre elas. */
html body ul.t-Tabs {
  display: flex !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}
html body ul.t-Tabs .t-Tabs-item,
html body ul.t-Tabs li {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
html body ul.t-Tabs .t-Tabs-item + .t-Tabs-item,
html body ul.t-Tabs li + li {
  margin-left: 0 !important;
}
html body ul.t-Tabs .t-Tabs-link,
html body ul.t-Tabs li > a {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  border: 1.5px solid var(--nc-primary-border) !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 -1.5px 0 0 !important;
  background: var(--nc-card) !important;
  color: var(--nc-primary) !important;
  font-family: var(--nc-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: normal !important;
  padding: 0 18px !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
}
html body ul.t-Tabs .t-Tabs-link:hover,
html body ul.t-Tabs li > a:hover {
  background: var(--nc-primary-soft) !important;
  border-color: var(--nc-primary-glow) !important;
}
html body ul.t-Tabs .t-Tabs-item.is-active .t-Tabs-link,
html body ul.t-Tabs .t-Tabs-item.a-Tabs-selected .t-Tabs-link {
  background: var(--nc-primary) !important;
  border-color: var(--nc-primary) !important;
  color: #fff !important;
  box-shadow: 0 -2px 8px rgba(var(--nc-primary-rgb), 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ---------- Interactive Report / Grid ---------- */
.a-IRR-header,
.a-IRR-table thead th {
  background: var(--nc-primary-border) !important;
  color: var(--nc-primary-deep) !important;
  font-family: var(--nc-font) !important;
  font-size: 1.8rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem !important;
  border-bottom: 1px solid var(--nc-primary-border);
}
/* Interactive Grid — fonte igual ao Classic Report, menor que a IR. */
/* [TESTE: desabilitado temporariamente pra diagnóstico]
.a-GV-header {
  background: var(--nc-primary-border) !important;
  color: var(--nc-primary-deep) !important;
  font-family: var(--nc-font) !important;
  font-size: 1.1rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem !important;
  border-bottom: 1px solid var(--nc-primary-border);
}
*/
/* Classic Report — fonte separada da IR, menor pra não cortar o
   texto do cabeçalho das colunas. */
table.t-Report-report thead th {
  background: var(--nc-primary-border) !important;
  color: var(--nc-primary-deep) !important;
  font-family: var(--nc-font) !important;
  font-size: 1.1rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--nc-primary-border);
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}
.a-IRR-header .a-IRR-headerLink {
  background: transparent !important;
  color: var(--nc-primary-deep) !important;
  font-family: var(--nc-font) !important;
  font-size: 1rem !important;
}
.a-IRR-table td,
table.t-Report-report td {
  padding: 0.4rem 0.75rem !important;
  font-family: var(--nc-font) !important;
  font-size: 1.15rem !important;
}
.a-IRR-table td {
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
table.t-Report-report td {
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--nc-fg) !important;
}
/* Classic Report — altura fixa de linha e listras alternadas (zebra)
   pra facilitar a leitura de linha em linha. */
table.t-Report-report tbody tr {
  min-height: 44px !important;
}
table.t-Report-report tbody tr:nth-child(odd) td {
  background: #ffffff !important;
}
table.t-Report-report tbody tr:nth-child(even) td {
  background: #f2f0f5 !important;
}
/* Aplica a fonte em todo o relatório (corpo, toolbar, paginação, etc.),
   exceto nos ícones — que dependem da própria fonte de ícones pra
   desenhar os glifos (senão viram caixinhas/texto sem sentido).
   [TESTE: .a-GV-region removido daqui pra diagnóstico do Interactive
   Grid — nossa fonte customizada pode ter métricas (altura de linha)
   um pouco diferentes da nativa, e isso podia estar confundindo o
   cálculo interno de altura das linhas.] */
.a-IRR-region *:not(.a-Icon):not(.t-Icon):not([class*="fa-"]),
.t-Report-report *:not(.a-Icon):not(.t-Icon):not([class*="fa-"]) {
  font-family: var(--nc-font) !important;
}
.a-IRR-table tbody tr:hover td,
table.t-Report-report tbody tr:hover td {
  background: var(--nc-primary-soft) !important;
}
/* Ícones de ação de linha do Interactive Report (imagens antigas do
   APEX, tipo gif) — escondemos a imagem original e desenhamos um
   ícone roxo no lugar, escolhido pelo nome do arquivo (src). Extensível:
   pra adicionar um novo ícone, é só criar um bloco igual a esses dois,
   trocando o "img[src*=...]" e o desenho do SVG. */
html body td a img[src*="e2.gif"],
html body td a img[src*="apex-edit-pencil.png"],
html body td a img[src*="zoomin.gif"] {
  display: none !important;
}
/* Lápis (editar) — e2.gif e apex-edit-pencil.png (dois nomes nativos
   diferentes usados pelo APEX pra mesma ação de editar) */
html body td a:has(img[src*="e2.gif"]),
html body td a:has(img[src*="apex-edit-pencil.png"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px;
  height: 20px;
}
html body td a:has(img[src*="e2.gif"])::before,
html body td a:has(img[src*="apex-edit-pencil.png"])::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background-color: var(--nc-primary) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
}
/* Lupa (visualizar) — zoomin.gif (nome provável; me avise se for outro) */
html body td a:has(img[src*="zoomin.gif"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px;
  height: 20px;
}
html body td a:has(img[src*="zoomin.gif"])::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background-color: var(--nc-primary) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
}

.a-IRR-toolbar,
.a-IRR-searchBar { background: transparent; border-bottom: 1px solid var(--nc-border); }

/* ---------- Alerts / notifications ---------- */
.t-Alert--success .t-Alert-icon { background: var(--nc-success); }
.t-Alert--warning .t-Alert-icon { background: var(--nc-warning); }
.t-Alert--danger .t-Alert-icon { background: var(--nc-danger); }
.t-Alert--defaultIcons.t-Alert--info .t-Alert-icon { background: var(--nc-primary); }
#t_Alert_Success,
.t-Alert--horizontal.t-Alert--success { border-left: 4px solid var(--nc-success); }

/* A pedido: só na TELA DE LOGIN, o alerta "warning" (aviso de
   usuário/senha incorretos, com a contagem do throttle) usa um
   amarelo mais suave em vez do amarelo forte nativo do APEX. Fora do
   login, o warning continua com a cor nativa (sem esta regra). */
body.t-PageBody--login .t-Alert--colorBG.t-Alert--warning,
body.t-PageBody--login .t-Alert--warning.t-Alert--colorBG,
body.t-PageBody--login .t-Alert--warning {
  background-color: var(--nc-warning-soft) !important;
  border-color: var(--nc-warning-soft) !important;
}
body.t-PageBody--login .t-Alert--defaultIcons.t-Alert--warning .t-Alert-icon {
  background: var(--nc-warning-soft) !important;
}

/* Ícone do alerta "warning": mesmo problema do "info" (ver bloco lá em
   cima) — o ícone nativo do APEX (fonte de ícones) não estava
   renderizando e aparecia como um quadradinho vazio/bugado. Mesma
   solução: bolinha colorida sólida com o "!" desenhado via ::before,
   sem depender de nenhuma fonte de ícone. */
.t-Alert--warning .t-Alert-icon .t-Icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background-color: var(--nc-warning) !important;
  background-image: none !important;
  position: relative !important;
}
.t-Alert--warning .t-Alert-icon .t-Icon::before {
  content: "!" !important;
  display: block !important;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ---------- Badges / status ---------- */
.t-Badge,
.nc-badge {
  background: var(--nc-primary-soft);
  color: var(--nc-primary-deep);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
}

/* ---------- Wizard nativo do UT (t-WizardSteps) ---------- */
.t-WizardSteps {
  background: #fff;
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  padding: 0.5rem;
}
.t-WizardSteps-wrap { border: 0; }
.t-WizardSteps-item.is-active .t-WizardSteps-label { color: var(--nc-primary-deep); font-weight: 700; }
.t-WizardSteps-item.is-active .t-WizardSteps-marker {
  background: var(--nc-primary);
  border-color: var(--nc-primary);
  color: #fff;
}
.t-WizardSteps-item.is-complete .t-WizardSteps-marker {
  background: var(--nc-success);
  border-color: var(--nc-success);
  color: #fff;
}

/* ---------- Stepper injetado pelo natcorp.js ---------- */
.nc-stepper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  list-style: none;
}
.nc-stepper__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--nc-radius);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  font: inherit;
}
.nc-stepper__item:hover:not(.is-active) { background: var(--nc-primary-soft); }
.nc-stepper__item.is-active {
  background: var(--nc-primary);
}
.nc-stepper__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--nc-border);
  color: var(--nc-ink);
  font-size: 12px !important;
  font-weight: 800;
  flex: 0 0 auto;
}
.nc-stepper__item.is-pending:not(.is-active) .nc-stepper__num {
  background: var(--nc-danger);
  color: #fff;
}
.nc-stepper__item.is-error:not(.is-active) .nc-stepper__num {
  background: var(--nc-primary);
  color: #fff;
}
.nc-stepper__item.is-ok:not(.is-active) .nc-stepper__num {
  background: var(--nc-success);
  color: #fff;
}
.nc-stepper__item.is-active .nc-stepper__num {
  background: #fff;
  color: var(--nc-primary);
}
.nc-stepper__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}
.nc-stepper__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--nc-ink);
}
.nc-stepper__item.is-active .nc-stepper__label {
  color: #fff;
}
.nc-stepper__status {
  font-size: 10.88px !important;
  font-weight: 600;
  color: var(--nc-muted);
}
.nc-stepper__item.is-pending .nc-stepper__status { color: var(--nc-danger); }
.nc-stepper__item.is-error .nc-stepper__status { color: var(--nc-danger); }
.nc-stepper__item.is-ok .nc-stepper__status { color: var(--nc-success); }
.nc-stepper__item.is-active .nc-stepper__status {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Cabeçalho destacado de seção no modo página única */
/* Cartão de destaque (bolinha + título + subtítulo) no topo de cada
   etapa — só aparece no modo "Página única", pra identificar de qual
   etapa é cada bloco quando todas ficam visíveis empilhadas. No modo
   "Etapas" fica escondido, já que a aba ativa já mostra essa info.
   Réplica exata do elemento de referência do protótipo. */
.nc-section-heading {
  display: none;
}
.nc-stepper-host.nc-mode-unica .nc-section-heading {
  display: flex !important;
  min-width: 0;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--nc-primary-border);
  border-radius: 12px;
  background: linear-gradient(
    to right,
    rgba(var(--nc-primary-rgb), 0.1),
    rgba(var(--nc-primary-rgb), 0.06),
    transparent
  );
}
/* Etapa sem conteúdo (marcada via JS com nc-section-empty) — esconde o
   cartão de destaque também, não só o botão do stepper. Especificidade
   mais alta que a regra de "mostrar" acima, pra vencer o !important. */
.nc-stepper-host.nc-mode-unica .nc-section.nc-section-empty .nc-section-heading {
  display: none !important;
}
.nc-section-heading__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--nc-primary);
  color: #fff;
  font-family: var(--nc-font);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--nc-shadow-xs);
}
.nc-section-heading__text {
  min-width: 0;
}
.nc-section-heading__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--nc-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--nc-ink);
}
.nc-section-heading__subtitle {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--nc-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--nc-muted);
}

/* Alternador Etapas / Página única */
.nc-viewtoggle {
  display: inline-flex;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.nc-viewtoggle button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--nc-input);
  background: var(--nc-card);
  border-radius: var(--nc-radius-md);
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--nc-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nc-viewtoggle button svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}
.nc-viewtoggle button:hover:not(.is-active) {
  background: var(--nc-primary-soft);
}
.nc-viewtoggle button.is-active {
  background: var(--nc-primary);
  border-color: var(--nc-primary);
  color: #fff;
}

/* ---------- Responsividade ---------- */
@media (min-width: 640px) {
  .nc-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .nc-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .nc-stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .t-Region-body { padding: 0.75rem; }
  .t-Form-fieldContainer { margin-bottom: 0.7rem; }
  .t-ButtonRegion .t-Button { width: 100%; margin-bottom: 0.4rem; }
  .a-IRR-toolbar { flex-wrap: wrap; }
}

/* Evita o "estouro" horizontal comum em formulários APEX densos */
.t-Body-contentInner,
.t-Region-body,
.t-Form-fieldContainer,
.t-Form-inputContainer { min-width: 0; }
.apex-item-text,
.apex-item-select,
.apex-item-textarea { max-width: 100%; }

/* Faixa de botões de região (topo/rodapé) — o tema nativo mostra essa
   área com borda mesmo sem nenhum botão configurado, deixando uma
   caixa vazia visível. Escondemos sempre que estiver genuinamente
   vazia (os dois lados sem nada dentro). */
html body .t-Region-buttons--top:has(.t-Region-buttons-left:empty):has(.t-Region-buttons-right:empty),
html body .t-Region-buttons--bottom:has(.t-Region-buttons-left:empty):has(.t-Region-buttons-right:empty) {
  display: none !important;
}

/* Left Side Column — garante que nenhum item "estoure" a largura
   estreita da coluna lateral (campos, botões, selects, etc.). Cobre os
   nomes de classe mais prováveis pra essa região no Universal Theme. */
html body .t-Body-side,
html body .t-Body-side *:not(button):not(.a-Button),
html body .apex-side-nav .t-Region,
html body .apex-side-nav .t-Region *:not(button):not(.a-Button) {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html body .t-Body-side .t-Region-body,
html body .apex-side-nav .t-Region-body {
  overflow-x: hidden !important;
}

/* ---------- Impressão ---------- */
@media print {
  .t-Header, .t-Body-nav, .nc-stepper, .nc-viewtoggle, .t-ButtonRegion { display: none !important; }
  .t-Region { box-shadow: none; border-color: #ccc; }
}

/* ---------- Campo de busca do menu superior (#P9999_SEARCH) ---------- */
/* Esse campo é especial: fica escondido/recolhido por padrão e só
   expande (com animação via JS nativo) quando clicado na lupa,
   trocando a cor de fundo entre branco e transparente. Excluímos ele
   da nossa regra genérica de campo de texto (lá em cima, com
   :not(#P9999_SEARCH)) E reforçamos aqui com um valor explícito, já
   que só a exclusão não bastou pra garantir o tamanho compacto. */
html body input#P9999_SEARCH,
html body input#P9999_SEARCH#P9999_SEARCH {
  height: 20px !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  font-size: 12px !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: content-box !important;
}

/* ---------- Tema Standard Natcorp: cabeçalho sem degradê ---------- */
/* Os outros temas usam um degradê (escuro -> claro) no cabeçalho. No
   tema Standard, a pedido, isso vira uma cor sólida única, sem efeito
   de gradiente. (A parte de cor dos botões foi removida — estava
   conflitando com a prioridade do "Remove UI Decoration".) */
html.nc-theme-standard .t-Header,
html.nc-theme-standard .t-Header-branding {
  background: var(--nc-primary) !important;
}

/* ---------- Campo dentro do Popup LOV de múltiplos valores —
   reforço final ---------- */
/* Esse <input readonly> (dentro de <li class="apex-item-multi-item">)
   tem as mesmas classes do popup LOV comum (apex-item-text,
   apex-item-popup-lov), então pega sem querer o visual de "caixa
   cheia" (borda + fundo) da regra base de normalização de campo —
   que usa o truque :not(#P9999_SEARCH) e por isso carrega
   especificidade de ID, vencendo até regras declaradas depois no
   arquivo. Reforçado aqui com o mesmo truque (:not(#nc-fake-id) +
   :not(.a-GV *) etc., igual usado em outros pontos do arquivo) pra
   empatar/vencer essa especificidade e realmente ficar "sem caixa",
   já que o campo visual de verdade é o <ul class="apex-item-multi">
   em volta (que já tem a borda/fundo dele). */
html body ul.apex-item-multi input.apex-item-text:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *) {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* REVERTIDO (a pedido) — esse campo estava com display:none,
   escondendo ele por completo (e junto o placeholder). Voltou a
   aparecer normalmente; a regra logo acima já deixa ele "sem caixa"
   (borda/fundo transparente, sem padding), então não deve repetir o
   visual de "quadrado" que motivou esconder no passado. Se aparecer
   algo estranho, ajustar aqui pontualmente. */
/* ==========================================================================
   MELHORIAS: INTERACTIVE REPORT, INTERACTIVE GRID, CLASSIC REPORT
   (variáveis --nat-* mapeadas para as variáveis --nc-* do sistema)
   ========================================================================== */

/* ---------- INTERACTIVE REPORT ---------- */
html body .a-IRR {
  overflow: hidden;
  border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius) !important;
  background: var(--nc-card) !important;
  box-shadow: var(--nc-shadow) !important;
  font-size: 13px !important;
}
html body .a-IRR-toolbar {
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nc-border) !important;
  background: var(--nc-card) !important;
}
html body .a-IRR-search-field {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background: var(--nc-muted-bg) !important;
}
html body .a-IRR-button {
  min-height: 36px !important;
  border: 1px solid var(--nc-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--nc-graphite) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html body .a-IRR-button:hover,
html body .a-IRR-button:focus {
  background: var(--nc-muted-bg) !important;
  border-color: var(--nc-primary-glow) !important;
  color: var(--nc-primary) !important;
}
/* Interactive Grid — mesmo estilo de pílula arredondada da barra de
   ferramentas (busca, Editar, Salvar, Ações, Adicionar Linha,
   Redefinir), sem tocar em nada da tabela em si (fonte/altura/
   padding da grid continuam 100% nativos, de propósito). */
html body .a-Toolbar-inputText {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background: var(--nc-muted-bg) !important;
  border: 0 !important;
}
html body .a-IG-header .a-Toolbar-item.a-Button,
html body .a-IG-header label.a-Button {
  min-height: 36px !important;
  border: 1px solid var(--nc-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--nc-graphite) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html body .a-IG-header .a-Toolbar-item.a-Button:hover,
html body .a-IG-header label.a-Button:hover {
  background: var(--nc-muted-bg) !important;
  border-color: var(--nc-primary-glow) !important;
  color: var(--nc-primary) !important;
}
html body .a-IG-header .a-Toolbar-item.a-Button.a-Button--hot {
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-primary-glow)) !important;
  border-color: var(--nc-primary-deep) !important;
  color: #fff !important;
}
/* "1. Relatório Primário" e "Linhas" (selects nativos do toolbar) —
   mesma borda arredondada em pílula que já usamos no campo de busca
   e no botão "Ações", pra ficar tudo visualmente igual. */
html body .a-IRR-selectList {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--nc-border) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  color: var(--nc-graphite) !important;
  font-weight: 700 !important;
  padding: 0 32px 0 14px !important;
}
html body .a-IRR-selectList:hover,
html body .a-IRR-selectList:focus {
  border-color: var(--nc-primary-glow) !important;
  outline: none !important;
}
html body .a-IRR-rowSelector label {
  font-weight: 600 !important;
  color: var(--nc-muted) !important;
}
html body .a-IRR-header.a-IRR-header {
  padding: 8px 12px !important;
  border-color: var(--nc-border) !important;
  background: var(--nc-primary-soft) !important;
  color: var(--nc-primary-deep) !important;
  box-shadow: none !important;
}
/* Cabeçalho de grupo (Group By / quebra de controle) — texto solto
   direto na célula, sem span/link — reduz o tamanho da fonte. */
html body .a-IRR-header.a-IRR-header--group {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
html body .a-IRR-headerLink {
  color: var(--nc-primary-deep) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Modo de quebra de controle (Control Break) usa um <span> simples
   em vez do link de ordenação — mesmo padrão visual do cabeçalho
   normal do Interactive Report. */
html body .a-IRR-headerLabel {
  color: var(--nc-primary-deep) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body .a-IRR-header:hover {
  background: var(--nc-muted-bg) !important;
}
html body .a-IRR-header.is-active {
  background: var(--nc-primary) !important;
  color: #fff !important;
}
html body .a-IRR-header.is-active .a-IRR-headerLink {
  color: #fff !important;
}
html body .a-IRR-table td {
  padding: 10px 12px !important;
  border-color: var(--nc-border) !important;
  background: #fff;
  color: var(--nc-ink) !important;
  font-size: 13px !important;
}
html body .a-IRR-table tr:hover td {
  background: var(--nc-muted-bg) !important;
}
html body .a-IRR-pagination-label,
html body .a-IRR-reportSummary-value {
  color: var(--nc-muted) !important;
  font-size: 12px !important;
}
html body .a-IRR-pagination-item a,
html body .a-IRR-pagination-item button {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--nc-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--nc-graphite) !important;
}

/* ---------- INTERACTIVE GRID ---------- */
html body .a-IG {
  overflow: hidden;
  border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-radius) !important;
  background: var(--nc-card) !important;
  box-shadow: var(--nc-shadow) !important;
}
html body .a-IG-header,
html body .a-IG .a-Toolbar {
  border: 0 !important;
  border-bottom: 1px solid var(--nc-border) !important;
  background: var(--nc-card) !important;
}
html body .a-IG-header .a-Toolbar-button {
  border: 1px solid var(--nc-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--nc-graphite) !important;
  box-shadow: none !important;
}
html body .a-IG-header .a-Toolbar-button:hover {
  background: var(--nc-muted-bg) !important;
  color: var(--nc-primary) !important;
}
html body .a-GV-header.a-GV-header,
html body .a-GV-headerGroup.a-GV-headerGroup {
  border-color: var(--nc-border) !important;
  background: var(--nc-card) !important;
  color: var(--nc-muted) !important;
  box-shadow: none !important;
}
html body .a-GV-headerLabel {
  color: var(--nc-muted) !important;
  font-family: var(--nc-font) !important;
}
html body .a-GV-header.is-active,
html body .a-GV-header.is-focused {
  background: var(--nc-primary) !important;
  color: #fff !important;
}
html body .a-GV-header.is-active .a-GV-headerLabel,
html body .a-GV-header.is-focused .a-GV-headerLabel {
  color: #fff !important;
}
html body .a-GV-cell {
  border-color: var(--nc-border) !important;
  background: #fff;
  color: var(--nc-ink) !important;
  font-family: var(--nc-font) !important;
}
/* Área abaixo das linhas de dados (espaço reservado pra clicar e
   adicionar um novo registro) — garante fundo igual tanto na parte
   fixa (checkbox) quanto na parte rolável (dados), pra não parecer
   um vão desencontrado entre as duas metades da grid. */
html body .a-GV-bdy,
html body .a-GV-w-frozen,
html body .a-GV-w-scroll,
html body .a-GV-table {
  background: #fff !important;
}
html body .a-GV-row:hover .a-GV-cell {
  background: var(--nc-muted-bg) !important;
}
html body .a-GV-row.is-selected .a-GV-cell,
html body .a-GV-table tr.is-selected .a-GV-cell {
  background: var(--nc-primary-soft) !important;
}
html body .a-GV-table .a-GV-cell.is-focused,
html body .a-GV-table .a-GV-header.is-focused,
html body .a-GV-table .a-GV-headerGroup.is-focused {
  box-shadow: inset 0 0 0 1px var(--nc-primary) !important;
}
html body .a-GV-footer {
  border-color: var(--nc-border) !important;
  background: #fff !important;
  color: var(--nc-muted) !important;
}

/* ---------- CLASSIC REPORT / TABLES ---------- */
html body .t-Report-report {
  border-collapse: collapse;
  background: #fff !important;
  color: var(--nc-ink) !important;
  font-size: 13px !important;
}
html body .t-Report-colHead.t-Report-colHead {
  padding: 8px 12px !important;
  border-color: var(--nc-border) !important;
  background: var(--nc-primary-soft) !important;
  color: var(--nc-primary-deep) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body .t-Report-cell {
  padding: 10px 12px !important;
  border-color: var(--nc-border) !important;
  color: var(--nc-ink) !important;
}
html body .t-Report-report tr:hover .t-Report-cell,
html body .t-Report--rowHighlight .t-Report-report tr:hover .t-Report-cell {
  background: var(--nc-muted-bg) !important;
}
html body .t-Report-paginationText {
  color: var(--nc-muted) !important;
  font-size: 12px !important;
}
html body .t-Report-paginationText a {
  color: var(--nc-primary) !important;
  font-weight: 700;
}

/* Bar chart nativo do APEX. */
html body .a-BarChart .a-BarChart-bar {
  background: var(--nc-border) !important;
}
html body .a-BarChart-filled {
  background: var(--nc-primary) !important;
}
html body .a-BarChart .a-BarChart-item:hover {
  background: var(--nc-muted-bg) !important;
}

/* ---------- Preview de dispositivo ---------- */
/* Encolhe e centraliza a página inteira numa "moldura", simulando a
   largura de um celular ou tablet, direto na própria página (sem
   abrir nada por cima) — igual o comportamento do protótipo.
   Atenção: é uma aproximação visual; como o navegador continua
   "vendo" a largura real da tela, media queries nativas não
   disparam de verdade (diferente do modo dispositivo do F12). */
html.nc-preview-mobile,
html.nc-preview-tablet {
  background: #d9d9d9 !important;
}
/* Modal Dialog (jQuery UI) — por padrão, o JS dele centraliza na
   TELA TODA (position:fixed com left/top calculados via inline
   style), estourando pra fora da nossa moldura. Trava a largura
   máxima e recalcula a posição horizontal pra ficar centralizado
   DENTRO da moldura, não da tela inteira. */
html.nc-preview-mobile .ui-dialog {
  max-width: 370px !important;
  left: calc(50% - 185px) !important;
}
html.nc-preview-tablet .ui-dialog {
  max-width: 740px !important;
  left: calc(50% - 370px) !important;
}
html.nc-preview-mobile body,
html.nc-preview-tablet body {
  position: relative !important;
  margin: 20px auto !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  border-radius: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: calc(100vh - 40px) !important;
  max-height: calc(100vh - 40px) !important;
}
html.nc-preview-mobile body {
  max-width: 390px !important;
}
html.nc-preview-tablet body {
  max-width: 768px !important;
}
html.nc-preview-mobile .t-Header,
html.nc-preview-tablet .t-Header {
  position: absolute !important;
  width: 100% !important;
  max-width: inherit !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
}
html.nc-preview-mobile .t-Body-nav,
html.nc-preview-tablet .t-Body-nav {
  position: absolute !important;
}
/* A pedido: quando o menu está RECOLHIDO (só ícones) no modo
   Celular/Tablet, esconde ele por completo em vez de deixar
   "flutuando" por cima do conteúdo — a faixa estreita de ícones
   sobrepondo o texto ficava feio/confuso, especialmente em telas com
   bastante filtro. Isso também é mais parecido com um app mobile de
   verdade: o menu fica escondido até o usuário tocar no hambúrguer
   pra expandir (aí sim ele aparece, ocupando o espaço reservado). */
html.nc-preview-mobile body.js-navCollapsed .t-Body-nav,
html.nc-preview-tablet body.js-navCollapsed .t-Body-nav {
  display: none !important;
}
/* Como o menu agora fica TOTALMENTE escondido quando recolhido (ver
   regra acima), não tem mais risco de sobreposição — zera de vez essa
   margem nativa (240/288px, o valor varia por aplicação) que reserva
   espaço pro menu, já que ele nem está mais visível pra precisar
   desse espaço. */
html.nc-preview-mobile body.js-navCollapsed .t-Body-content,
html.nc-preview-tablet body.js-navCollapsed .t-Body-content {
  margin-left: 0 !important;
}
/* Quando o menu lateral está RECOLHIDO (só ícones), ele continua
   "flutuando" por cima do conteúdo (position:absolute) — dá um
   respiro à esquerda pro conteúdo não ficar embaixo dele. O valor
   exato é medido e aplicado via JavaScript (largura real do menu),
   não um número fixo chutado. */
html.nc-preview-mobile body.js-navCollapsed .t-Body-main,
html.nc-preview-tablet body.js-navCollapsed .t-Body-main {
  box-sizing: border-box !important;
}
/* Regra NATIVA do tema Oracle (não nossa) força margin-left:240px em
   .t-Body-content a partir de 641px de largura de tela — só ativa no
   modo Tablet (768px), nunca no Celular (390px, abaixo do
   breakpoint). O controle de quando zerar (só quando recolhido) é
   feito via JavaScript agora, não mais só por CSS — a combinação de
   classes não estava reagindo de forma confiável nesse cenário de
   iframe aninhado. */
/* Espaçador invisível que reservava altura pro cabeçalho — zera pra
   não deixar esse vão vazio em cima do relatório. */
html.nc-preview-mobile #t_Body_content_offset,
html.nc-preview-tablet #t_Body_content_offset {
  height: 0 !important;
}
/* A margem do .t-Body-content é controlada via JavaScript agora
   (mede a largura real do menu, em vez de adivinhar por nome de
   classe) — ver ncAdjustNativeSidebarMargin no arquivo JS. */
/* O container do relatório tem padding lateral próprio (deixa um
   vão à esquerda) que o Filtro não tem, já que fica em outro lugar
   da estrutura — zera pra alinhar os dois igual. */
html.nc-preview-mobile .t-Body-content .container,
html.nc-preview-tablet .t-Body-content .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}
html.nc-preview-mobile .t-Body-content .row,
html.nc-preview-tablet .t-Body-content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.nc-preview-mobile .t-Body-content [class*="col-"],
html.nc-preview-tablet .t-Body-content [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* A pedido: qualquer coluna lado a lado (regiões OU itens de
   formulário) empilha verticalmente no modo Celular/Tablet — em
   QUALQUER lugar da página (não só no conteúdo principal), incluindo
   dentro de Modais. Evita colunas ficarem espremidas/cortadas. */
html.nc-preview-mobile .row > [class*="col-"],
html.nc-preview-tablet .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
html.nc-preview-mobile .t-Form-labelContainer[class*="col-"],
html.nc-preview-tablet .t-Form-labelContainer[class*="col-"],
html.nc-preview-mobile .t-Form-inputContainer[class*="col-"],
html.nc-preview-tablet .t-Form-inputContainer[class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Página com breadcrumb (usa .t-Body-title) também vem posicionada
   de forma flutuante nativamente — empilha normalmente, senão fica
   sobrepondo o Filtro (que já empilhamos acima). Ajuste minimalista,
   só tirando do posicionamento flutuante, sem mexer em mais nada. */
html.nc-preview-mobile .t-Body-title,
html.nc-preview-tablet .t-Body-title {
  position: static !important;
  top: auto !important;
  width: 100% !important;
}
html.nc-preview-mobile .t-Body-side,
html.nc-preview-tablet .t-Body-side {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html.nc-preview-mobile .t-Body-side ~ *,
html.nc-preview-tablet .t-Body-side ~ * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html.nc-preview-mobile .t-Body-content > .container > .row,
html.nc-preview-tablet .t-Body-content > .container > .row {
  margin-top: 0 !important;
}
/* Cabeçalhos "grudentos" (sticky) de relatórios/grids — o widget
   nativo do APEX (Sticky Widget, classe .js-stickyTableHeader)
   calcula uma largura fixa em pixels via JS, baseada na tabela
   real (bem mais larga que a moldura), e por isso vaza pra fora.
   Trava a largura desse cabeçalho pro tamanho do container. */
html.nc-preview-mobile .t-fht-wrapper,
html.nc-preview-tablet .t-fht-wrapper {
  overflow: hidden !important;
  position: relative !important;
}
/* Desistimos de fazer esse cabeçalho "seguir" a rolagem no modo
   Celular/Tablet — depois de várias tentativas, continuava
   quebrando de formas diferentes. Agora ele fica estático (rola
   junto com a tabela normalmente, sem "grudar" no topo), que é o
   comportamento mais simples e confiável. */
html.nc-preview-mobile .js-stickyTableHeader,
html.nc-preview-tablet .js-stickyTableHeader {
  display: none !important;
}
html.nc-preview-mobile .t-fht-tbody,
html.nc-preview-tablet .t-fht-tbody {
  margin-top: 0 !important;
}
html.nc-preview-mobile .t-fht-tbody table,
html.nc-preview-tablet .t-fht-tbody table {
  margin-top: 0 !important;
}
html.nc-preview-mobile .js-stickyWidget-placeholder,
html.nc-preview-tablet .js-stickyWidget-placeholder {
  display: none !important;
}
/* Relatórios (Interactive Report/Grid, Classic Report) mais largos
   que a moldura precisam de rolagem HORIZONTAL própria, já que a
   página toda tem overflow-x:hidden (pra não vazar a moldura). */
html.nc-preview-mobile .a-IRR,
html.nc-preview-tablet .a-IRR,
html.nc-preview-mobile .a-IG,
html.nc-preview-tablet .a-IG,
html.nc-preview-mobile .t-Region-body:has(table.t-Report-report),
html.nc-preview-tablet .t-Region-body:has(table.t-Report-report) {
  overflow-x: auto !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}
html.nc-preview-mobile .t-fht-tbody,
html.nc-preview-tablet .t-fht-tbody {
  overflow-x: visible !important;
}

/* Destaque bem claro de qual opção (Celular/Tablet/Desktop) está
   selecionada no momento — fundo sólido + contorno, pra não deixar
   dúvida nenhuma pro usuário. */
html body .nc-preview-navitem button {
  position: relative !important;
}
html body .nc-preview-navitem button.is-active {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
  border-radius: 6px !important;
}

/* ---------- Ícones dos Cards (pedido do chefe) ---------- */
html body .t-Card-desc.t-Card-desc,
html body .t-Card-info.t-Card-info,
html body .t-Card-subtitle.t-Card-subtitle {
  color: var(--nc-muted) !important;
  font-size: 12px !important;
}
html body .t-Card-icon.t-Card-icon,
html body .t-Card-colorFill.t-Card-colorFill {
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-primary-glow)) !important;
  background-blend-mode: normal !important;
  color: #fff !important;
}
html body .t-Card-icon.t-Card-icon {
  border-radius: 16px !important;
  box-shadow: 0 12px 24px -18px rgba(var(--nc-primary-rgb), .75);
}

/* Região "Filtros" (Left Side Column) — a redução de fonte quando um
   texto específico não cabe é feita via JavaScript agora
   (ncShrinkOverflowingText, no arquivo JS), medindo texto por texto
   — só some COM ISSO se realmente estourar, o resto mantém o
   tamanho padrão normalmente. Classe aplicada dinamicamente: */
html body .t-Body-side .nc-text-shrunk {
  font-size: 90% !important;
}

/* Coluna lateral estreita (Left Side Column): o ícone decorativo de
   44x44 (quadradinho roxo) que a skin adiciona antes de todo título de
   região via ::before não aparece aqui — é só estético, então some
   pra sobrar espaço e o texto do título ficar sempre do lado do botão
   de recolher/expandir, sem cortar. */
html body .t-Body-side .t-Region:not(.nc-section):not(.t-Region--removeHeader):not(.t-Region--noUI) > .t-Region-header .t-Region-headerItems--title::before {
  content: none !important;
  display: none !important;
}

/* Campo de busca do menu de filtro de coluna (Interactive Report/
   Grid) — o nativo do APEX usa texto branco + fundo quase
   transparente (pensado pra ficar em cima de um fundo escuro do
   próprio menu). Se esse fundo escuro não aparecer corretamente por
   qualquer motivo, o campo fica branco sobre branco, ilegível. Por
   segurança, força cores fixas e sempre legíveis aqui, sem depender
   de tema nem do fundo por trás. */
html body .a-IRR-sortWidget-searchField,
html body input.a-IRR-sortWidget-searchField {
  background-color: #ece8f0 !important;
  color: #2b2233 !important;
  caret-color: #2b2233 !important;
}
html body .a-IRR-sortWidget-searchField::placeholder {
  color: #2b2233 !important;
  opacity: 1 !important;
}
/* Ícone da lupinha ao lado do campo "Filtrar..." — vinha branco
   (invisível em cima do fundo claro). O ícone é desenhado pelo
   próprio <label> (via ::before/::after com fonte de ícone). */
html body .a-IRR-sortWidget .a-Icon,
html body .a-IRR-sortWidget [class*="icon-"],
html body .a-IRR-sortWidget-searchLabel,
html body .a-IRR-sortWidget-searchLabel::before,
html body .a-IRR-sortWidget-searchLabel::after {
  color: #2b2233 !important;
}
/* Itens da lista de valores desse mesmo menu (ex.: "Abril",
   "Demonstração") — mesma lógica: força cores fixas e sempre
   legíveis, tanto no estado normal quanto ao passar o mouse (que era
   o caso que ficava ilegível: fundo escuro + texto escuro). */
html body .a-IRR-sortWidget-row {
  background-color: #ffffff !important;
  color: #2b2233 !important;
}
html body .a-IRR-sortWidget-row:hover,
html body .a-IRR-sortWidget-row:focus,
html body .a-IRR-sortWidget-row.is-highlighted {
  background-color: #5b2a86 !important;
  color: #ffffff !important;
}

/* Campo de pesquisa da caixinha de Popup LOV (Pesquisar valores) — a
   lupinha (span.icon-search) fica do lado ESQUERDO do texto, igual
   os campos de usuário/senha da tela de login. Esse input tem a
   classe apex-item-text, então caía na regra base de campo (padding:
   0 12px, sem reservar espaço pro ícone), fazendo o texto digitado
   passar por baixo da lupinha. Mesmo ajuste de padding-left usado
   nos campos com ícone da tela de login, reforçado com o mesmo
   truque de especificidade (:not(#nc-fake-id)) — sem mexer na
   posição nativa do ícone. */
html body input.a-PopupLOV-search.apex-item-text:not(#nc-fake-id):not(.a-GV *):not(.a-GV-columnItemContainer *) {
  padding-left: 34px !important;
}

/* =====================================================================
   TELA DE LOGIN — redesign v2 (fiel ao protótipo aprovado). Classe
   real confirmada no HTML: <body class="t-PageBody--login ...">.
   Estrutura do form nativo:
     .t-Login-container > .container > .row > .col > .t-Login-region
       > .t-Login-header (logo + título)
       > .t-Login-body (campos)
       > .t-Login-buttons (Entrar/SSO/Alterar/Esqueci)
   Caminhos de imagem abaixo são placeholders — trocar pelos caminhos
   reais assim que os 3 arquivos forem subidos como Static Workspace
   Files (padrão: natcorp/r/files/static/vXXXX/NOME.ext).
   IMPORTANTE: a pedido, essa tela NUNCA acompanha o tema de cor
   escolhido no seletor — as cores aqui são FIXAS (não usam var(--nc-
   ...)), sempre as mesmas independente do tema ativo no resto do
   sistema. */

/* Esconde APENAS a região nativa "Fazendo Login" (id="FAZENDO_LOGIN"),
   que o próprio APEX usa só durante o envio do formulário e que às
   vezes deixava uma borda sem conteúdo visível por baixo do nosso
   layout novo.
   CORRIGIDO: antes o seletor mirava ".t-Alert" de forma genérica, o
   que também escondia o alerta REAL de erro de login ("Dados de
   Usuário e/ou Senha incorretos...", com a contagem regressiva do
   throttle nativo) — os dois usam a mesma classe .t-Alert, então a
   regra genérica apagava as duas coisas. Agora mira só o id
   FAZENDO_LOGIN, que é sempre vazio mesmo (não é o alerta de erro). */
html:not([class*="app-LOGIN_STEFANINI"]) body.t-PageBody--login .t-Login-region .container:has(#FAZENDO_LOGIN),
html[class*="app-LOGIN_STEFANINI"] body:not(:has(#P2_VERIFICATION_CODE)).t-PageBody--login .t-Login-region .container:has(#FAZENDO_LOGIN),
html:not([class*="app-LOGIN_STEFANINI"]) body.t-PageBody--login #FAZENDO_LOGIN,
html[class*="app-LOGIN_STEFANINI"] body:not(:has(#P2_VERIFICATION_CODE)).t-PageBody--login #FAZENDO_LOGIN {
  display: none !important;
}
/* Resquício de HTML antigo (de antes deste redesign do login) — uma
   <div class="image"></div> vazia, que ficou presa direto no HTML de
   algumas páginas de login específicas (ex.: "Alterar Senha"), usada
   antigamente pra desenhar uma logo via CSS content:url(). Ela nem
   deveria renderizar (o HTML original a coloca dentro do <head>), mas
   o navegador "recupera" esse erro e acaba jogando ela pra dentro do
   <body> mesmo assim, aparecendo deslocada por cima do layout novo.
   Só esconde quando estiver VAZIA e dentro da tela de login — não
   mexe em nenhuma outra ".image" real que exista em outro lugar do
   sistema (classe genérica demais pra esconder sem esse escopo). O
   ideal ainda é remover esse <style>/<div> direto no HTML Header da
   página no Page Designer, mas isso aqui evita o estrago visual
   enquanto isso não é feito. */
body.t-PageBody--login div.image:empty {
  display: none !important;
}
/* Qualquer OUTRA região solta na tela de login (fora do cartão em
   si) — não deveria existir nenhuma, então esconde de forma
   genérica, sem depender de um ID específico (que muda de
   aplicação pra aplicação). */
html body.t-PageBody--login .row > [class*="col-"] > .t-Region:not(.t-Login-region) {
  display: none !important;
}

/* CORREÇÃO CRÍTICA: o template nativo do login tem um <style> inline
   travando ".t-Body" com position:absolute + top/left/right/bottom:0
   (do tamanho exato da tela, sem rolagem). Como agora o conteúdo
   ficou mais alto que a tela (por causa da logo acima do cartão),
   sem essa correção a parte de baixo do formulário fica cortada e
   impossível de rolar até ela. Troca pra permitir rolagem vertical
   quando o conteúdo não cabe. */
html body.t-PageBody--login .t-Body {
  position: static !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
html body.t-PageBody--login {
  overflow-y: auto !important;
}

/* ---------- Fonte exclusiva da tela de login (Sora/Manrope) — só
   aqui, o resto do sistema continua com Jakarta Sans normalmente. */
html body.t-PageBody--login.t-PageBody--login,
html body.t-PageBody--login.t-PageBody--login * {
  font-family: "Manrope", "Segoe UI", sans-serif !important;
}
html body.t-PageBody--login.t-PageBody--login .t-Login-body::before {
  font-family: "Sora", "Segoe UI", sans-serif !important;
}

/* ---------- 1) Fundo da página inteira ---------- */
html body.t-PageBody--login {
  background-color: #F6F5F8 !important;
  background-image:
    linear-gradient(180deg, rgba(246,245,248,0.85) 0%, rgba(246,245,248,0.55) 55%, rgba(246,245,248,0.85) 100%),
    url("hero-concrete.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* ---------- 2) Logo — o <span class="t-Login-logo"> real do APEX
   fica DENTRO do .t-Login-header (que tem overflow:hidden pra
   arredondar a foto), então não dá pra "escapar" ele pra cima do
   cartão sem cortar. Em vez disso: escondemos o span original e
   desenhamos o logo via ::before no container MAIOR (que engloba
   tudo), que aí sim fica visualmente ACIMA do cartão. */
html body.t-PageBody--login span.t-Login-logo {
  display: none !important;
}
html body.t-PageBody--login .t-Login-container {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html body.t-PageBody--login .t-Body-wrap,
html body.t-PageBody--login .t-Body-col,
html body.t-PageBody--login .t-Body-col--main {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  top: 0 !important;
  gap: 0 !important;
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}
html body.t-PageBody--login .t-Login-container::before {
  content: "";
  display: block;
  height: 92px;
  max-width: 400px;
  margin: 0 auto 18px;
  background-image: url("logo-natcorp.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---------- Cartão de login (.t-Login-region) — fundo branco, cantos
   arredondados, sombra suave (não é mais vidro escuro — é o cartão
   "elevado" claro do protótipo aprovado). ---------- */
html body.t-PageBody--login .t-Login-region {
  max-width: 400px !important;
  margin: 0 auto 24px !important;
  background: #F8F7FA !important;
  border: 1px solid #E4E1EA !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 48px -20px rgba(44,26,99,0.22), 0 2px 8px rgba(44,26,99,0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ---------- 3) Fundo do cabeçalho do cartão (.t-Login-header) ---------- */
html body.t-PageBody--login .t-Login-header {
  position: relative;
  height: 150px !important;
  padding: 0 !important;
  background-color: #2C1A63 !important;
  background-image: url("panel-colaborador.jpg") !important;
  background-size: cover !important;
  background-position: center 30% !important;
  display: flex !important;
  align-items: flex-end !important;
}
/* Selo circular com ícone de pessoa — desenhado 100% em CSS (SVG
   embutido), imitando o crachá do protótipo. */
html body.t-PageBody--login .t-Login-header::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 14px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #2C1A63;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 22px 22px, cover;
  box-shadow: 0 8px 20px rgba(44,26,99,0.4);
}
/* Ícone da bolinha por portal — mesmo ícone (Lucide) usado no card
   correspondente na página "Menu de Portais". Colaborador usa o
   ícone padrão acima (person); os demais trocam só o SVG do
   background-image, mantendo o mesmo gradiente/tamanho/posição. */
html[class*="app-PG_"] body.t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html[class*="app-PO_"] body.t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html[class*="app-CV_"] body.t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M10.3 15H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Cpath d='m21 21-1.9-1.9'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html[class*="app-NATDOCS_"] body.t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 21h8'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
/* O Chamado (app 118, workspace separado) usa uma versão mais
   antiga do Theme 42, que nunca adiciona a classe app-CHAMADO_ no
   <html> (confirmado no HTML real da aplicação — não é algo que
   mudou, sempre foi assim). Por isso, além da checagem por classe
   (que funciona nos outros portais, caso um dia essa aplicação
   ganhe a classe também), aceita também pelo ID numérico da
   aplicação (p_flow_id=118) como garantia — assim esse MESMO
   arquivo funciona nos dois workspaces, sem precisar de versões
   separadas. */
html[class*="app-CHAMADO_"] body.t-PageBody--login .t-Login-header::before,
html body.t-PageBody--login:has(input[name="p_flow_id"][value="118"]) .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html[class*="app-CHINT_"] body.t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html[class*="app-FREQ_NATPONTO_"] body.t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html[class*="app-LOGIN_STEFANINI"] body:has(#P2_VERIFICATION_CODE).t-PageBody--login .t-Login-header::before {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3Crect x='9.5' y='12.5' width='5' height='4' rx='0.8'/%3E%3Cpath d='M10.7 12.5v-1.2a1.3 1.3 0 0 1 2.6 0v1.2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2C1A63, #8E4FB8);
}
html body.t-PageBody--login .t-Login-title {
  font-size: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Título "Login - Painel do [Portal]" — o texto muda conforme a
   aplicação (identificada pela classe html[class*="app-XX_"], onde
   XX é o prefixo do portal e o resto é o nome da base do cliente,
   ex.: app-PC_NATCORP, app-PC_OUTRACLIENTE — mirando só o prefixo
   funciona pra qualquer base). Fallback genérico "Login" pra
   qualquer aplicação que não bata com nenhum desses portais. */
html body.t-PageBody--login .t-Login-body::before {
  content: "Login";
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: #211B2E;
  margin: 4px 0 2px;
}
html[class*="app-PC_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - Portal do Colaborador";
}
html[class*="app-PG_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - Portal do Gestor";
}
html[class*="app-PO_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - Portal do Operador";
}
html[class*="app-CV_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - Portal do Candidato";
}
html[class*="app-NATDOCS_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - NatDocs";
}
html[class*="app-CHAMADO_"] body.t-PageBody--login .t-Login-body::before,
html body.t-PageBody--login:has(input[name="p_flow_id"][value="118"]) .t-Login-body::before {
  content: "Login - Chamados para o Suporte Técnico";
}
html[class*="app-CHINT_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - Chamados Internos";
}
html[class*="app-FREQ_NATPONTO_"] body.t-PageBody--login .t-Login-body::before {
  content: "Login - NatPonto";
}
html[class*="app-LOGIN_STEFANINI"] body:has(#P2_VERIFICATION_CODE).t-PageBody--login .t-Login-body::before {
  content: "Token de Autenticação";
}

/* Imagem de fundo do cabeçalho do cartão — muda conforme o portal.
   Caminhos placeholder — trocar pelo nome real de cada arquivo
   assim que forem subidos como Static Workspace Files (mesma pasta
   do nosso CSS, só o nome do arquivo, sem caminho completo). */
html[class*="app-PG_"] body.t-PageBody--login .t-Login-header {
  background-image: url("panel-gestor.jpg") !important;
}
html[class*="app-PO_"] body.t-PageBody--login .t-Login-header {
  background-image: url("panel-operador.jpg") !important;
}
html[class*="app-CV_"] body.t-PageBody--login .t-Login-header {
  background-image: url("panel-candidatos.jpg") !important;
}
html[class*="app-NATDOCS_"] body.t-PageBody--login .t-Login-header {
  background-image: url("panel-assinatura.jpg") !important;
}
html[class*="app-CHAMADO_"] body.t-PageBody--login .t-Login-header,
html body.t-PageBody--login:has(input[name="p_flow_id"][value="118"]) .t-Login-header {
  background-image: url("panel-suporte.jpg") !important;
}
html[class*="app-CHINT_"] body.t-PageBody--login .t-Login-header {
  background-image: url("panel-internos.jpg") !important;
}
html[class*="app-FREQ_NATPONTO_"] body.t-PageBody--login .t-Login-header {
  background-image: url("panel-natponto.jpg") !important;
}

/* ---------- Corpo do cartão (campos) ---------- */
html body.t-PageBody--login .t-Login-body {
  padding: 20px 28px 8px !important;
}
html body.t-PageBody--login .t-Form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6E6978 !important;
}
html body.t-PageBody--login .t-Login-body input.apex-item-text,
html body.t-PageBody--login .t-Login-body input[type="text"],
html body.t-PageBody--login .t-Login-body input[type="password"] {
  background-color: #FBFAFC !important;
  border: 1px solid #E4E1EA !important;
  border-radius: 12px !important;
  color: #211B2E !important;
  height: 44px !important;
}
html body.t-PageBody--login .t-Login-body input:focus {
  border-color: #8E4FB8 !important;
}
/* Mensagens "Display Only" dentro da tela de login (ex.: aviso de
   e-mail enviado, na tela de Token) — garante que o texto sempre
   apareça legível, com boa cor de contraste. */
html body.t-PageBody--login .t-Login-body .apex-item-display-only,
html body.t-PageBody--login .t-Login-body span.display_only {
  background-color: #FBFAFC !important;
  color: #211B2E !important;
  border: 1px solid #E4E1EA !important;
}
/* Quando a mensagem "Display Only" vem vazia (ex.: antes do token
   ser enviado), esconde a caixa inteira do campo — sem isso, uma
   caixa vazia aparecia na tela sem motivo aparente. */
html body.t-PageBody--login .t-Form-fieldContainer:has(> .t-Form-inputContainer .apex-item-display-only:empty),
html body.t-PageBody--login .t-Form-fieldContainer:has(> .t-Form-inputContainer span.display_only:empty) {
  display: none !important;
}

/* ---------- Botões (.t-Login-buttons) ---------- */
html body.t-PageBody--login .t-Login-buttons {
  padding: 4px 28px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* Exceção: na tela de Token (app-LOGIN_STEFANINI), os botões ficam
   dentro de .t-Login-links (não .t-Login-buttons, que fica vazio
   nessa página) — sem isso, os botões ficavam colados nas bordas do
   cartão, sem o respiro lateral que o restante do padrão tem. */
html[class*="app-LOGIN_STEFANINI"] body:has(#P2_VERIFICATION_CODE).t-PageBody--login .t-Login-links {
  padding: 4px 28px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* Espaço entre os botões e o aviso "Info Token" logo abaixo — na
   original tinha um respiro aqui, na nossa versão ficava colado. */
html[class*="app-LOGIN_STEFANINI"] body:has(#P2_VERIFICATION_CODE).t-PageBody--login .t-Login-subRegions {
  margin-top: 16px !important;
}
html body.t-PageBody--login .t-Login-buttons .t-Button {
  width: 100% !important;
  height: 44px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  justify-content: center !important;
}
html body.t-PageBody--login.t-PageBody--login .t-Login-buttons .t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati),
html body.t-PageBody--login.t-PageBody--login .t-Login-buttons .t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):hover,
html body.t-PageBody--login.t-PageBody--login .t-Login-buttons .t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):focus,
html body.t-PageBody--login.t-PageBody--login .t-Login-buttons .t-Button--hot:not(.btnIA):not(.floatChamadoInterno):not(.floatNati):active {
  background: linear-gradient(135deg, #2C1A63, #8E4FB8) !important;
  background-image: linear-gradient(135deg, #2C1A63, #8E4FB8) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(44,26,99,0.32) !important;
}
html body.t-PageBody--login.t-PageBody--login .t-Login-buttons .t-Button--hot .t-Button-label,
html body.t-PageBody--login.t-PageBody--login .t-Login-buttons .t-Button--hot .t-Icon {
  color: #fff !important;
}
html body.t-PageBody--login .t-Login-buttons .t-Button:not(.t-Button--hot) {
  background: #fff !important;
  border: 1px solid #E4E1EA !important;
  color: #211B2E !important;
}
html body.t-PageBody--login .t-Login-buttons .t-Button:not(.t-Button--hot) .t-Button-label,
html body.t-PageBody--login .t-Login-buttons .t-Button:not(.t-Button--hot) .t-Icon {
  color: #211B2E !important;
}
html body.t-PageBody--login .t-Login-buttons .t-Button:not(.t-Button--hot):hover {
  background: #F4F1F8 !important;
  color: #2C1A63 !important;
}
html body.t-PageBody--login .t-Login-buttons .t-Button:not(.t-Button--hot):hover .t-Button-label,
html body.t-PageBody--login .t-Login-buttons .t-Button:not(.t-Button--hot):hover .t-Icon {
  color: #2C1A63 !important;
}

/* ---------- Subtítulo adaptativo — inserido via JavaScript
   (ncInsertLoginSubtitle), com o texto mudando conforme os campos
   presentes na tela (Empresa/Matrícula). ---------- */
html body.t-PageBody--login .t-Login-subtitle {
  font-size: 13.5px !important;
  color: #6E6978 !important;
  line-height: 1.4 !important;
  margin: 2px 0 20px !important;
}


/* =====================================================================
   REDE DE PROTEÇÃO: garante que qualquer região ou item que o APEX
   marque como oculto (classe nativa .u-hidden, usada por exemplo por
   Dynamic Actions do tipo "Hide" via apex.da.hide) SEMPRE fique
   escondido, não importa se alguma outra regra nossa (das 29+ que
   forçam display:flex/block/grid com !important pra estilizar
   campos, cartões, etc.) também mira o mesmo elemento. A classe
   repetida 3x aumenta a especificidade o suficiente pra vencer
   qualquer combinação de tag+classe que usamos no resto do arquivo,
   ficando por último no arquivo como reforço extra de prioridade.
   ===================================================================== */
html body .u-hidden.u-hidden.u-hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Item "Display Image" (foto/imagem de exibição) configurado com a
   opção nativa "Hidden" (esconder quando vazio) no Template Options
   — quando não há imagem, o .t-Form-itemWrapper fica completamente
   vazio (sem nenhum <img> dentro). Garante que a região inteira
   (rótulo + moldura) some nesse caso, em vez de aparecer como uma
   caixa vazia com borda. */
html body .apex-item-wrapper--display-image:has(> .t-Form-inputContainer > .t-Form-itemWrapper:not(:has(img))) {
  display: none !important;
}
/* A regra acima esconde só o CAMPO em si — mas quando a região
   inteira (com cabeçalho, mesmo que removido visualmente, e
   moldura) existe só pra abrigar esse campo de imagem, ela
   continuava aparecendo vazia por fora. Esconde a região inteira
   nesse caso também. */
html body .t-Region:has(.apex-item-wrapper--display-image:has(> .t-Form-inputContainer > .t-Form-itemWrapper:not(:has(img)))) {
  display: none !important;
}
/* A coluna de grade (col-X) que envolve essa região também precisa
   sumir, senão o espaço lateral dela continua reservado no layout,
   mesmo com o conteúdo interno escondido. */
html body [class*="col-"]:has(> .t-Region:has(.apex-item-wrapper--display-image:has(> .t-Form-inputContainer > .t-Form-itemWrapper:not(:has(img))))) {
  display: none !important;
}