/* ================================
   Estudar Poker — Auth Padrão v1.1
==================================*/

:root{
  --roxo: #5e3eb6;
  --roxo-escuro: #462a91;
  --cinza-10: #f5f5f5;
  --cinza-20: #eee;
  --cinza-30: #e0e0e0;
  --cinza-50: #c2c2c2;
  --cinza-70: #333;
  --branco: #fff;
  --erro: #d73939;
  --ok: #1f8f3a;
  --radius: 16px;
  --radius-sm: 10px;
  --sombra: 0 8px 28px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--cinza-70);
  background: var(--cinza-10) url('https://estudarpoker.com.br/din/fundo/pontos/lua2.webp') center/cover no-repeat fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-text-size-adjust: 100%;
}

/* container base: 1 coluna; vira 2 colunas ≥ 960px */
.container-home{
  width: min(1200px, 92vw);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 12px;
  background: transparent;
  border-radius: var(--radius);
}

.lado-esquerdo,
.lado-direito{
  display:flex; align-items:center; justify-content:center;
}

/* logo */
.logo img{
  width: clamp(160px, 38vw, 320px);
  height:auto; display:block;
}

/* card */
.quadro-login{
  width: 100%;
  max-width: 520px;
  /* fallback p/ browsers sem color-mix */
  background: rgba(255,255,255,.96);
  /* override onde suportado */
  background: color-mix(in srgb, var(--branco) 96%, transparent);
  backdrop-filter: saturate(1.1);
  padding: 28px 24px;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
}

.subtitulo{ margin:0 0 18px; font-size:20px; text-align:center; }

/* abas */
.abas{
  display:grid; grid-template-columns:1fr 1fr;
  gap:6px; margin-bottom:16px;
}
.aba{
  appearance:none; border:0;
  background: var(--cinza-20);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 12px 0; font-weight:700; cursor:pointer;
  transition: background-color .2s ease, transform .06s ease;
}
.aba:hover{ transform: translateY(-1px); }
.aba.ativa{ background: var(--roxo); color: var(--branco); }

/* forms */
.formulario{ display:none; }
.formulario.ativo{ display:block; }

/* campos */
form input[type="email"],
form input[type="password"]{
  width:100%;
  height:52px;                 /* bom para dedo */
  font-size:16px;              /* evita zoom no iOS */
  padding: 0 14px;
  margin-bottom: 12px;
  border:1px solid #d9d9d9;
  border-radius: var(--radius-sm);
  background:#fff;
  transition: border-color .15s, box-shadow .15s;
}
form input:focus{
  outline:none;
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 22%, transparent);
}

/* lembrar/esqueci */
.linha-opcoes{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin: 2px 0 10px; font-size:14px;
}
.checkbox{ display:inline-flex; align-items:center; gap:6px; }
.checkbox input{ width:20px; height:20px; transform:translateY(2px); }

/* links */
a{ color: var(--roxo); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* botões */
.botao{
  display:inline-block; width:100%;
  height:52px; font-size:16px; font-weight:700;
  border:0; border-radius: var(--radius-sm);
  background: var(--roxo); color:#fff; cursor:pointer;
  transition: background-color .2s, transform .06s;
}
.botao:hover{ background: var(--roxo-escuro); transform: translateY(-1px); }
.botao:active{ transform: translateY(0); }
.botao-secundario{ margin-top:8px; background:#fff; color:#111827; border:1px solid #e5e7eb; }
.botao-secundario:hover{ background:#f3f4f6; }

/* mensagens */
.msg-erro, .msg-ok{
  border-radius:12px; padding:12px; font-size:14px; margin:10px 0 14px;
}
.msg-erro{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.msg-ok{   background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }

/* reCAPTCHA */
.g-recaptcha{
  margin: 6px auto 10px; display:flex; justify-content:center;
}

/* ===== RESPONSIVO ===== */

/* ≥ 640px: mais respiro */
@media (min-width:640px){
  .quadro-login{ padding: 32px 28px; }
}

/* ≥ 960px: duas colunas */
@media (min-width:960px){
  .container-home{ grid-template-columns: 1fr 1fr; gap: 120px; padding: 0; }
  .quadro-login{ margin-top: 60px; }
}

/* ≥ 1280px: leves ajustes */
@media (min-width:1280px){
  .logo img{ width:320px; }
  .quadro-login{ max-width: 540px; }
}

/* ===== MOBILE: força uma coluna e escala amigável ===== */
@media (max-width:768px){
  .container-home{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    min-height: 100svh; padding:16px; gap:14px;
  }
  .lado-esquerdo,.lado-direito{ width:100%; }
  .lado-esquerdo .logo{ display:flex; justify-content:center; }
  .lado-esquerdo .logo img{ width: clamp(140px, 45vw, 220px); }

  .quadro-login{
    width:100%; max-width:420px; margin:0 auto;
    padding:16px; border-radius:14px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--sombra);
    backdrop-filter: blur(4px);
  }

  .abas{ display:flex; gap:6px; margin:4px 0 12px; }
  .aba{ flex:1; border-radius:10px; line-height:1; }

  /* captcha ligeiramente menor em telas muito estreitas */
  @media (max-width:380px){
    .g-recaptcha{ transform: scale(.92); transform-origin:center; }
  }
}

/* Alto contraste opcional */
body.alto-contraste{ color:#111; }
body.alto-contraste .quadro-login{ background:#fff; box-shadow:0 0 0 3px #000; }
body.alto-contraste a{ color:#000; text-decoration:underline; }
body.alto-contraste .botao{ background:#000; color:#fff; }
body.alto-contraste .aba.ativa{ background:#000; color:#fff; }