/* =========================
   LOGIN PAGE - Login / Reset / Termos / Politica / LinkExpirado / AcessoNegado
========================= */

.loginPage{
  width:100%;
  height:100vh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:var(--bg);
}

.loginPage::before{
  content:"";
  position:absolute;
  width: calc(900px * var(--bg-scale, 1));
  height: calc(900px * var(--bg-scale, 1));
  background:radial-gradient(circle at center, var(--bg-light, var(--accent-light)), transparent 70%);
  opacity:.35;
  filter:blur(120px);
  top: calc(-300px + var(--bg-pos1-y, 0px));
  left: calc(-200px + var(--bg-pos1-x, 0px));
  pointer-events:none;
}

.loginPage::after{
  content:"";
  position:absolute;
  width: calc(1500px * var(--bg-scale, 1));
  height: calc(1500px * var(--bg-scale, 1));
  background:radial-gradient(circle at center, var(--bg-main, var(--accent-main)), transparent 70%);
  opacity:.35;
  filter:blur(120px);
  bottom: calc(-500px - var(--bg-pos2-y, 0px));
  right: calc(-400px - var(--bg-pos2-x, 0px));
  pointer-events:none;
}

html:not(.fundo-gradiente-home) .loginPage::before,
html:not(.fundo-gradiente-home) .loginPage::after {
  opacity: 0.08 !important;
}

html:not(.fundo-gradiente-home) .loginPage {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

.loginSplit{
  position:relative;
  z-index:2;
  width:min(1480px, calc(100vw - 40px));
  height:min(860px, calc(100vh - 24px));
  display:grid;
  grid-template-columns:minmax(400px, 440px) minmax(620px, 1fr);
  align-items:center;
  gap:48px;
  margin:0 auto;
  overflow:visible;
}

.loginLeft{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.loginLeftInner{
  width:100%;
  max-width:440px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0 auto;
  overflow:visible;
}

.loginContainer{
  width:100%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  position:relative;
  z-index:2;
  overflow:visible;
  transform:none; 
}

.loginContainer::before{
  display:none;
}

.footer-sociais {
  align-items: center; 
}

.followUsText {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px; 
  letter-spacing: 0.3px;
}

.loginRight{
  width:100%;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding-left: 30px; 
  box-sizing: border-box;
  overflow: hidden; 
}

.loginRight::before {
  content: "";
  position: absolute;
  left: 0; 
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: min(72%, 560px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.08) 15%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.08) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3; 
}

html[data-theme="white"] .loginRight::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(17,24,39,.10) 15%,
    rgba(17,24,39,.18) 50%,
    rgba(17,24,39,.10) 85%,
    transparent 100%
  );
}

.loginVisual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
  z-index: 1; 
  border-radius: 16px; 
}

#loginSistemaImg{
  display:block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  user-select:none;
  pointer-events:none;
  transform:none;
  opacity:.92;
}

.loginVisual img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center; 
}


#loginSistemaImg{
  display:block;
  max-width:138%;
  max-height:112%;
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  transform:none;
  opacity:.92;
  object-position: center; 
  user-select: none;
} 

.LoginTermos {
  display: block;     
  text-align: center;  
  margin-top: 4px; /* Aproxima do texto "Já possui conta?" */
  width: 100%;
}

.LoginTermos label {
  display: block;     
  text-align: center;  
  font-size: 11px;     
  line-height: 1.5;    
  color: var(--muted);
  cursor: pointer;
}

/* =========================
   BOTÕES DE IDIOMA (LOGIN) - Login
========================= */

.loginLanguageContainer {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px; /* Sobe os botões de idioma */
  width: 100%;
}

.icon-lang {
  width: 28px !important;  /* Diminui o contorno do botão */
  height: 28px !important; /* Diminui o contorno do botão */
}

.icon-lang img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) !important; /* Inativo fica estritamente preto e branco */
  transition: filter 0.3s ease;
}

.icon-lang.active-lang img {
  filter: none !important; /* Ativo fica com a cor original */
}

.icon-lang:hover img {
  filter: none !important; /* Retorna a cor ao passar o mouse */
}

html[data-theme] body[data-icon-pack] .loginLanguageContainer a.icon-lang img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) !important;
  transition: filter 0.3s ease;
}

