/* ====== ATEC - Página de Autenticação (estática) ====== */
:root{
  --brand-bg: #ffffff;        /* Azul do painel */
  --brand-bg-2: #00adefe6;      /* Tom mais escuro para hover */
  --brand-text: #ffffff;      /* Branco */
  --ink: #00adefe6;             /* Texto escuro */
  --muted: #6b7a88;           /* Texto secundário */
  --surface: #ffffff;         /* Superfície branca */
  --field-bg: #f2f2f2;        /* Campo dentro do painel */
  --field-border: #00adefe6;    /* Borda sutil */
  --shadow: 0 30px 60px rgba(2,17,35,.35);
  --footer-safe: 96px;        /* espaço de segurança para o footer fixo */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:#111;
}

/* Layout principal */
.page{
  position:relative;
  min-height:100vh;
}

/* Imagem de fundo (lado esquerdo) */
.hero{
  position:fixed; inset:0;
  background-image: url('img/back_img.avif');
  background-size: cover;
  background-position: center;
  filter: saturate(.95) contrast(1.05);
}

/* Painel do lado direito */
.panel{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-end; /* posiciona o card à direita, flutuando */
  padding-inline: clamp(16px, 4vw, 40px);
  padding-top: clamp(24px, 8vh, 96px);
  /* mantém distância proporcional ao footer */
  padding-bottom: calc(clamp(24px, 8vh, 96px) + var(--footer-safe));
  background: transparent; /* sem bloco azul de fundo */
}

.card{
  width:min(460px, 92%);
  background:var(--brand-bg);
  color:var(--brand-text);
  border-radius:26px;
  padding:48px 40px 36px;
  box-shadow:var(--shadow);
  /* animação premium na entrada do card */
  opacity:0;
  transform: translateY(14px) scale(.985);
  animation: cardReveal 560ms cubic-bezier(.22,.61,.36,1) 160ms both;
}

/* Marca */
.brand{
  display:flex;
  align-items:center;
  justify-content:center; /* centro horizontal */
  gap:16px;
  color:#e9f3fb;
  margin-bottom:28px;
  width:100%;
  text-align:center;
}
.brand-mark{width:44px;height:44px;color:#cfe7fb}
.brand-text{font-size:44px; line-height:1; font-weight:700; letter-spacing:.5px}

/* Formulário */
.form{display:flex;flex-direction:column;gap:16px}
.field{
  position:relative;display:flex;align-items:center;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:10px; height:52px; padding-left:44px;
}
.field .icon{position:absolute; left:14px; width:20px; height:20px; color:var(--field-border); display:grid; place-items:center}
.field input{
  width:100%; height:100%; border:0; outline:0; background:transparent; color:gray;
  font-size:16px; padding-right:14px;
}
.field input::placeholder{color:var(--brand-bg-2)}

/* Estado de erro nos campos (opcional) */
.field.error{ border-color:#ef4444 }

/* Alertas dentro do card */
.alert{ display:none; align-items:flex-start; gap:10px; border-radius:12px; padding:12px 14px; border:1px solid transparent; font-size:14px; font-weight:600; line-height:1.35 }
.alert.show{ display:flex; animation: alertIn 340ms cubic-bezier(.22,.61,.36,1) both }
.alert-error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; box-shadow:0 8px 18px rgba(239,68,68,.12) }

@keyframes alertIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }

.aux{display:flex; justify-content:flex-end; margin-top:-6px}
.forgot{color:black; font-size:14px; text-decoration:none}
.forgot:hover{ text-decoration:underline }

/* Botões */
.btn{height:54px; border:0; border-radius:14px; font-weight:700; cursor:pointer; transition:.2s;}
.btn-primary{background:var(--brand-bg-2); color:#ffffff; box-shadow:0 8px 20px rgba(0,0,0,.15)}
.btn-primary:hover{transform:translateY(-1px);background:#049cd6}
#teia:hover{color:#5d5b5b !important} 
.btn-secondary{display:flex; align-items:center; justify-content:center; gap:2px; background:#edf4fb; color:#0e3a5e}
.btn-secondary:hover{background:#dfeafb}
.btn .strong{letter-spacing:.5px}
.btn .muted{opacity:.8; font-weight:600}

/* Rodapé */
.footer{position:absolute; bottom:16px; width:100%;margin:0 auto; padding-left: 40px;padding-right: 40px;}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgb(255 112 17 / 85%); color:black; padding:14px 18px; border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  /* animação suave de entrada da esquerda para a direita */
  opacity:0;
  transform:translateX(-10%);
  animation: footerSlideIn 420ms cubic-bezier(.22,.61,.36,1) 120ms both;
  will-change: transform, opacity;
}
.copyright{font-size:14px}
.social{display:flex; align-items:center; gap:14px}
.social a{
  width:36px;height:36px; display:grid; place-items:center;
  background:#0b0b0b; color:#fff; border-radius:50%; text-decoration:none;
  transform: translateY(0);
  will-change: transform;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.social a:hover{
  background:#111;
  animation: socialBob 700ms ease-in-out infinite alternate;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.social a:active{ animation: none; transform: translateY(-1px) }
.social svg{width:18px;height:18px}
.logo{width:50%; max-width:150px; }
@keyframes cardReveal{
  from{
    opacity:.02;
    transform: translateY(14px) scale(.985);
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow);
  }
}

@keyframes footerSlideIn{
  from{ transform:translateX(-10%); opacity:.01 }
  to  { transform:translateX(0);    opacity:1 }
}

/* Balanço suave no hover das redes sociais */
@keyframes socialBob{
  from{ transform: translateY(0) }
  to  { transform: translateY(-4px) }
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .footer-inner{ animation:none; transform:none; opacity:1 }
  .card{ animation:none; opacity:1; transform:none }
  .social a:hover{ animation:none; transform:none }
}

/* Responsividade */
@media (max-width: 1100px){
  .hero{opacity:.2; filter:grayscale(.1)}
  .panel{justify-content:center; padding-inline:24px; padding-top: clamp(16px, 6vh, 64px); padding-bottom: clamp(16px, 10vh, 80px)}
  .footer{position:static; transform:none; width:auto; margin:12px auto 24px}
}

@media (max-width: 420px){
  .brand-text{font-size:36px}
  .brand-mark{width:40px;height:40px}
  .card{padding:34px 18px 26px}
  .footer-inner{flex-direction:column; align-items:flex-start}
}