/* ============================================================
   ARA SMART — Access Screens Visual Pilot Phase 3.13
   Scope: register.html and accept_invite.html only.
   CSS-only. Does not touch auth logic, API, PHP or MySQL.
   ============================================================ */

body:has(#formReg),
body:has(#formInv){
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(242,183,5,.14), transparent 58%),
    radial-gradient(900px 620px at 96% 0%, rgba(77,163,255,.10), transparent 58%),
    linear-gradient(180deg,#0D1016,#07080B)!important;
}

body:has(#formReg) .container,
body:has(#formInv) .container{
  max-width:1180px!important;
  min-height:100vh;
  display:grid;
  align-content:center;
  gap:18px;
  padding:28px 16px 44px!important;
}

body:has(#formReg) .nav,
body:has(#formInv) .nav{
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  padding:16px!important;
}

body:has(#formReg) .nav .btn,
body:has(#formInv) .nav .btn{
  min-height:42px;
  border-radius:14px!important;
  font-weight:900;
}

body:has(#formReg) .card,
body:has(#formInv) .card{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:760px!important;
  margin:0 auto!important;
  padding:28px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:28px!important;
  background:
    radial-gradient(520px 300px at 10% 0%, rgba(242,183,5,.16), transparent 60%),
    radial-gradient(520px 300px at 100% 100%, rgba(77,163,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.018))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.46);
}

body:has(#formReg) .card::before,
body:has(#formInv) .card::before{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 11px;
  margin-bottom:16px;
  border-radius:999px;
  border:1px solid rgba(242,183,5,.16);
  background:rgba(242,183,5,.08);
  color:#F2B705;
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body:has(#formReg) .card::before{content:"Registro atleta";}
body:has(#formInv) .card::before{content:"Vinculación segura";}

body:has(#formReg) .h1,
body:has(#formInv) .h1{
  margin:0!important;
  font-size:clamp(30px,3.4vw,46px)!important;
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:950!important;
}

body:has(#formReg) .h1::before{content:"🧑‍🚀 ";}
body:has(#formInv) .h1::before{content:"✉️ ";}

body:has(#formReg) .p,
body:has(#formInv) .p,
body:has(#formReg) .small,
body:has(#formInv) .small,
body:has(#formReg) label,
body:has(#formInv) label{
  color:#A8B0BF!important;
}

body:has(#formReg) .p,
body:has(#formInv) .p{line-height:1.55;}
body:has(#formReg) .hr,
body:has(#formInv) .hr{border-color:rgba(255,255,255,.08)!important;margin:18px 0!important;}

body:has(#formReg) .form,
body:has(#formInv) .form{
  display:grid!important;
  gap:14px!important;
}

.ara-register-card{max-width:860px!important;}
.ara-register-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}

body:has(#formReg) .field,
body:has(#formInv) .field{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.16);
}

body:has(#formReg) label,
body:has(#formInv) label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}

body:has(#formReg) input,
body:has(#formReg) select,
body:has(#formInv) input{
  width:100%;
  min-height:48px;
  border-radius:15px!important;
  background:rgba(0,0,0,.32)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:15px;
  padding:0 14px;
}

body:has(#formReg) select option{background:#111;color:#fff;}
body:has(#formReg) input[type="file"]{padding:12px;height:auto;color:#A8B0BF!important;}

body:has(#formReg) input:focus,
body:has(#formReg) select:focus,
body:has(#formInv) input:focus{
  outline:none;
  border-color:rgba(242,183,5,.58)!important;
  box-shadow:0 0 0 3px rgba(242,183,5,.10)!important;
}

.ara-avatar-field{display:grid;gap:10px;}
.ara-avatar-picker{display:flex;gap:10px;flex-wrap:wrap;}
.ara-avatar-picker label{margin:0!important;letter-spacing:0!important;text-transform:none!important;}
.ara-avatar-picker input{position:absolute;opacity:0;width:1px!important;height:1px!important;min-height:1px!important;}
.ara-avatar-picker span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  font-size:28px;
  cursor:pointer;
  transition:.18s ease;
}
.ara-avatar-picker input:checked + span{
  border-color:rgba(242,183,5,.70);
  background:rgba(242,183,5,.14);
  box-shadow:0 0 0 3px rgba(242,183,5,.10);
}

.ara-human-check{
  display:flex!important;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(242,183,5,.20);
  background:rgba(242,183,5,.07);
  color:#DCE3EE!important;
  letter-spacing:0!important;
  text-transform:none!important;
  font-size:14px!important;
}
.ara-human-check input{width:20px!important;min-height:20px!important;height:20px!important;flex:0 0 auto;accent-color:#F2B705;}

.ara-google-register-btn,
.ara-google-btn,
.ara-google-native{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.ara-google-register-btn span,
.ara-google-btn span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:1000;
}
.ara-google-native{min-height:46px;overflow:hidden;}
.ara-google-native > div{margin:0 auto!important;}

body:has(#formReg) .btn,
body:has(#formInv) .btn{
  min-height:46px;
  border-radius:15px!important;
  font-weight:950;
}

body:has(#formReg) .btn.secondary,
body:has(#formInv) .btn.secondary{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.08)!important;
}

body:has(#formReg) .btn.secondary:hover,
body:has(#formInv) .btn.secondary:hover,
body:has(#formReg) .btn:hover,
body:has(#formInv) .btn:hover{
  border-color:rgba(242,183,5,.35)!important;
  background:rgba(255,255,255,.065)!important;
}

body:has(#formInv) .card > .small:last-child,
body:has(#formReg) .card > .p{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(242,183,5,.16);
  background:rgba(242,183,5,.07);
}

@media(max-width:700px){
  body:has(#formReg) .container,
  body:has(#formInv) .container{
    align-content:start;
    padding:10px 10px 28px!important;
  }
  body:has(#formReg) .nav,
  body:has(#formInv) .nav,
  body:has(#formReg) .card,
  body:has(#formInv) .card{
    border-radius:20px!important;
    padding:16px!important;
  }
  body:has(#formReg) .nav,
  body:has(#formInv) .nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .ara-register-grid{grid-template-columns:1fr;}
  body:has(#formReg) .nav .btn,
  body:has(#formInv) .nav .btn,
  body:has(#formReg) .form .btn,
  body:has(#formInv) .form .btn{
    width:100%;
    justify-content:center;
  }
}