html[data-theme] body[data-icon-pack] .loginLanguageContainer a.icon-lang.active-lang img {
  filter: grayscale(0) !important;
}

html[data-theme] body[data-icon-pack] .loginLanguageContainer a.icon-lang:hover img {
  filter: grayscale(0) !important;
}



/* logo */
.logoBox{
  width:160px;
  height:96px;
  border-radius:16px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 2px auto;
  overflow:hidden;
}

.logoBox img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.logoFallback{
  opacity:0.55;
  filter:grayscale(0.2);
}

/* título */
.loginTitle{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin:0 0 24px 0;
}

.loginTitle strong{
  display:block;
  font-size:clamp(20px, 1.8vw, 30px);
  line-height:1.15;
  color:var(--text);
}

.loginTitle span{
  display:block;
  font-size:clamp(12px, .9vw, 14px);
  line-height:1.35;
  color:var(--muted);
}

/* google */
.googleLoginArea{
  width:100%;
  margin:12px 0 0 0;
}

#googleLoginBtn{
  width:100%;
  display:block;
}

#googleLoginBtn > div,
#googleLoginBtn iframe,
#googleLoginBtn [role="button"],
#googleLoginBtn > div > div{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  border-radius:10px !important;
}

.loginDividerOu{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:10px 0 2px 0;
  color:rgba(255,255,255,.45);
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
}

.loginDividerOu::before,
.loginDividerOu::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.12);
}

.loginDividerOu span{
  white-space:nowrap;
}

html[data-theme="white"] .loginDividerOu{
  color:rgba(0,0,0,.35);
}

html[data-theme="white"] .loginDividerOu::before,
html[data-theme="white"] .loginDividerOu::after{
  background:rgba(0,0,0,.10);
}



.inputGroup{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  margin:0 0 6px 0;
}

.inputGroup label{
  font-size:12px;
  color:var(--muted);
}

.inputGroup input{
  width:100%;
  height:42px;
  padding:10px 38px 10px 38px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:.2s ease;
}

.inputGroup input::placeholder{
  color:var(--muted);
}

.inputGroup input:focus{
  border-color:var(--accent-main);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-main) 20%, transparent);
}

.inputError{
  border:1px solid rgba(255,90,90,.8) !important;
  box-shadow:0 0 0 2px rgba(255,90,90,.15);
}

/* campo com ícone / senha */
.passwordField{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
} 

.passwordRequirements {
  display: flex;
  align-items: center;
  justify-content: center; 
  flex-wrap: wrap;         
  gap: 12px;               
}

.itemResetReq {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--muted) !important;
  margin-bottom: 0 !important; 
  white-space: nowrap;     
}

.itemResetReq:not(:last-child)::after {
  content: "›";             
  margin-left: 12px;        
  font-size: 15px;
  color: var(--stroke);     
  font-weight: 600;
}


.passwordField input{
  width:100%;
  height:42px;
  padding:10px 38px 10px 38px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:.2s ease;
}

.passwordField input::placeholder{
  color:var(--muted);
}

.passwordField input:focus{
  border-color:var(--accent-main);
 box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-main) 20%, transparent);
}

.inputIconLeft{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  opacity:.8;
  pointer-events:none;
}

.toggleSenha{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  cursor:pointer;
  opacity:.72;
  transition:.2s ease;
}

.toggleSenha:hover{
  opacity:1;
}

html[data-theme="black"] .inputIconLeft,
html[data-theme="black"] .toggleSenha{
  filter:brightness(0) invert(1);
  opacity:.75;
}

html[data-theme="white"] .inputIconLeft,
html[data-theme="white"] .toggleSenha{
  filter:none;
  opacity:.75;
}

/* opções padrão login */
.loginOptions {
    margin-top: -6px !important; /* Sobe APENAS a linha do "Ficar conectado / Esqueceu a senha" */
    margin-bottom: 4px !important;
  }

  input[type="checkbox"] + span,
  label:has(input[type="checkbox"]) {
    font-size: 11px !important;
  }

 

  .btnLogin { 
      height: 38px !important;
    margin-top: 14px !important; /* Compensa a margem para o botão NÃO subir junto */
    font-size: 13px !important;
  background: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  color: #fff !important;
  border: none !important;
}

