:root{
   --cor-primary: #066fd1;
   --cor-info: #4299e1;
   --cor-success: #2fb344;
   --cor-alert: #f76707;
   --cor-danger: #d63939;

   --lgcor-primary: #e0e5f8;
   --lgcor-info: #e4edfa;
   --lgcor-success: #e1f3df;
   --lgcor-alert: #ffe6d7;
   --lgcor-danger: #ffe0db;

   --clcor-primary: #9bc5ed;
   --clcor-info: #b3d6f3;
   --clcor-success: #ace1b4;
   --clcor-alert: #fbd999;
   --clcor-danger: #efb0b0;

   --escor-primary: #022c54;
   --escor-info: #1a3d5a;
   --escor-success: #13481b;
   --escor-alert: #624000;
   --escor-danger: #561717;

   --azul_nuvemsimples: #004080;

   --cor-preto: #000000;
   --cor-preto01: #181818;
   --cor-preto01_5: #292929;
   --cor-preto03: #4e4e4e;
   --cor-preto04: #777777;
   --cor-preto05: #a2a2a2;
   --cor-preto05: #d0d0d0;
   
   --cor-branco: #ffffff;
   --cor-branco0_5: #f0f0f0;

}

.bg-alert { background-color: var(--cor-alert) !important; }

.lnkText-nodecoration:hover, .lnkText-nodecoration:focus { 
   cursor: pointer;
   text-decoration: none !important; 
   
}

.cursor-search { 
   cursor: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-search%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M10%2010m-7%200a7%207%200%201%200%2014%200a7%207%200%201%200%20-14%200%22%20/%3E%3Cpath%20d=%22M21%2021l-6%20-6%22%20/%3E%3C/svg%3E) 8 8, auto !important;

}

.cursor-calendar {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-week'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z' /><path d='M16 3v4' /><path d='M8 3v4' /><path d='M4 11h16' /><path d='M7 14h.013' /><path d='M10.01 14h.005' /><path d='M13.01 14h.005' /><path d='M16.015 14h.005' /><path d='M13.015 17h.005' /><path d='M7.01 17h.005' /><path d='M10.01 17h.005' /></svg>") 8 8, auto;
 
}

.txt-cor-danger { color: var(--cor-danger) !important; }
.txt-cor-alert { color: var(--cor-alert) !important; }
.txt-cor-primary { color: var(--cor-primary) !important; }
.txt-cor-info { color: var(--cor-info) !important; }
.txt-cor-success { color: var(--cor-success) !important; }

.txt-clcor-danger { color: var(--clcor-danger) !important; }
.txt-clcor-alert { color: var(--clcor-alert) !important; }
.txt-clcor-primary { color: var(--clcor-primary) !important; }
.txt-clcor-info { color: var(--clcor-info) !important; }
.txt-clcor-success { color: var(--clcor-success) !important; }

.txt-escor-danger { color: var(--escor-danger) !important; }
.txt-escor-alert { color: var(--escor-alert) !important; }
.txt-escor-primary { color: var(--escor-primary) !important; }
.txt-escor-info { color: var(--escor-info); }
.txt-escor-success { color: var(--escor-success) !important; }

.txt-cor-branco { color: var(--cor-branco) !important; }

.txt-cor-preto { color: var(--cor-preto) !important; }
.txt-cor-preto-0 { color: var(--cor-preto) !important; }
.txt-cor-preto-1 { color: var(--cor-preto01) !important; }
.txt-cor-preto-2 { color: var(--cor-preto02) !important; } 
.txt-cor-preto-3 { color: var(--cor-preto03) !important; } /* Cor de texto padrão para exibição de resultados/ campos */
.txt-cor-preto-4 { color: var(--cor-preto04) !important; } /* Cor de texto padrão para comentários */

.elem-culto { display: none; }
.elem-exibe { display: block; }

