/*
// =====================================================================================
// Projeto: DoctorTech - Assistência Técnica
// Dominio: www.doctortechbr.com.br
// Autor: David Reis
// Caminho: /assistec/assets/css/login-translucido.css
// Função: Exibir os efeitos de bolhas e container translucido (modo garrafa)
// Arquivo: CSS para a página de login.php (CSS)
// Configurações iniciais Personalizadas (Cores do Logo)
// =====================================================================================
*/

/* === Loader não será exibido apenas na página de login === */
.login-page #global-loader {
  display: none !important;
}

/* === Card Login Centralizado na Tela (container AVÔ) === */
body.login-translucido .card-sigin-main {
  
  display: flex;		/* Torna o elemento um container flexível para alinhar seu conteúdo com Flexbox */
  align-items: center;		/* Alinha verticalmente o conteúdo ao centro do container (no eixo Y) */
  justify-content: center;	/* Alinha horizontalmente o conteúdo ao centro do container (no eixo X) */
  min-height: 100vh;		/* Garante que o container ocupe no mínimo 100% da altura da tela (viewport) */
  width: 100%;			/* Faz o container ocupar toda a largura disponível */
  padding: 40px 20px;		/* Adiciona espaçamento interno: 40px em cima e embaixo, 20px nas laterais */
  box-sizing: border-box;	/* Inclui o padding na largura total, evitando que ultrapasse o limite do container */
}

/* === Card Translucido (container PAI) === */
body.login-translucido .card-sigin {
  
  background: rgba(42, 46, 63, 0.3);		/* Fundo escuro semi-transparente (translúcido) */
  backdrop-filter: blur(8px);			/* Aplica um desfoque no que estiver atrás do card (efeito vidro fosco) */
  -webkit-backdrop-filter: blur(8px);		/* O prefixo -webkit- é necessário para compatibilidade com alguns navegadores */
  border-radius: 15px;				/* Cantos arredondados do card */
  padding: 0 15px;				/* Espaço interno de 15px apenas nas laterais (direita e esquerda) */
  margin: 0 auto;				/* Centraliza horizontalmente o card dentro do seu container pai */
  color: #F5F5F5;				/* Cor do texto: branco (#fff) */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);	/* Sombra ao redor do card, dando efeito de elevação */
  max-width: 350px;				/* Limita a largura máxima do card (controle horizontal) */
  width: 100%;					/* Faz com que o card ocupe 100% da largura disponível, até o limite do max-width */
  box-sizing: border-box;			/* Garante que padding e borda sejam incluídos no cálculo da largura total */
  text-overflow: ellipsis;			/* Se o conteúdo ultrapassar a largura do container, ele será cortado com "..." (apenas se houver overflow visível) */
  white-space: nowrap;				/* Impede que o texto quebre de linha (usado com o ellipsis acima) */
  display: flex;				/* Torna o card um container flexível para organizar os elementos internos */
  flex-direction: column;			/* Organiza os elementos internos em coluna (de cima para baixo) */
  align-items: center;				/* Centraliza horizontalmente todos os elementos filhos dentro do card */
  text-align: left;				/* Alinha o texto à esquerda dentro dos elementos internos */
}

/* === Campos de entrada (Form Usuário e Senha) === */
body.login-translucido .card-sigin .form-control {
  
  background-color: rgba(255,255,255,0.1);		/* Fundo branco translúcido (10% opacidade), deixa o input semi-transparente */
  border: 1px solid rgba(255,255,255,0.3);		/* Borda branca suave com 30% de opacidade, discreta e moderna */
  color: #FFFFFF;					/* Cor do texto dentro do campo: branco (#fff) */
  width: 100%;						/* O input ocupa 100% da largura disponível do container pai (.card-sigin) */
  max-width: 320px;					/* Remove qualquer limitação de largura máxima herdada — permite expandir totalmente. */
  margin: 0 auto 15px auto;				/* Margens: 0 em cima, 15px embaixo, 'auto' nas laterais centraliza o input horizontalmente */
  padding-left: 10px;					/* Espaço interno à esquerda para o texto não colar na borda */
  padding-right: 42px;					/* Espaço interno à direita, geralmente usado para acomodar um ícone (como o "olhinho" de mostrar senha) */
  box-sizing: border-box;				/* Inclui padding e borda no cálculo da largura total do input (evita que ultrapasse o limite) */
  font-size: 14px;					/* Tamanho da fonte dentro do campo: 14 pixels */
  text-align: left;					/* Alinha o texto digitado à esquerda (padrão, mas aqui é declarado explicitamente) */
}

/* === Contorno dos Forms (Campos Usuário e Senha) === */
body.login-translucido .form-control:focus {
  
  border-color: #8C7A50 !important;				/* Quando o campo está em foco (selecionado), a borda fica laranja (#FFA500) */
  box-shadow: 0 0 0 0.15rem rgba(255,165,0,0.4) !important;	/* Adiciona um brilho/sombra externa em volta do campo ao focar, com cor laranja semi-transparente. */
}