.loginOptions label{
  display:flex;
  gap:6px;
  align-items:center;
  color:var(--muted);
}

.loginOptions a{
  color:var(--accent-main);
  text-decoration:none;
  white-space:nowrap;
}

.loginOptions a:hover{
  text-decoration:underline;
}

.loginOptions input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid var(--stroke);
  background:var(--card);
  cursor:pointer;
  position:relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.loginOptions input[type="checkbox"]:checked{
  border:none;
  background:linear-gradient(135deg,var(--accent-main),var(--accent-light));
}

.loginOptions input[type="checkbox"]:hover {
  transform: scale(1.05); 
  box-shadow: 0px 0px 4px 0px var(--accent-main);
}


.loginOptions input[type="checkbox"]:checked::after{
  content:"✓";
  position:absolute;
  left:3px;
  top:-1px;
  font-size:12px;
  color:white;
}

/* botão */
.btnLogin{
  width:100%;
  height:42px;
  margin-top:2px;
  padding:0 14px;
  border:none;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  color:#fff;
  cursor:pointer;
  display:block;
 background: linear-gradient(180deg, var(--accent-light), var(--accent-main));
  transition:.2s ease;
}

.btnLogin:hover{
  transform:translateY(-1px);
}

/* rodapé */
.loginFooter{
  width:100%;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin-top:0;
  padding-bottom:8px;
}

.loginFooter a{
  color:var(--accent-main);
  text-decoration:none;
}

.loginFooter a:hover{
  text-decoration:underline;
}

/* =========================
   toast - Login
========================= */

.toastMsg{
  position:fixed;
  bottom:20px;
  right:20px;
  left:auto;
  min-width:200px;
  max-width:min(400px, calc(100vw - 32px));
  padding:10px 36px 10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--accent-main, #10b981);
  color: #fff;
  border:0;
  font-size:13px;
  font-weight:600;
  border-radius:50px;
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  z-index: 2147483647 !important;
  transition:opacity .25s ease, transform .25s ease;
}

.toastMsg__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  color:#fff;
}

.toastMsg__text{
  display:block;
  line-height:1.3;
}

.toastMsg__close{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  padding:0;
  opacity:.75;
}

.toastMsg__close:hover{
  opacity:1;
}

.toastMsg.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.toastMsg.success,
.toastMsg.error,
.toastMsg.info{
  background: var(--accent-main, #10b981);
  color:#fff;
}

/* =========================
   loading - Loading
========================= */

.loadingOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(45, 45, 45, 0.55); /* Cinza escuro alinhado ao padrão */
  backdrop-filter:blur(6px);
  z-index: 999999 !important; 
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.loadingOverlay.show{
  opacity:1;
  pointer-events:auto;
}

.loadingBox{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:30px 40px;
  border-radius:18px;
  background:rgba(45, 45, 45, 0.85); /* Cinza escuro na caixa central */
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.loadingSpinner{
  width:48px;
  height:48px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.08);
  border-top:4px solid var(--accent-main);
  animation:spin 1s linear infinite;
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

.loadingText{
  font-size:14px;
  font-weight:600;
  color:#fff;
  opacity:.8;
}


/* =========================
   Cadastro - Login
========================= */

.cadastroRow {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px; 
}

.cadastroRow .inputGroup {
  flex: 1;
  min-width: 0;
} 

#cadastroModal .modal-content, 
#cadastroModal .modal-dialog {
  max-width: 1100px !important; 
  width: 98% !important;
}

.cadastroRow .inputGroup:nth-child(1) {
  flex: 1.7 !important; 
} 

.cadastroRow .inputGroup:nth-child(2),
.cadastroRow .inputGroup:nth-child(3) {
  flex: 1.3 !important; 
} 

@media (max-width: 768px) {
  .cadastroRow {
    flex-direction: column;
  }
  .cadastroRow .inputGroup {
    flex: none !important;
    width: 100%;
  }
}

.cadastroChecks {
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  gap: 16px;             
  margin-top: 4px;       
  margin-bottom: 0px !important; 
  align-items: center;   
}

.cadastroChecks label {
  display: flex;
  align-items: center;   
  justify-content: center;
  text-align: center;
  width: 100%;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  cursor: pointer;       
}

.cadastroChecks a {
  color: var(--accent-main);
  text-decoration: none;
}

.cadastroChecks a:hover {
  text-decoration: underline;
}

.cadastroChecks input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 4px;
  border: 1px solid var(--stroke);
  background: var(--card);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  margin-top: 1px;
}