.txt-oculto { display: none; }
.txt-exibe { display: block; }
.txt-form-erro {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 0.875em;
   color: var(--cor-danger);

}

.form-search-erro { border: var(--cor-danger) solid 2px !important; }
.form-search-OK { border: var(--cor-success) solid 2px !important; } 

.ns-label-form { 
   color: var(--cor-preto01);
   font-size: 14px !important;
   font-weight: bold;
   padding-bottom: 0px !important;
   margin-bottom: 0px !important;

   display: inline-block;
   width: 100%;

}

.ns-span-form { 
   color: var(--cor-preto03);
   font-size: 13px !important;
   font-size: 14px !important;
   padding-bottom: 0px !important;
   margin-bottom: 0px !important;

   display: inline-block;
   width: 100%;

}

.ns-span-coment { 
   color: var(--cor-preto05);
   font-size: 12px !important;
   font-style: italic !important;
   padding-bottom: 0px !important;
   margin-bottom: 0px !important;

   display: inline-block;
   width: 100%;

}

.border-top-cor-danger { border-top: var(--cor-danger) solid 2px !important; }
.border-top-cor-alert { border-top: var(--cor-alert) solid 2px !important; }
.border-top-cor-primary { border-top: var(--cor-primary) solid 2px !important; }
.border-top-cor-info { border-top: var(--cor-info) solid 2px !important; }
.border-top-cor-success { border-top: var(--cor-success) solid 2px !important; }

.bground-cor-danger { background-color: var(--cor-danger) !important; }
.bground-cor-alert { background-color: var(--cor-alert) !important; }
.bground-cor-primary { background-color: var(--cor-primary) !important; }
.bground-cor-info { background-color: var(--cor-info) !important; }
.bground-cor-success { background-color: var(--cor-success) !important; }

.bground-clcor-danger { background-color: var(--clcor-danger) !important; }
.bground-clcor-alert { background-color: var(--clcor-alert) !important; }
.bground-clcor-primary { background-color: var(--clcor-primary) !important; }
.bground-clcor-info { background-color: var(--clcor-info) !important; }
.bground-clcor-success { background-color: var(--clcor-success) !important; }

.bground-escor-danger { background-color: var(--escor-danger) !important; }
.bground-escor-alert { background-color: var(--escor-alert) !important; }
.bground-escor-primary { background-color: var(--escor-primary) !important; }
.bground-escor-info { background-color: var(--escor-info) !important; }
.bground-escor-success { background-color: var(--escor-success) !important; }

.bground-cor-branco-0 { background-color: var(--cor-branco) !important; }
.bground-cor-ns { background-color: var(--azul_nuvemsimples) !important; }

