/* assets/itsolution24/css/login_custom.css */

:root {
    --brand-color: #10b981;
    --brand-color-dark: #0d9468;
    --brand-color-light: rgba(16, 185, 129, 0.1);
}
body {
    background-color: #f8f9fa; /* bg-light */
}
.bg-brand { 
    background-color: var(--brand-color) !important; 
}
.btn-brand { 
    background-color: var(--brand-color); 
    border-color: var(--brand-color); 
    color: #fff; 
    font-weight: 600; 
    padding: 0.65rem 1rem; 
}
.btn-brand:hover { 
    background-color: var(--brand-color-dark); 
    border-color: var(--brand-color-dark); 
    color: #fff; 
}
.btn-warning { 
    font-weight: 600; 
    padding: 0.65rem 1rem; 
    color: #000; 
}
.btn-warning:hover { 
    color: #000; 
    background-color: #ffca2c; 
    border-color: #ffc720; 
} 
.link-brand { 
    color: var(--brand-color); 
    text-decoration: none; 
}
.link-brand:hover { 
    color: var(--brand-color-dark); 
}
.form-control:focus, 
.form-check-input:focus { 
    border-color: var(--brand-color); 
    box-shadow: 0 0 0 0.25rem var(--brand-color-light); 
}
.form-check-input:checked { 
    background-color: var(--brand-color); 
    border-color: var(--brand-color); 
}
.login-card {
    border: 1px solid #dee2e6; 
    border-radius: 1rem; 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); 
    overflow: hidden; /* Importante para a barra de progresso */
}
.min-vh-100-sm { 
    min-height: 100vh; 
}
@media (min-width: 992px) { 
    .min-vh-100-lg { 
        min-height: 100vh; 
    }
    .col-lg-6-animated { 
        overflow: hidden; 
    }
}
.form-icon-wrapper {
    position: relative; 
}
.form-icon-wrapper .form-icon {
    position: absolute;
    left: 1.25rem; 
    top: 50%;
    transform: translateY(-50%); 
    color: #adb5bd; 
    pointer-events: none; 
    z-index: 3; 
    font-size: 1.2rem;
}
.form-icon-wrapper .form-control {
    padding-left: 3.2rem; 
    padding-right: 3.2rem; 
    height: 48px; 
    border-radius: 0.75rem; 
    position: relative; 
    z-index: 2; 
}
.form-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem; 
}
.form-label-wrapper .form-label {
    margin-bottom: 0; 
}
.form-icon-wrapper .toggle-password {
    position: absolute;
    right: 1.25rem; 
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd; 
    cursor: pointer; 
    z-index: 3;
    font-size: 1.2rem; 
}
.form-icon-wrapper .toggle-password.bi-eye-fill {
    color: #212529; 
}
@keyframes pulse-dots { 
    0%, 100% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.8; transform: scale(1.1); } 
}
.dots-container { position: absolute; inset: 0; opacity: 0.1; overflow: hidden; }
.dot { 
    position: absolute; 
    width: 0.5rem; height: 0.5rem; 
    background-color: #fff; 
    border-radius: 9999px; 
    animation-name: pulse-dots;
    animation-iteration-count: infinite;
}
#register-logo {
    max-width: 320px; 
    width: 100%;
    height: auto;
    border-radius: 12px; 
    background-color: #fff; 
    padding: 1rem; 
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.2), 
        0 6px 20px rgba(0, 0, 0, 0.19); 
}

/* ============================================= */
/* CSS PARA O INDICADOR DE ETAPAS (Barra Seta)   */
/* ============================================= */
.step-row {
    width: 100%;
    height: 4rem; /* 40px de altura */
    display: flex;
    align-items: center;
    box-shadow: 0 1px 5px -1px rgba(0,0,0,0.1); 
    position: relative;
    background: #f8f9fa; /* Fundo cinza claro */
}

.step-col {
    width: 33.33%;
    text-align: center;
    color: #6c757d; /* Cor inativa (cinza escuro) */
    font-weight: 500;
    font-size: 1.2rem; /* 12px */
    text-transform: uppercase;
    position: relative;
    z-index: 2; /* Fica na frente da barra */
    transition: color 0.4s ease;
}

/* A barra de progresso verde */
#progress {
    position: absolute;
    height: 100%;
    width: 33.33%; /* Começa na Etapa 1 */
    background: var(--brand-color); /* SUA COR VERDE! */
    transition: all 0.5s ease-in-out;
    z-index: 1; /* Fica atrás do texto, mas acima do fundo */
}

/* A "seta" na ponta da barra verde */
#progress::after {
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    border-top: 2rem solid transparent; /* Metade da altura (4rem / 2) */
    border-bottom: 2rem solid transparent; /* Metade da altura */
    border-left: 2rem solid var(--brand-color); /* SUA COR VERDE! */
    top: 0;
    right: -2rem; /* Posiciona a seta para fora da barra */
}

/* Estilo da Etapa ATIVA */
/* Torna o texto branco quando a barra verde está sobre ele */
.step-col.active {
    color: white;
    font-weight: 700;
}