.cadastroChecks input[type="checkbox"]:hover {
  transform: scale(1.05); 
  box-shadow: 0px 0px 4px 0px var(--accent-main);
}


.cadastroChecks input[type="checkbox"]:checked {
  border: none;
  background: linear-gradient(135deg, var(--accent-main), var(--accent-light));
}

.cadastroChecks input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  left: 3px;
  top:-1px;
  font-size: 11px;
  color: #fff;
} 

#systemColorGradientCheck {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#systemColorGradientCheck:hover {
  transform: scale(1.05); 
  box-shadow: 0px 0px 4px 0px var(--accent-main);
  border-radius: 4px;
}


#cadastroModal .passwordField {
  display: flex;
  align-items: center; 
}

#cadastroModal .passwordField .inputIconLeft {
  width: 17px !important;  
  height: 17px !important; 
}

#cadastroModal .passwordField input {
  padding-left: 46px !important; 
}

#cadastroModal .modal-header {
  padding-bottom: 10px !important; 
}
#cadastroModal .modal-header h2 {
  margin-bottom: 2px !important;
}

#cadastroModal .inputGroup label {
  margin-bottom: 3px !important; 
}

#cadastroModal .passwordField input {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}



/* =========================
   ESTILOS DO MODAL (POPUP) DE RECUPERAÇÃO - Login
========================= */

.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 25, 0.65); 
  backdrop-filter: blur(8px);         
  -webkit-backdrop-filter: blur(8px); 
  z-index: 999999999 !important; /* Prioridade máxima global */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}



.modalOverlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modalContent {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 35px 30px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  position: relative;
  transform: translateY(20px); 
  transition: transform 0.3s ease;
}

.modalOverlay.show .modalContent {
  transform: translateY(0);
}

.closeModalBtn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  padding: 0 5px;
}

.closeModalBtn:hover {
  color: var(--text);
}

/* =========================
   RESPONSIVIDADE DA TELA DE LOGIN (CORREÇÃO DEFINITIVA) - Responsivo
========================= */


/* =========================
   1. CELULAR (Até 768px) - Responsivo
========================= */

@media (max-width: 768px) {
  .loginSplit {
    grid-template-columns: 1fr;
    height: auto;
    padding: 20px;
    gap: 0;
  }
  .loginRight, .loginRight::before { display: none; }
  .loginLeft { justify-content: center; width: 100%; padding: 0; }
  .loginLeftInner, .loginContainer { width: 100%; max-width: 400px; margin: 0 auto; justify-content: center; }
}

/* =========================
   2. TABLET (769px até 1024px) - Responsivo
========================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .loginSplit {
    width: min(960px, calc(100vw - 40px));
    height: auto;
    min-height: calc(100vh - 40px);
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 20px;
    margin: 20px auto; 
    align-items: center;
  }
  .loginLeftInner, .loginContainer { max-width: 380px; margin: 0 auto; }
  .logoBox { width: 100px; height: 60px; margin-bottom: 0px !important; }
  
  .loginRight { padding: 0 0 0 15px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  .loginVisual { width: 100%; height: 450px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  #loginSistemaImg { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
}

/* =========================
   3. NOTEBOOKS / TELAS MÉDIAS (1025px até 1440px) - Responsivo
========================= */