.bground-cor-preto-0 { background-color: #000000 !important; }
.bground-cor-preto-1 { background-color: #181818 !important; }
.bground-cor-preto-2 { background-color: #303030 !important; }
.bground-cor-preto-3 { background-color: #494949 !important; }
.bground-cor-preto-3 { background-color: #616161 !important; }

.bground-cor-dark-0 { background-color: #090C10 !important; }
.bground-cor-dark-1 { background-color: #1F2937 !important; }
.bground-cor-dark-2 { background-color: #2A384B !important; }
.bground-cor-dark-3 { background-color: #3B4E68 !important; }
.bground-cor-dark-3 { background-color: #4B6486 !important; }

.space-ico { margin-right: 10px; }
.space-ico-5 { margin-right: 5px; }  
.ns_font_ico { font-size: 18px !important; }

.ns_space-alt-0 { padding-bottom: 0px !important; margin-bottom: 0px !important; }
.ns_space-alt-5 { padding-bottom: 5px !important; }
.ns_space-alt-10 { padding-bottom: 10px !important; }
.ns_space-alt-15 { padding-bottom: 15px !important; }
.ns_space-alt-30 { padding-bottom: 30px !important; }
.ns_space-alt-50 { padding-bottom: 50px !important; }
.ns_space-label { padding-bottom: 25px !important; }

.ns_space-vertical { margin-left: 10px !important; }

.ns_font_ico { font-size: 18px !important; }
.font-ico-16 { font-size: 16px; }  
.font-ico-18 { font-size: 18px; } 
.font-ico-20 { font-size: 20px; }
.font-table { font-size: 12px; }

.ns-text-direita { text-align: right !important; }
.ns-text-centro { text-align: center !important; }
.ns-text-esquerda { text-align: left !important; }

.text-right { text-align: right !important; }

.width-auto { width: auto; }
.width-3 { width: 3%; }
.width-100 { width: 100% !important; }

.ns-font-12 { font-size: 12px !important; }
.ns-font-14 { font-size: 14px !important; }
.ns-font-16 { font-size: 16px !important; }
.ns-font-18 { font-size: 18px !important; }
.ns-font-20 { font-size: 20px !important; }
.ns-font-22 { font-size: 22px !important; }
.ns-font-24 { font-size: 24px !important; }
.ns-font-26 { font-size: 26px !important; }
.ns-font-28 { font-size: 28px !important; }
.ns-font-30 { font-size: 30px !important; }
.ns-font-34 { font-size: 34px !important; }
.ns-font-38 { font-size: 38px !important; }
.ns-font-42 { font-size: 42px !important; }
.ns-font-52 { font-size: 52px !important; }
.ns-font-62 { font-size: 62px !important; }

.ns-text-negrito { font-weight: bold !important; }

.tbl-container-font { font-size: 12px !important; }
.btn-font { font-size: 11px !important;} 

.ns-padding-15 { padding: 15px; }

.ns-margin-5 { margin-left: 5px; }
.ns-margin-15 { margin-left: 10px; }
.ns-margin-30 { margin-left: 30px; }
.ns-margin-50 { margin-left: 50px; }

.ns-marginr-5 { margin-right: 5px; }
.ns-marginr-15 { margin-right: 10px; }
.ns-marginr-30 { margin-right: 30px; }
.ns-marginr-50 { margin-right: 50px; }

.ns-semmargin-t { 
   padding-top: 0px !important; 
   margin-top: 0px !important; 

}

.ns-semmargin-b { 
   padding-bottom: 0px !important; 
   margin-bottom: 0px !important; 

}

.ns-semmargin-l { 
   padding-left: 0px !important; 
   margin-left: 0px !important; 

   padding-right: 0px !important; 
   margin-right: 0px !important; 

}

.ns-semmargin-ld { 
   padding-right: 0px !important; 
   margin-right: 0px !important; 

}

.ns-semmargin-le { 
   padding-left: 0px !important; 
   margin-left: 0px !important; 

}

@media (max-width:767px) { .nodisplay-Moblie { display: none; } }
@media (max-width:767px) { .space-mobile-b { margin-bottom: 5px; } }

/* ***
*** Correção de Botões Tabler (Visited) ***
*** Garante que o texto permaneça branco mesmo após o clique
*** */
a.btn-primary:visited,
a.btn-success:visited,
a.btn-danger:visited,
a.btn-info:visited,
a.btn-dark:visited,
a.btn-azure:visited,
a.btn-indigo:visited,
a.btn-purple:visited { color: var(--cor-branco) !important; }

/* Botão de fechar exclusivo */
.gans-btn-close {
   background: none;
   border: none;
   cursor: pointer;
   padding: 0.5rem;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end; /* força alinhamento à direita */
   position: absolute;        /* posiciona no canto superior direito */
   top: 0.5rem;
   right: 0.5rem;
 
}
 
.gans-close-icon {
   font-size: 1.2rem;
   font-weight: normal;
   color: var(--cor-preto03);

}
 
/* Hover mais claro */
.gans-btn-close:hover .gans-close-icon { color: var(--cor-preto04); }

/* ***
*** Go to top
*** */

#back-to-top-btn {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   font-size: 26px;
   width: 50px;
   height: 50px;
   background-color: #fff;
   color: #303030;
   cursor: pointer;
   outline: none;
   border: 3px solid #303030;
   border-radius: 50%;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-property: background-color, color;
   z-index: 5000;

}

#back-to-top-btn:hover, #back-to-top-btn:focus {
   background-color: #303030;;
   color: var(--cor-branco);  

}

@media(max-width: 992px) { #back-to-top-btn { font-size: 22px; width: 40px; height: 40px; bottom: 15px; right: 15px; } }
@media(max-width:768px) { #back-to-top-btn { font-size: 18px; width: 32px; height: 32px; bottom: 6px; right: 6px; } }

/* ***
*** Steps Personalizado
*** /*

/* Reutilizando seu CSS de Steps do vaga-form-new.inc */
   .custom-steps { border-left: none !important; }
   .custom-steps .step-item:before { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.2rem; font-weight: 700; }
   .custom-steps.steps-vertical .step-item:after { left: 1.25rem; }
   .custom-steps.steps-vertical .step-item { padding-left: 3rem; min-height: 4rem; }
   .custom-steps .step-item.step-last:after { display: none !important; }
   
   /* Transição suave nas caixas */
   .d-flex { animation: fadeInBox 0.3s ease-in; }
   @keyframes fadeInBox { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* ***
*** Calendar *** 
*** */

.calendar-container { margin-top: 5px; }
.calendar-table { 
   border-collapse: collapse; 
   width: 100%; 

}

.calendar-cell { 
   width: 14%; 
   height: 60px; 
   text-align: center; 
   vertical-align: top; 

}

.calendar-header { 
   text-align: center; 
   margin-bottom: 0px; 

}

.calendar-today { background-color: var(--clcor-success); }
.calendar-weekdays td { font-weight: bold; background: var(--cor-branco0_5); }

.calendar-header-visual {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
 
}
 
.calendar-day-highlight {
   font-size: 48px;
   font-weight: bold;
   margin-right: 15px;
   color: var(--escor-primary);

}
 
.calendar-month-year {
   display: flex;
   flex-direction: column;
   text-align: left;
   font-size: 18px;
   line-height: 1.2;

}

.calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr); /* 7 colunas iguais */
   width: 100%; /* ocupa toda a largura */
   gap: 2px;

}
 
.calendar-weekday {
   text-align: center;
   font-weight: bold;
   padding: 6px;
   background-color: var(--cor-branco0_5);
   border: 1px solid #e0e0e0;
   border-radius: 4px;
 
}
 
.calendar-cell {
   width: 100%;
   height: 60px;
   border: 1px solid #e0e0e0;
   background-color: var(--cor-branco);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 6px;
   box-sizing: border-box;
   border-radius: 4px;
 
}

@media (max-width: 600px) {
   .calendar-cell {
      height: calc(100vw / 7.5); /* células menores em telas pequenas */
      font-size: 0.8rem;

   }
 
}
 
.calendar-cell:hover {
   background-color: #f9f9f9;
   cursor: pointer;

}
 
.calendar-today {
   background-color: #d4edda;
   border: 2px solid var(--cor-success);
   border-radius: 6px;
 
}
 
.day-number {
   font-weight: bold;
   font-size: 1rem;

}
 
.task-dots {
   display: flex;
   justify-content: center;
   gap: 4px;

}
 
.task-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;

}

/* *** 
GANS Password Requirements Balloon 
*** */

.gans-pass-requirements {
   position: absolute;
   z-index: 1050;
   background: var(--cor-branco);
   border: 1px solid #dce1e7;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   border-radius: 6px;
   padding: 15px;
   margin-bottom: 5px;
   bottom: 100%;
   top: auto;
   width: calc(100% - 15px);
   min-width: 250px;
   text-align: left;
   left: 15px;
}

.gans-pass-requirements::before {
   content: "";
   position: absolute;
   bottom: -6px;
   top: auto;
   left: 20px;
   width: 12px;
   height: 12px;
   background: var(--cor-branco);
   border-right: 1px solid #dce1e7;
   border-bottom: 1px solid #dce1e7;
   transform: rotate(45deg);
}

.pass-req-item { display: flex; align-items: center; margin-bottom: 4px; font-size: 12px; color: #6e7582; transition: color 0.2s; }
.pass-req-item.valid { color: var(--cor-success); font-weight: 500; }
.pass-req-item i { margin-right: 8px; font-size: 10px; }

/* Aviso de Caps Lock */
.gans-caps-warning {
   color: var(--cor-alert);
   font-size: 12px;
   font-weight: 600;
   display: none; /* Controlado via JS */
   align-items: center;
   margin-top: 5px;
   animation: fadeIn 0.3s ease-in-out;

}

.gans-caps-warning i { margin-right: 5px; font-size: 14px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* *** CLASSE DE EXPANSÃO INTELIGENTE GANS4 || Resolve o problema do css do table criando a margem esquerda. *** */
.gans-full-breakout {
   position: relative !important;
   
   /* 1. Mantém a largura interna original para não quebrar o layout */
   width: 100% !important; 
   
   /* 2. A MÁGICA: Cria uma sombra sólida branca que se expande 1000px para cada lado.
   O primeiro valor (0 -1px) simula a borda cinza no topo. */
   box-shadow: 0 0 0 100vmax #ffffff, 0 -1px 0 0 #e0e0e0 !important;
   
   /* 3. Permite que a sombra seja vista fora da div, mas apenas no eixo horizontal */
   clip-path: inset(0 -100vmax) !important;
   
   /* 4. Garante que o fundo da div seja branco para encontrar a sombra */
   background-color: #ffffff !important;
   
}

/* ***
*** CLASSE DE EXPANSÃO PARA HEADER (GANS4) ***
*** Usa a mesma técnica do gans-full-breakout, mas com cor dinâmica via CSS variable
*** para fazer o header ocupar a largura total, mesmo dentro de um container com padding.
*** */
.gans-header-breakout {
   position: relative !important;
   width: 100% !important; 
   z-index: 10 !important;
   /* Removemos o clip-path do elemento pai para não cortar os dropdowns */
   clip-path: none !important;
   box-shadow: none !important;
}

.gans-header-breakout::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   /* A mágica agora acontece no pseudo-elemento, que fica atrás do conteúdo */
   box-shadow: 0 0 0 100vmax var(--cor-padrao-header), 0 1px 0 0 var(--tblr-border-color);
   clip-path: inset(-1px -100vmax); /* Corta a sombra verticalmente apenas no pseudo-elemento */
   background-color: var(--cor-padrao-header);
   z-index: -1;
   pointer-events: none;
}

/* ***
*** Overlay genérico ***
*** */

#overlay {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 9998;
   justify-content: center;
   align-items: center;
   opacity: 1;
   transition: opacity 0.6s ease;

}
 
/* Overlay ativo */
#overlay.active { display: flex; }
 
/* Fundo por estado */
#overlay.loading { background: var(--cor-branco); }
#overlay.modal,
#overlay.dialog { background: rgba(0,0,0,0.4); }
 
/* Fade-out do loading */
#overlay.fade-out {
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
   transition: opacity 0.6s ease, visibility 0s 0.6s;
 
}

.gans-front-layer,
.gans-top-overlay { background: rgba(0,0,0,0.7); /* escuro, sem branco */ }
 
/* Conteúdos por estado */
.overlay-content { display: none; }
#overlay.loading .overlay-content.loading { display: block; }
#overlay.modal .modal-dialog { display: flex; }
#overlay.dialog .gans-dialog-box { display: flex; }
 
/* Bloqueio de scroll do body quando overlay ativo */
body.overlay-active { overflow: hidden; }

/* Overlay do Dialog */
#dialog-overlay {
   position: fixed;
   top: 0; left: 0;
   width: 100%; height: 100%;
   display: none; /* inicia oculto */
   align-items: center;
   justify-content: center;
   background: rgba(0,0,0,0.4);
   z-index: 2000; /* acima do modal */
   
}

/* Quando ativo */
#dialog-overlay.active { display: flex; }

/* Caixa do dialog */
/* Header, body e footer */
.gans-dialog-header { margin-bottom: 10px; }
.gans-dialog-body { margin-bottom: 15px; }
.gans-dialog-footer { display: flex; justify-content: flex-end; gap: 10px; }
 
.gans-dialog-box {
   position: relative;
   width: 30vw;
   min-width: 320px;
   max-width: 90vw;
   margin: 0px !important;
   padding: 0px !important;
    
}

#gans-dialog-root-global {
   background: transparent !important;
   margin: 0 !important;
   padding: 0 !important;

}

/* ***
*** Modal *** 
*** */

.modal-dialog {
   position: relative;
   margin: auto;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
 
}

.modal-content {
   display: flex;
   flex-direction: column;
   max-height: 100%;
   border-radius: 8px;
   overflow: hidden;
   border: none;

}

.modal-body {
   padding: 15px;
   padding-top: 15px;
   overflow-y: auto;
   flex: 1;
   border: none !important;

}

.modal-dialog.modal-peq { width: 600px !important; max-width: 600px !important; }
.modal-dialog.modal-med { width: 900px !important; max-width: 900px !important; }
.modal-dialog.modal-gra { width: 80% !important; max-width: 80% !important; }

@media (max-width: 768px) {
   .modal-dialog.modal-peq,
   .modal-dialog.modal-med,
   .modal-dialog.modal-gra {
      width: 95% !important;      /* ocupa quase toda a tela */
      max-width: 95% !important;  /* garante que não ultrapasse */

   }

}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 1rem;
   min-height: 30px;

}

.modal-title {
   margin: 0;
   font-size: 18px;

}

.btn-close {
   font-size: 1.5rem;
   line-height: 1;
   background: none;
   border: none;
   cursor: pointer;

}

.modal-footer {
   padding: 10px 15px;
   text-align: right;
   border-radius: 0 0 8px 8px;
   margin-bottom: 0;

}

.modal-content form { margin: 0; }
 
/* Estilos de cores */
.gans-primary {
   --primary: var(--cor-primary);            /* cor principal */
   --primary-body: var(--cor-branco);        /* fundo do body/header */
   --primary-light: var(--lgcor-primary);    /* fundo mais claro para footer */

}
 
.gans-info {
   --info: var(--cor-info);                  /* cor principal */
   --info-body: var(--cor-branco);           /* fundo do body/header */
   --info-light: var(--lgcor-info);          /* fundo mais claro para footer */

}

.gans-alert {
   --info-main: var(--cor-alert);           /* cor principal */
   --info-body: var(--cor-branco);          /* fundo do body/header */
   --info--light: var(--lgcor-alert);       /* fundo mais claro para footer */

}

.gans-danger {
   --danger-main: var(--cor-danger);        /* cor principal */
   --danger-body: var(--cor-branco);        /* fundo do body/header */
   --danger-light: var(--lgcor-danger);     /* fundo mais claro para footer */

}

.gans-success {
   --success: var(--cor-success);            /* cor principal */
   --success-body: var(--cor-branco);        /* fundo do body/header */
   --success-light: var(--lgcor-success);    /* fundo mais claro para footer */

}

/* ***
*** DIALOG ***
*** */

/* Overlay Dinâmico do Dialog */
.gans-top-overlay {   
   display: flex;
   align-items: center;
   justify-content: center;

}

.gans-dialog-box {
   width: 30vw;
   min-width: 320px;
   max-width: 90vw;
   margin: 0 !important;
   padding: 0 !important;

}

.gans-dialog-content {
   box-shadow: 0 10px 40px rgba(0,0,0,0.5);
   border-radius: 8px;
   overflow: hidden;
   background: var(--cor-branco); /* Fundo padrão */

}

.gans-dialog-header { padding: 20px 25px; }
.gans-dialog-title { font-size: 20px; margin: 0; font-weight: 600; color: var(--cor-branco); }
.gans-dialog-body { padding: 10px 25px 25px 25px; font-size: 16px; color: var(--cor-branco); }
.gans-dialog-footer {
   padding: 15px 25px;
   background: rgba(0,0,0,0.15); /* Efeito de sombra no rodapé */
   display: flex;
   gap: 10px;

}

.gans-dialog-footer.only-ok { justify-content: flex-end; }
.gans-dialog-footer.confirm { justify-content: space-between; }

/* Cores do Dialog (Backgrounds) */
.gans-dialog[data-gans-color="blue"]      .gans-dialog-content { background: var(--cor-primary); }
.gans-dialog[data-gans-color="lightblue"] .gans-dialog-content { background: var(--lgcor-primary) }
.gans-dialog[data-gans-color="green"]     .gans-dialog-content { background: var(--cor-success); }
.gans-dialog[data-gans-color="red"]       .gans-dialog-content { background: var(--cor-danger); }
.gans-dialog[data-gans-color="orange"]    .gans-dialog-content { background: var(--cor-alert); }
.gans-dialog[data-gans-color="nuria"]     .gans-dialog-content { background: var(--cor-preto04); color: var(--cor-preto01); }

/* ***
*** UPLOAD ***
*** */

.gans-upload-area {
   border: 2px dashed #d0d7de;
   border-radius: 10px;
   padding: 20px;
   text-align: center;
   cursor: pointer;
   background: #f6f8fa;
   transition: border-color .2s, background .2s;

 }

.gans-upload-area p {
   font-size: 14px;
   color: #334155; /* cinza escuro */
   margin-bottom: 10px;

}

.gans-upload-area.dragover {
   background: #eaf2ff;
   border-color: var(--cor-primary);

}
 
.gans-preview {
   margin-top: 16px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 12px;
 
}
 
.gans-file-card {
   position: relative;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   background: var(--cor-branco);
   padding: 10px;
   box-shadow: 0 1px 2px rgba(16,24,40,0.06);
   transition: transform .15s;
 
}

.gans-file-card:hover { transform: translateY(-2px); }
.gans-remove {
   position: absolute;
   top: 6px; right: 8px;
   background: #f1f5f9;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   color: #0f172a;
   font-size: 14px;
   width: 24px; height: 24px;
   line-height: 22px; text-align: center;
   cursor: pointer;

}
.gans-remove:hover { background: #e2e8f0; } 
.gans-file-card img {
   width: 100%;
   height: 100px;
   object-fit: cover;
   border-radius: 6px;
   margin-bottom: 8px;

}

.gans-file-icon {
   font-size: 42px;
   color: #475569;
   margin: 8px 0;

}

.gans-file-card div:last-child {
   font-size: 12px;
   color: #334155;
   word-break: break-word;

}

/* ***
*** Melhorias de UX para o Menu Lateral (GANS4)
*** */

/* Animação mais suave para os sub-menus (dropdowns) */
.navbar-vertical .dropdown-menu {
   display: block;
   position: static !important; /* Garante que o menu empurre o conteúdo e não flutue */
   max-height: 0;
   min-height: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden; /* Impede cliques quando fechado */
   transform: translateY(-10px);
   transition: all 0.3s ease;
   margin-top: 0;
   padding: 0;
   border: 0; /* Remove borda quando fechado para não ocupar espaço */
}

.navbar-vertical .dropdown-menu.show {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  padding: 0.5rem 0;
  border: 1px solid var(--tblr-border-color); /* Restaura a borda padrão */
}