/* =========================================================
   Quiniela Liga MX — Login / Registro
   Paleta inspirada en Liga MX (sin usar su logo oficial).
   ========================================================= */

:root{
  --lmx-rojo:#E4002B;
  --lmx-verde:#00843D;
  --lmx-lima:#C4D600;
  --lmx-noche:#161616;
  --lmx-gris:#6B6B6B;
  --lmx-paper:#FBF9F3;
  --lmx-ink:#161616;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Work Sans',Arial,sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(228,0,43,0.25), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(0,132,61,0.28), transparent 45%),
    var(--lmx-noche);
  background-attachment:fixed;
}

.auth-wrap{width:100%;max-width:400px;}

.auth-brand{text-align:center;margin-bottom:22px;}
.auth-brand img{width:74px;height:74px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.4);}
.auth-brand h1{
  font-family:'Archivo Black',Georgia,sans-serif;
  font-size:22px;
  color:#fff;
  margin:16px 0 4px;
  letter-spacing:.01em;
}
.auth-brand p{margin:0;color:rgba(255,255,255,0.55);font-size:13px;}

.auth-card{
  background:#fff;
  border-radius:18px;
  padding:28px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}

.auth-error{
  background:rgba(228,0,43,0.08);
  border:1px solid rgba(228,0,43,0.3);
  color:var(--lmx-rojo);
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:18px;
}
.auth-ok{
  background:rgba(0,132,61,0.08);
  border:1px solid rgba(0,132,61,0.3);
  color:var(--lmx-verde);
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:18px;
}

.btn-google{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;
  border:1.5px solid #dfe1e5;
  color:#3c4043;
  padding:12px 0;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  transition:box-shadow .15s, border-color .15s;
}
.btn-google:hover{box-shadow:0 2px 8px rgba(0,0,0,0.15);border-color:#c6c9cc;}
.g-icon{
  width:19px;height:19px;flex:none;
  background:conic-gradient(from 90deg,#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75% 100%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:800;
}

.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:22px 0 18px;
  font-size:11.5px;color:#9a9a9a;text-transform:uppercase;letter-spacing:.05em;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:#e8e8e8;}

.auth-field{margin-bottom:16px;}
.auth-field label{
  display:block;font-size:11.5px;font-weight:600;color:#555;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;
}
.auth-field input{
  width:100%;padding:11px 13px;
  border:1.5px solid #e2e2e2;border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--lmx-ink);
  transition:border-color .15s;
}
.auth-field input:focus{outline:none;border-color:var(--lmx-verde);}

.btn-primary{
  width:100%;
  background:linear-gradient(135deg, var(--lmx-verde), #00632d);
  color:#fff;border:none;
  padding:13px 0;border-radius:10px;
  font-weight:700;font-size:14.5px;
  cursor:pointer;
  margin-top:4px;
  box-shadow:0 6px 16px rgba(0,132,61,0.35);
  transition:transform .1s, box-shadow .15s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,132,61,0.45);}
.btn-primary:active{transform:translateY(0);}

.auth-footer{text-align:center;margin-top:20px;font-size:13.5px;color:#666;}
.auth-footer a{color:var(--lmx-verde);font-weight:700;text-decoration:none;}
.auth-footer a:hover{text-decoration:underline;}

.auth-accent-bar{height:5px;border-radius:999px;margin-bottom:22px;
  background:linear-gradient(90deg, var(--lmx-rojo), var(--lmx-lima), var(--lmx-verde));}