@media (min-width: 1025px) and (max-width: 1440px) {
  .loginSplit {
    width: min(1240px, calc(100vw - 24px));
    min-height: min(720px, calc(100vh - 12px));
    height: auto; 
    grid-template-columns: minmax(380px, 460px) minmax(380px, 1fr);
    gap: 28px;
    margin: 0 auto; 
    padding: 15px 0;
    align-items: center;
  }

  .loginLeft { justify-content: center; padding: 0; }
  .loginLeftInner, .loginContainer { width: 100%; max-width: 400px; margin: 0 auto; justify-content: center; transform: none; }
  .loginContainer { gap: 6px !important; }
  .logoBox { width: 110px; height: 70px; margin-bottom: 0px !important; }

  .loginRight { padding: 0 0 0 20px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  
  .loginVisual { width: 100%; height: clamp(450px, 80vh, 850px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
  #loginSistemaImg { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; opacity: .92; }
}

/* =========================
   4. MONITORES GRANDES E TVs (Acima de 1441px) - Responsivo
========================= */

@media (min-width: 1441px) {
  .loginSplit {
    width: min(1480px, calc(100vw - 40px));
    height: min(860px, calc(100vh - 24px));
    grid-template-columns: minmax(400px, 440px) minmax(620px, 1fr);
    gap: 48px;
    margin: 0 auto; 
    align-items: center;
  }

  .loginLeft { justify-content: center; padding: 0; }
  .loginLeftInner, .loginContainer { max-width: 440px; margin: 0 auto; transform: none; }


  .loginRight {
    padding: 0 0 0 40px; 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loginVisual {
    width: 100%;
    height: 100%;
    max-height: 860px; 
    margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }

  #loginSistemaImg {
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    object-position: center; 
    transform: none; 
    user-select: none; 
    cursor: pointer;
    opacity: .92;
  
  }  
}

/* =========================
   ESTADO: VETOR DE PLACEHOLDER (QUANDO NÃO TEM IMAGEM) - Login
========================= */

#loginSistemaImg.sem-imagem {
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 180px !important;
  opacity: 0.3;
  filter: grayscale(1);
}


  /* =========================
   COMPRESSÃO DOS CAMPOS (Foco no CADASTRO) - Login
========================= */

  .inputGroup{
    margin: 0 0 4px 0 !important; 
  }
  
  .inputGroup label{
    font-size:11px;
    margin-bottom: 2px !important;
  }

  .inputGroup input,
  .passwordField input{
    height: 36px !important; 
    font-size: 12px !important;
    border-radius: 8px !important;
  }

.loginOptions {
    margin-top: -4px !important; /* Aproxima do edit de senha */
    margin-bottom: 2px !important;
    font-size: 11px !important;
  }
  
  input[type="checkbox"] + span,
  label:has(input[type="checkbox"]) {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    font-size: 11px !important;
  }

  .btnLogin{
    height: 38px !important;
    margin-top: 6px !important;
    font-size: 13px !important;
  }

  .btnLogin:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: var(--muted) !important;
  }

  .loginFooter{ font-size:11px; margin-top: 6px !important; padding-bottom: 0px !important; }

  .boxResetInfo { margin-top: 4px !important; padding: 6px 12px !important; }
  .barResetContainer { margin-bottom: 6px !important; }
  .itemResetReq { font-size: 12px !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
  .btnResetAction { margin-top: 8px !important; height: 38px !important; font-size: 13px !important; border-radius: 9px !important; }
  .inputGroup[style*="margin-top"] { margin-top: 8px !important; }


  /* =========================
   ANIMAÇÃO DA BARRA DE FORÇA DA SENHA - Login / Reset
========================= */

  #cadastroModal .boxResetInfo {
    opacity: 0;
    visibility: hidden;
    max-height: 0; 
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  }

  #cadastroModal .boxResetInfo.show-animado {
    opacity: 1;
    visibility: visible;
    max-height: 150px; 
    margin-top: 5px;
    margin-bottom: 10px;
  }


/* =========================
   ABA RESET DE SENHA / CADASTRO - PADRÃO DE TEMA - Login / Reset
========================= */


.boxResetInfo {
  margin-top: 15px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--card) !important; 
  border: 1px solid var(--stroke) !important; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.boxResetInfo .itemResetReq {
  color: var(--muted) !important; 
}

.boxResetInfo .iconResetDot {
  background: transparent !important;
  border: 1px solid var(--stroke) !important; 
}

.itemResetReq.valid {
  color: var(--text) !important; 
}
.itemResetReq.valid .iconResetDot {
  background: var(--accent-main) !important;
  border-color: var(--accent-main) !important;
}