/* === Labels (Ícones Usuário e Senha) ===  */
body.login-translucido .card-sigin label {
  
  color: #EAE3CA;		/* Define a cor do texto do label como branco (#fff) */
  font-size: 14px;		/* Define o tamanho da fonte do label como 14 pixels */
  margin-bottom: 5px;		/* Adiciona um espaço de 5px abaixo do label — separação visual entre o label e o campo de input */
  display: block;		/* Faz o label se comportar como um bloco, ocupando toda a largura disponível na linha */
  width: 100%;			/* O label ocupa 100% da largura do seu container pai */
  max-width: 300px;		/* Limita a largura máxima do label a 300px, evitando que fique esticado demais */
  text-align: left;		/* Alinha o texto do label à esquerda, garantindo consistência visual */
}


/* === Parte 1 – Ícone do Olho (Toggle Senha) === */
 body.login-translucido .field-icon {
  
  position: absolute;			/* Posiciona o ícone de forma absoluta dentro do campo (precisa de um pai com position: relative) */
  top: calc(50% + 30px);		/* ex: 4px para baixo — ajuste à vontade */
  right: 12px;				/* Afasta o ícone 12px da borda direita do campo */
  font-size: 18px;			/* Tamanho do ícone — ajustável conforme seu design */
  cursor: pointer;			/* Mostra o cursor de "mãozinha" para indicar que o ícone é clicável */
  color: #6C6A6A;			/* Cor branca com 60% de opacidade (255,255,255,0.6) — discreto e harmonioso com o fundo translúcido */

}

/* === Parte 2 – Container do Campo de Senha (.form-group) === */
body.login-translucido .card-sigin .form-group {
  
  width: 100%;				/* Ocupa toda a largura do card ou do seu container pai */
  max-width: 36ch;			/* Limita a largura máxima com base em caracteres (~36 caracteres visíveis) */
  margin: 0 auto 15px auto;		/* Centraliza horizontalmente e dá um espaçamento inferior de 15px */
  position: relative;			/* Torna este elemento o "pai" posicional do ícone com position: absolute. */
}


/* === Checkbox para salvar o acesso na mesma linha === */
body.login-translucido .form-group input[type="checkbox"].form-check-input,
body.login-translucido .form-group label[for="salvar_acesso"] {
  
  display: inline-block;	/* Faz com que o checkbox e o label fiquem lado a lado na mesma linha (em vez de empilhar) */
  vertical-align: middle;	/* Alinha verticalmente o checkbox e o label no centro, para melhor estética */
}


/* === Checkbox Aplicando a cor no checkbox (estilo personalizado) === */
input[type="checkbox"] {
  accent-color: #8C7A50;
}

body.login-translucido .form-group {
  white-space: nowrap;		/* o checkbox e o texto do label fiquem sempre na mesma linha */
     				
}


/* === Botão de Entrar === */
body.login-translucido .card-sigin button[type="submit"] {
  
  display: block;		/* Faz o botão se comportar como um bloco, ou seja, ocupa toda a largura disponível e quebra para uma nova linha */
  width: 100%;			/* O botão ocupa 100% da largura do seu container pai */
  max-width: 300px;		/* Limita a largura máxima do botão a 300px — evita que ele fique muito esticado em telas maiores */
  margin-top: 20px;		/* Adiciona um espaço de 20px acima do botão — separa ele dos elementos acima (como inputs) */
}

/* === Responsivo Celulares e Tablets === */
@media (max-width: 768px) {	

  body.login-translucido .card-sigin {
    max-width: 90%;			/* O card agora ocupa até 90% da largura da tela — ideal para dispositivos menores */
    padding: 20px;			/* Reduz o espaçamento interno do card para caber melhor em telas pequenas */
  }

  body.login-translucido .card-sigin .form-control,
  body.login-translucido .card-sigin button,
  body.login-translucido .card-sigin .form-group,
  body.login-translucido .card-sigin label {
    
    max-width: 100%;			/* Garante que todos esses elementos (inputs, botões, grupos de formulário e labels)
       					possam se expandir até 100% da largura disponível — importante para que o layout
       					fique fluido e não fique "apertado" em telas menores */
  }
}

/* === Botão "Entrar" estilo Banco Inter === */
body.login-translucido .card-sigin button[type="submit"] {
  
  background-color: #947E50;				/* Cor de fundo marrom escuro (#4E342E ) — lembra tons usados pelo Banco Inter para contraste elegante */
  color: #EAE3CA;					/* Cor do texto: laranja vibrante (#FFA500) — cor principal do Banco Inter, chama atenção e gera contraste */
  border: none;							/* Remove qualquer borda padrão do botão (deixa o visual mais limpo) */
  font-weight: bold;						/* Deixa o texto do botão em negrito — dá mais destaque e peso visual */
  width: 100%;							/* O botão ocupa toda a largura disponível do seu container pai */
  max-width: 300px;						/* Limita a largura máxima do botão para manter proporção agradável mesmo em telas largas */
  margin-top: 20px;						/* Espaço de 20px acima do botão — separação visual dos campos de login */
  padding: 10px 0;						/* Espaço interno: 10px em cima e embaixo, 0 nas laterais — botão fica alto e largo */
  border-radius: 5px;						/* Arredonda levemente os cantos do botão — estilo moderno e amigável */
  font-size: 16px;						/* Tamanho da fonte do texto do botão — um pouco maior para legibilidade e destaque */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;	/* Adiciona uma transição suave ao mudar cor de fundo ou sombra (efeito de hover, foco etc.) */
}

