/* -- public/css/index.css								
/* ===================================================
   = DEFINE O ESTILO ESPECÍFICO DA PÁGINA			 = 
   =================================================== 	*/
/*
body {													/* 	Muda o fundo padrão de entrada */
	background-image: url('../img/fundo8w0.jpg');
}
.login-btn{												/*	Botão para a modal de login*/
  background:var(--primary);
  color:#fff;
  border:none;
  padding:0.55rem 1.1rem;
  border-radius:0.5rem;
  cursor:pointer;
  font-weight:500;
}
.login-btn:hover{ background:var(--primary-h); }		/*	Efeito ao passar o mouse no Botão de login*/

/* ---------- Conteúdo principal ---------------------------- */
.main-content{
  max-width:900px;
  margin:2rem auto;
  padding:0 1rem;
}
.placeholder{
  margin-top:1.5rem;
  padding:1.5rem;
  background:#fff;
  border-radius:0.75rem;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
}
/* ---------- Modal de login -------------------------------- */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding:1rem;
  z-index:100;
}
.overlay.hidden{ display:none; }

.login-modal{
  width:320px;
  background:var(--card-bg);
  border-radius:0.75rem;
  box-shadow:0 4px 18px rgba(0,0,0,.1);
  padding:2rem 1.5rem 2.4rem;
  position:relative;
}
.modal-title{
  text-align:center;
  margin-bottom:1.25rem;
  font-size:1.4rem;
}
/* botão ✕ */
.close-btn{
  position:absolute;
  top:0.6rem;
  right:0.6rem;
  background:none;
  border:none;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
}
.close-btn:hover{ color:var(--text); }

/* formulário */
form{ display:grid; gap:1rem; }
input{
  width:100%;
  padding:0.75rem;
  border:1px solid #d0d7de;
  border-radius:0.5rem;
  font-size:1rem;
}
input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 50%, transparent);
}
button{
  padding:0.8rem;
  background:var(--primary);
  color:#fff;
  font-size:1rem;
  font-weight:500;
  border:none;
  border-radius:0.5rem;
  cursor:pointer;
  transition:background .2s ease;
}
button:hover{ background:var(--primary-h); }

.register-link{
  margin-top:1.25rem;
  font-size:0.9rem;
  color:var(--muted);
  text-align:center;
}
.register-link a{ color:var(--primary); text-decoration:none; }

/* ---------- Acessibilidade -------------------------------- */
.sr-only {
  position: absolute !important;   /* Remove o elemento do fluxo normal da página e força a posição absoluta, ignorando heranças de estilo */
  width: 1px; height: 1px;         /* Define largura e altura mínimas, deixando o elemento quase invisível */
  padding: 0; margin: -1px;        /* Remove preenchimento e usa margem negativa para "tirar" qualquer espaço extra em volta */
  overflow: hidden;                /* Esconde qualquer conteúdo que ultrapasse os limites do elemento */
  clip: rect(0, 0, 0, 0);          /* Recorta a área visível do elemento para nada (0,0,0,0 → invisível) */
  border: 0;                       /* Remove qualquer borda que possa aparecer */
}

/* ---------- Responsivo ------------------------------------ */
@media(max-width:768px){
  .overlay{ justify-content:center; align-items:center; }
  .login-modal{ width:100%; max-width:360px; }
}

/* ---------- Resposta na modal cadastro -------------------- */
.hint-msg {
  color: #d9534f;
  color: blue !important;
  margin: 0 0 10px 0;
  font-weight: 500;
  font-weight: bold;
}
.hidden {
  display: none;
}
/* ----------------- */
.metodo-verificacao {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin: 12px 0;
  font-size: 15px;
}

.metodo-verificacao label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;  /* Impede quebra no texto "E-mail" */
}

@media (max-width: 500px) {
  .metodo-verificacao {
    flex-direction: column;
    align-items: flex-start;
  }
}
#codigo-box.hidden {
  display: none;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.login-modal {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.metodo-validacao {
  margin-top: 10px;
}

.metodo-titulo {
  font-weight: 500;
  margin-bottom: 5px;
}
.opcoes-metodo {
  display: flex;
  gap: 20px;
  align-items: center;
}

.opcoes-metodo label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
}
.opcoes-metodo {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: nowrap;
}

.opcoes-metodo label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
/*
#hint {
    color: blue;
    font-weight: bold; /* opcional para destaque
}
#register-overlay #hint.azul { 
	color: #007BFF !important; 
}

body { font-family: Arial, sans-serif; margin:0; padding:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:#222; color:#fff; padding:10px; }
.login-btn { cursor:pointer; padding:5px 10px; }

.main-content { padding:20px; }
.overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:10; }
.login-modal { background:#fff; padding:20px; border-radius:8px; position:relative; width:300px; box-shadow:0 2px 10px rgba(0,0,0,0.3); }

.hidden { display:none; }
.close-btn { position:absolute; top:10px; right:10px; background:none; border:none; font-size:20px; font-weight:bold; color:#000; cursor:pointer; transition:color 0.3s; }
.close-btn:hover { color:red; }
/*
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.register-link { margin-top:10px; font-size:14px; }
.hint { font-size:13px; color:red; margin-top:5px; }
input { width:100%; margin:5px 0; padding:5px; box-sizing:border-box; }
button { padding:5px 10px; margin-top:10px; cursor:pointer; }

*/