.barResetContainer {
  width: 100%;
  height: 5px;
  background: var(--stroke); 
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.barResetFill {
  height: 100%;
  width: 0%;
  transition: width 0.4s ease, background-color 0.4s ease;
}

.barReset-weak   { background-color: #ef4444 !important; } 
.barReset-medium { background-color: #f59e0b !important; } 
.barReset-strong { background-color: #10b981 !important; } 

.itemResetReq {
  display: flex;
  align-items: center;
  font-size: 11px;
  margin-bottom: 5px;
  font-weight: 400;
}

.iconResetDot {
  margin-right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.btnResetAction {
  background: var(--accent-main) !important;
  color: #ffffff !important;
  border: none;
  padding: 12px;
  border-radius: var(--radius);
  width: 100%;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: opacity 0.2s;
}

.btnResetAction:hover {
  opacity: 0.9;
} 

.btnResetAction:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

.inputResetError {
  border-color: #ef4444 !important; 
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.inputResetError + .inputIconLeft {
  filter: sepia(1) saturate(100) hue-rotate(-50deg);
} 

.loginPage {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; 
}

html:not(.fundo-gradiente-home) .loginPage {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

.passwordField input {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--stroke) !important;
}


/* =========================
   LOGIN SOCIAL (MEIO DA TELA - BLINDADO) - Login
========================= */

html.hide-social-login .socialLoginContainer,
html.hide-social-login #cadastroModal .socialLoginContainer {
  display: none !important;
}

.socialLoginContainer {
  width: 100%;
  margin-top: 0px !important;
  margin-bottom: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.socialButtons {
  display: flex !important;
  gap: 15px !important;
  margin-bottom: 5px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.btnSocial {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important; 
  background: transparent !important; 
  border: 1px solid var(--stroke) !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 0 !important; 
}

.btnSocial:hover {
  background-color: var(--stroke) !important; 
  transform: translateY(-2px); 
}

/* =========================
   COR DAS IMAGENS/ÍCONES (MÁGICA DO TEMA) - Login
========================= */

.btnSocial img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(0.8); 
  transition: filter 0.3s ease;
  display: block !important;
} 

.btnSocial:hover img {
  filter: brightness(0) invert(1); 
}

/* --- TEMA CLARO --- */
html[data-theme="white"] .btnSocial {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="white"] .btnSocial:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="white"] .btnSocial img {
  filter: brightness(0) opacity(0.6) !important; 
}
html[data-theme="white"] .btnSocial:hover img {
  filter: brightness(0) opacity(1) !important; 
}


/* =========================
   A LINHA E O TEXTO DIVISÓRIO - Login
========================= */

.socialSeparator {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}

.socialSeparator::before,
.socialSeparator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--stroke); 
}

.socialSeparator span {
  padding: 0 10px; 
}


/* =========================
   RODAPÉ FLUTUANTE DE REDES SOCIAIS (TEMA CLARO E TOOLTIP AJUSTADO) - Login
========================= */


.footer-sociais {
  position: fixed;
  bottom: 25px; 
  right: 25px;  
  display: flex;
  gap: 12px;
  z-index: 1000; 
}


.icon-social-footer .tooltiptext {
  visibility: hidden;
  position: absolute;
  width: auto;
  min-width: 100px;
  background-color: #333; 
  color: #fff; 
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1001;
  white-space: nowrap; 
  font-size: 13px;
  bottom: 110%; 
  left: 50%;
  transform: translateX(-50%);
}

.icon-social-footer:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.icon-social-footer .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; 
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent; 
}

.icon-social-footer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--stroke); 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.icon-social-footer:hover {
  background-color: var(--stroke); 
  transform: translateY(-3px); 
}

.icon-social-footer img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(0.8); 
  transition: filter 0.3s ease;
}

.icon-social-footer:hover img {
  filter: brightness(0) invert(1); 
}

.whitePage .icon-social-footer {
  border-color: #777 !important; 
}

.whitePage .icon-social-footer img {
  filter: brightness(0) opacity(0.7) !important; 
}

.whitePage .icon-social-footer:hover {
  background-color: #eaeaea !important; 
  border-color: #333 !important; 
}

.whitePage .icon-social-footer:hover img {
  filter: brightness(0) opacity(1) !important; 
}  



/* =========================
   RODAPÉ FLUTUANTE DE REDES SOCIAIS (MESMO ESTILO DA HOME) - Login
========================= */