/* === Efeito ao passar o mouse (hover) === */
body.login-translucido .card-sigin button[type="submit"]:hover {
  background-color: #8C7A50;			/* Marrom mais escuro (#3E2723) */
}

/* === COR DE FOCO (ao clicar ou usar tab) === */
body.login-translucido .card-sigin button[type="submit"]:focus {
  outline: none;				/* Remove o contorno azul padrão */
  box-shadow: 0 0 0 3px #EAE3CA;		/* Contorno laranja (#FFA500)*/
}

/* === DOCTORTECH - Efeito visual: Bolhas animadas de fundo da página Login === */
.square-box {
  
  position: fixed;		/* A div fica fixada na tela, mesmo ao rolar a página — cobre sempre toda a viewport */
  top: 0;   
  left: 0;			/* Posiciona a div no canto superior esquerdo da tela */
  width: 100%;
  height: 100%;			/* Faz com que a div cubra 100% da largura e altura da tela — fundo total */
  z-index: 0;			/* Coloca a div atrás de todos os outros elementos visuais da página */
  overflow: hidden;		/* Garante que qualquer conteúdo que ultrapasse a área da div (como bolhas animadas) seja cortado */
  pointer-events: none;		/* Impede que o fundo interaja com o mouse — o usuário pode clicar normalmente nos elementos acima */

}

.square-box div {
  
  position: absolute;				/* Cada bolha é posicionada livremente dentro da .square-box — necessário para animar em qualquer direção */
  width: 50px;
  height: 50px;					/* Define o tamanho da bolha como 50x50 pixels */
  background: transparent;			/* Nenhum preenchimento interno — a bolha é só um "anel", não um círculo sólido */
  border: 5px solid rgba(255, 255, 255, 0.3);	/* Cria a aparência da bolha com uma borda branca semi-transparente (30% de opacidade) */
  border-radius: 35px;				/* Arredonda os cantos para formar um círculo. */
    
}

/* Animações individuais das bolhas */
.square-box div:nth-child(1)  { top: 12%; left: 42%; animation: animate 10s linear infinite; }
.square-box div:nth-child(2)  { top: 70%; left: 50%; animation: animate 7s linear infinite; }
.square-box div:nth-child(3)  { top: 17%; left: 6%;  animation: animate 9s linear infinite; }
.square-box div:nth-child(4)  { top: 20%; left: 60%; animation: animate 10s linear infinite; }
.square-box div:nth-child(5)  { top: 88%; left: 10%; animation: animate 6s linear infinite; }
.square-box div:nth-child(6)  { top: 80%; left: 70%; animation: animate 12s linear infinite; }
.square-box div:nth-child(7)  { top: 60%; left: 80%; animation: animate 15s linear infinite; }
.square-box div:nth-child(8)  { top: 32%; left: 25%; animation: animate 16s linear infinite; }
.square-box div:nth-child(9)  { top: 20%; left: 80%; animation: animate 10s linear infinite; }
.square-box div:nth-child(10) { top: 40%; left: 72%; animation: animate 5s linear infinite; }
.square-box div:nth-child(11) { top: 50%; left: 30%; animation: animate 6s linear infinite; }
.square-box div:nth-child(12) { top: 65%; left: 16%; animation: animate 9s linear infinite; }
.square-box div:nth-child(13) { top: 45%; left: 3%;  animation: animate 14s linear infinite; }
.square-box div:nth-child(14) { top: 47%; left: 55%; animation: animate 3s linear infinite; }
.square-box div:nth-child(15) { top: 79%; left: 90%; animation: animate 8s linear infinite; }

/* Keyframe da animação */
@keyframes animate {
  
  0% {
    transform: scale(0) translateY(0) rotate(0);
    /* Início da animação:
       - scale(0): bolha começa "invisível" (sem tamanho),
       - translateY(0): sem movimento vertical ainda,
       - rotate(0): sem rotação inicial */

    opacity: 1;
    /* Totalmente visível no início */
  }

  100% {
    transform: scale(1.3) translateY(-90px) rotate(360deg);
    /* Final da animação:
       - scale(1.3): bolha cresce 30% do tamanho original,
       - translateY(-90px): sobe 90 pixels na tela,
       - rotate(360deg): faz uma rotação completa */

    opacity: 0;
    /* Fica totalmente invisível ao final — dá o efeito de "sumir no ar" */
  }
}