/*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: #2C1A63 !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;
  --nc-bg: #f5f6f8;
  --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;
}

/* ---------- 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(6, 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 *) {
  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); }

/* ---------- 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);
}
/* Correção geral: QUALQUER foto de exibição (display_image) que o
   tema nativo arredonda em círculo — força largura E altura fixas
   iguais (o aspect-ratio sozinho não bastou, porque uma altura fixa
   nativa entrava em conflito e a imagem ficava numa "pílula" larga
   em vez de círculo). */
html body img.display_image.apex-item-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 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 {
  border-left-color: var(--nc-border) !important;
  border-left-width: 1px !important;
}
html body .t-Region-header {
  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;
}
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(.a-GV *):not(.a-GV-columnItemContainer *),
html body select.apex-item-select:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body .apex-item-select:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body textarea.textarea:not(.a-GV *):not(.a-GV-columnItemContainer *),
html body textarea.apex-item-textarea: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;
}
html body textarea.textarea,
html body textarea.apex-item-textarea {
  height: auto !important;
  min-height: 96px !important;
  padding: 10px 12px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

/* 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 0 !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 0 !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 0 !important;
  line-height: 1 !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 0 !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 0 !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 0 !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 0 !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) pra vencer mesmo a regra
   mais específica de input[type="text"].apex-item-text. */
html body input.apex-item-text.apex-item-has-icon.apex-item-has-icon,
html body input[type="text"].apex-item-has-icon.apex-item-has-icon,
html body input[type="password"].apex-item-has-icon.apex-item-has-icon,
html body input.apex-item-has-icon.apex-item-has-icon {
  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. */
html body .t-Login-body input.apex-item-text.apex-item-has-icon.apex-item-has-icon,
html body .t-Login-body input.apex-item-has-icon.apex-item-has-icon {
  padding-left: 40px !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 .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;
}
html body input.apex-item-text::placeholder,
html body textarea.apex-item-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;
}
/* 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. */
html body .apex-item-display-only,
html body span.display_only {
  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;
}

/* 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 — mesma caixa do Text Item (altura, padding, borda,
   fonte), igual fizemos pro Clock Picker. Só layout, sem JavaScript. */
html body .apex-item-group--file {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px 0 16px !important;
  border: 1px solid var(--nc-input) !important;
  border-radius: var(--nc-radius-md) !important;
  background-color: var(--nc-card) !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nc-fg) !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
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 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .apex-item-file-dropzone-icon {
  color: var(--nc-muted) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-right: 6px !important;
  cursor: pointer !important;
}
html body .apex-item-file-dropzone-label {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 0 4px !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nc-muted-fg) !important;
  cursor: pointer !important;
}
html body input.apex-item-file {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}
/* Quando o campo está em modo leitura e não tem nenhum arquivo
   anexado, o APEX não renderiza nada dentro (nem aviso nenhum) — a
   caixa fica vazia sem explicação. Mostramos uma mensagem no lugar,
   só via CSS (::before num elemento vazio), sem nenhum JavaScript. */
html body .apex-item-group--file:empty::before {
  content: "Nenhum arquivo anexado";
  font-style: italic;
  color: var(--nc-muted-fg) !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 */
html body select.apex-item-select,
html body select.selectlist {
  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;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  position: relative !important;
}
html body .t-Form-itemWrapper > *:not(.t-Form-helpButton):not(.js-resize-sensor):not(img),
html body .t-Form-inputContainer > *:not(.t-Form-helpButton):not(.js-resize-sensor):not(img) {
  flex: 1 1 auto !important;
  min-width: 0 !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. */
html body .u-selector,
html body .u-selector: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;
}

/* ---------- 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); }

/* ---------- 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 escondido 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" de outras regras (campo com Floating Label, campo somente
   leitura). Colocado no final do arquivo, com seletores simples
   (sem :not() complexo, que pode falhar em navegadores mais
   restritos), pra garantir prioridade máxima na cascata. */
html body ul.apex-item-multi input.apex-item-text {
  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;
}
/* Pedido direto: esconder esse campo por completo, já que as
   tentativas de deixá-lo "invisível mas funcional" não surtiram
   efeito visual. O botão de popup (fora deste <li>) continua
   funcionando normalmente para abrir a lista de valores. */
html body li.apex-item-multi-item input.apex-item-popup-lov {
  display: none !important;
}
/* ==========================================================================
   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;
}
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;
}
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);
}

/* =====================================================================
   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 qualquer região "vazia" dentro do cartão de login (ex.: o
   alerta nativo "Fazendo Login", que só deveria aparecer durante o
   envio do formulário, mas deixava uma borda sem conteúdo visível
   por baixo do nosso layout novo). */
html body.t-PageBody--login .t-Login-region .container:has(.t-Alert),
html body.t-PageBody--login .t-Alert {
  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;
}
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;
}
html body.t-PageBody--login .t-Login-container::before {
  content: "";
  display: block;
  height: 92px;
  max-width: 400px;
  margin: 24px 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);
}
html body.t-PageBody--login .t-Login-title {
  font-size: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Título "Login" fixo, desenhado como um heading logo ABAIXO da foto
   (igual o protótipo), não mais em cima da imagem. */
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;
}

/* ---------- 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;
}

/* ---------- 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;
}
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;
}