/* ============================================= */
/* AJUSTES TOASTR (Opcional, mas recomendado)  */
/* ============================================= */
.toast-top-right {
    top: 20px !important; 
    right: 20px !important;
    z-index: 1060 !important; /* Acima do modal */
}

/* ============================================= */
/* CSS PARA O LOGO DO FORMULÁRIO DE LOGIN (Responsivo) */
/* ============================================= */

/* 1. Base (Mobile-First): < 768px */
/* Este é o tamanho para celulares */
#login-form-logo {
    max-height: 70px; /* Tamanho que você pediu para mobile */
    width: auto; /* Mantém a proporção */
    transition: max-height 0.2s ease; /* Efeito suave */
}

/* 2. Tablets (Medium): 768px e acima */
@media (min-width: 768px) {
    #login-form-logo {
        max-height: 70px; /* Um bom tamanho intermediário para tablets */
    }
}

/* 3. Desktops (Large): 992px e acima */
@media (min-width: 992px) {
    #login-form-logo {
        max-height: 80px; /* O seu tamanho "perfeito" para desktop */
    }
}

/* 4. Desktops Full HD (Extra Large): 1200px e acima */
@media (min-width: 1200px) {
    #login-form-logo {
        max-height: 100px; /* Um tamanho maior para telas Full HD (1920px) */
    }
}

/* =================================================== */
/* CSS PARA A ANIMAÇÃO SVG RESPONSIVA (Mobile-First) */
/* =================================================== */

/* 1. Base (Mobile-First): < 768px */
/* Este é o tamanho para celulares */
#login-svg-animation-container svg {
    max-width: 300px; /* Tamanho bom para mobile, não ocupa a tela toda */
    height: auto; /* Mantém a proporção */
    transition: max-width 0.3s ease; /* Efeito suave ao redimensionar */
}

/* 2. Tablets (Medium): 768px e acima */
@media (min-width: 768px) {
    #login-svg-animation-container svg {
        max-width: 400px; /* Aumenta um pouco para tablets */
    }
}

/* 3. Desktops (Large): 992px e acima */
@media (min-width: 992px) {
    #login-svg-animation-container svg {
        max-width: 500px; /* Tamanho ideal para a coluna esquerda do desktop */
    }
}

/* 4. Desktops Full HD (Extra Large): 1200px e acima */
@media (min-width: 1200px) {
    #login-svg-animation-container svg {
        max-width: 700px; /* Um pouco maior para telas largas, para preencher melhor */
    }
}

/* ============================================= */
/* CSS PARA A TELA DE BLOQUEIO (LOCKSCREEN)    */
/* ============================================= */

/* Estilo para o Logo no topo da página */
#lockscreen-logo {
  max-height: 50px; /* Mais sutil, como na imagem */
  width: auto;
  margin-bottom: 2rem;
}

/* Estilo para o círculo do Avatar */
.lockscreen-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #e9ecef; /* Fundo do placeholder */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para a imagem se ajustar */
  border: 4px solid #fff; /* Borda branca */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra suave */
}

/* Estilo para a IMAGEM do avatar (se o usuário tiver) */
.lockscreen-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cubra o círculo */
}

/* Estilo para o ÍCONE placeholder (se não tiver imagem) */
.lockscreen-avatar .bi-person-fill {
  font-size: 4rem; /* Tamanho do ícone */
  color: #ced4da; /* Cor do ícone */
}

/* Estilo para o Rodapé (Footer) */
.lockscreen-footer {
  font-size: 0.9rem;
  color: #6c757d; /* text-muted */
}

.lockscreen-body {
    /* Define a cor de fundo (que antes vinha do 'bg-light') */
    background-color: #f8f9fa; 
    
    /* Define a imagem de fundo. 
    O caminho '../' sobe da pasta 'css' para a pasta 'itsolution24',
    depois entra em 'img/bg/'.
    */
    background-image: url('../img/bg/fundobg.avif'); /* Usando .avif como você mencionou */
    
    background-repeat: no-repeat; /* Para não repetir a imagem */
    background-position: center center; /* Centraliza a imagem */
    background-size: cover; /* Faz a imagem cobrir a tela inteira */
    background-attachment: fixed; /* Opcional: fixa o fundo durante o scroll */
}



/* ============================================= */
/* CSS PARA A TELA DE BLOQUEIO (LOCKSCREEN)    */
/* ============================================= */

/* Estilo para o Logo no topo da página */
#lockscreen-logo {
  max-height: 50px; 
  width: auto;
  margin-bottom: 0.5rem; /* <-- DIMINUA ESTE VALOR (estava 2rem) */
}

/* Estilo do Card */
.login-card {
    border: 1px solid var(--brand-color); /* <-- ADICIONE/MUDE A COR DA BORDA */
    border-radius: 1rem; 
    
    /* ADICIONE ESTA LINHA PARA O EFEITO NEON/BRILHO */
    box-shadow: 0 0 15px var(--brand-color-light); 
    
    overflow: hidden; 
}