/* Dark gamer login/register - profesional */
:root{
  --bg:#070A12;
  --panel:rgba(12,16,28,.72);
  --panel2:rgba(12,16,28,.45);
  --text:#E6E8F2;
  --muted:#A7ABC2;
  --accent:#D6AC2F;
  --accent2:#6B5BFF;
  --border:rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(107,91,255,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(214,172,47,.14), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.95), rgba(7,10,18,.98)),
    url(../img/wallpaper.jpg) center/cover no-repeat fixed;
}

main{width:100%;padding:24px;margin:auto;margin-top:80px}

.contenedor_todo{width:100%;max-width:900px;margin:auto;position:relative}

.caja_trasera{
  width:100%;
  padding:26px 28px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg,var(--panel2),rgba(12,16,28,.25));
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.caja_trasera div{
  flex:1;
  padding:18px 16px;
  color:var(--muted);
  transition:all 300ms ease;
}

.caja_trasera div h3{
  font-weight:700;
  font-size:20px;
  letter-spacing:.2px;
  color:var(--text);
}
.caja_trasera div p{margin-top:10px;line-height:1.4}

.caja_trasera div button{margin-top:16px}

.caja_trasera button{
  padding:10px 18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
  outline:none;
  transition:all 200ms ease;
}
.caja_trasera button:hover{
  transform: translateY(-1px);
  border-color: rgba(214,172,47,.45);
  box-shadow:0 10px 30px rgba(214,172,47,.12);
}

/* Formularios */
.contenedor_login_reg{
  display:flex;
  align-items:center;
  width:100%;
  max-width:420px;
  position:relative;
  top:-170px;
  left: 12px;
  transition:left 500ms cubic-bezier(0.175,0.885,0.320,1.275);
}

.contenedor_login_reg form{
  width:100%;
  padding:34px 24px;
  position:absolute;
  border-radius:22px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), rgba(12,16,28,.55));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.contenedor_login_reg form h2{
  font-size:28px;
  text-align:center;
  margin-bottom:14px;
  color:var(--accent);
  letter-spacing:.2px;
}

.contenedor_login_reg form input{
  width:100%;
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:15px;
  outline:none;
}
.contenedor_login_reg form input::placeholder{color:rgba(167,171,194,.75)}
.contenedor_login_reg form input:focus{
  border-color: rgba(107,91,255,.50);
  box-shadow: 0 0 0 4px rgba(107,91,255,.12);
}

.contenedor_login_reg form button{
  width:100%;
  margin-top:18px;
  padding:12px 14px;
  border:none;
  border-radius:14px;
  background: linear-gradient(90deg, rgba(214,172,47,.92), rgba(107,91,255,.92));
  color:#0B0D14;
  font-weight:900;
  letter-spacing:.6px;
  cursor:pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
.contenedor_login_reg form button:hover{transform: translateY(-1px); filter: brightness(1.02)}
.formulario_login{opacity:1;display:block}
.formulario_reg{display:none}

/* Responsive */
@media screen and (max-width: 850px){
  main{margin-top:40px}
  .caja_trasera{flex-direction:column}
  .contenedor_login_reg{top:0;left:0;margin-top:18px;max-width:100%}
  .contenedor_login_reg form{position:relative}
}