.footer-sociais {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  gap: 6px; 
  z-index: 1000;
} 

.boxSocialFooter img.menuIcon2 {
  width: 19px !important; 
  height: 19px !important;
}

.boxSocialFooter {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 4px; 
}

.boxSocialFooter img {
  transition: opacity 0.25s ease;
  opacity: 0.8; 
}

.boxSocialFooter:hover img {
  opacity: 0.2; 
}

/* =========================
   INVERSÃO DO TOOLTIP (PARA NÃO CORTAR NA BARRA DO WINDOWS) - Login
========================= */

.footer-sociais .tooltip::after {
  bottom: 140% !important; 
  top: auto !important;
  transform: translateX(-50%) translateY(5px);
}

.footer-sociais .tooltip::before {
  bottom: calc(140% - 6px) !important;
  top: auto !important;
  transform: translateX(-50%) translateY(5px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: var(--accent-main) transparent transparent transparent;
}


.footer-sociais .tooltip:hover::after {
  transform: translateX(-50%) translateY(0); 
}

.footer-sociais .tooltip:hover::before {
  transform: translateX(-50%) translateY(0); 
}

/* =========================
   Z-INDEX: MODAL DE CONFIRMAÇÃO E TOAST ACIMA DE TUDO - Login
========================= */

.custom-modal-backdrop { z-index: 99999999 !important; }
.toastMsg { z-index: 999999999 !important; }

/* =========================
   AJUSTES PONTUAIS — TELA DE LOGIN E MODAL DE CADASTRO - Login
========================= */


/* Link wrapper da imagem lateral do sistema (banner clicável) */
#linkSistemaUrl {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Modal de Cadastro — largura maior que o modal padrão */
#cadastroModal .modalContent {
  max-width: 680px;
}

/* Barra de força da senha dentro do modal de cadastro */
#cadastroModal .boxResetInfo .barResetContainer {
  margin-top: 10px;
  margin-bottom: 0;
}

/* Rodapé "Já possui conta?" do modal de cadastro */
#cadastroModal .loginFooter {
  margin-top: 15px;
}

/* =========================
   OPÇÕES LOGIN - Login
========================= */
.loginOptions:has(#lembrarLogin) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
}

.loginOptions:has(#lembrarLogin) label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.loginOptions:has(#lembrarLogin) a {
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* =========================
   BOTÃO ENTRAR - Login
========================= */
.loginSplit .loginContainer > .btnLogin {
  background: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  background-image: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  color: #fff !important;
  border: none !important;
}

/* =========================
   BOTÕES LOGIN - Login
========================= */
.loginContainer .btnLogin,
.modalContent.loginContainer .btnLogin,
#btnRecuperar,
#cadastroModal .btnLogin {
  background: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  background-image: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  color: #fff !important;
  border: none !important;
}

.loginContainer .btnLogin:disabled,
.modalContent.loginContainer .btnLogin:disabled,
#btnRecuperar:disabled {
  background: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  background-image: linear-gradient(180deg, var(--accent-light), var(--accent-main)) !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.loginSplit .loginContainer .inputGroup input,
.loginSplit .loginContainer .passwordField input {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.loginSplit .loginContainer > .btnLogin {
  height: 38px !important;
}

/* Cadastro e recuperacao seguem a mesma altura compacta dos botoes. */
#cadastroModal .inputGroup input,
#cadastroModal .passwordField input,
#recoverModal .inputGroup input,
#recoverModal .passwordField input,
#cadastroModal .btnLogin,
#recoverModal .btnLogin {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box;
}

#cadastroModal .inputGroup input,
#cadastroModal .passwordField input,
#recoverModal .inputGroup input,
#recoverModal .passwordField input {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}







   

/* =========================
   Z-INDEX GLOBAL MODAIS / LOADING - Todas as páginas
========================= */
.loadingOverlay,
.loadingOverlay.show {
  z-index: 2147483647 !important;
}

.custom-modal-backdrop,
.custom-modal-backdrop.show,
.modalOverlay,
.modalOverlay.show,
.modalFiltroOverlay,
.modalFiltroOverlay.show,
.cad-modal {
  z-index: 2147483646 !important;
}

.toastMsg,
.cad-fixed-tooltip {
  z-index: 2147483647 !important;
}