/* ========= index.css ========= */
/* Tela inicial (país / profissão / patologia) */

/* Layout base */
.login-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0b0f1a url('../img/hero-desktop-80.jpg') center/cover no-repeat fixed;
  padding: 40px 24px;
}
@media (max-width: 768px){
  .login-wrap { background-image: url('../img/hero-mobile-80.jpg'); }
}

/* Card */
.login-card {
  width: min(640px, 92vw);
  background: rgba(12,12,16,0.72);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 32px;
  animation: fadeIn .45s ease both;
  text-align: center;
}

/* Logo */
.login-logo {
  display: block;
  height: 72px;
  margin-bottom: 70px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}

/* Tipografia */
.brand { font-weight: 300; font-size: 28px; color: #ebeffa; }
.legend { color: #cfd3dc; font-size: 14px; margin: 6px 0 18px; }

/* Selects */
.select {
  display: flex;
  align-items: center;
  background: #0e1422;
  border: 1px solid #26314a;
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
}
.select select {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 16px;
  appearance: none;
  padding-right: 36px;
}
.select::after {
  content:"";
  position:absolute;
  right:14px; top:50%;
  width:16px; height:16px;
  transform:translateY(-50%);
  background:no-repeat center / 16px 16px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23cfd3dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
}

/* Botão */
.actions { display: flex; justify-content: center; margin-top: 16px; }
.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #0d5bff, #044ed7);
  color: #fff;
  box-shadow: 0 6px 18px rgba(4,78,215,.35);
  transition: .2s transform ease, .2s background-color ease;
}
.btn:hover:not(:disabled){ transform: translateY(-1px); }
.btn:disabled{ opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Erro e nota */
.error {
  background: #2a1414;
  border: 1px solid #5a2a2a;
  color: #ffd1d1;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}
.footer-note {
  margin-top: 16px;
  color: #bac2d6;
  font-size: 12px;
  text-align: center;
  opacity: .85;
}

/* Mobile */
@media (max-width: 768px){
  .login-card { padding: 24px; }
  .login-logo { height: 64px; margin-bottom: 50px; }
}

/* Ajustes de visibilidade dos selects */
select,
select option {
  background-color: #0B0F4A !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
}

/* Garante boa legibilidade das opções no menu suspenso */
select option:hover,
select option:focus {
  background-color: #044ED7 !important;
  color: #fff !important;
}

/* Animação */
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }