/* ===== CONTENEDOR ===== */

.cf-form-container{
max-width:600px;
margin:50px auto;
padding:35px;
background:rgba(15,23,42,.85);
backdrop-filter:blur(10px);
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 30px rgba(0,255,255,.08);
color:#fff;
}

/* ===== TITULO ===== */

.cf-form-container h1{
text-align:center;
color:#00ffff;
margin-bottom:8px;
text-shadow:0 0 10px rgba(0,255,255,.4);
}

.subtitle{
text-align:center;
color:#94a3b8;
margin-bottom:20px;
font-size:14px;
}

/* ===== FORM ===== */

form{
display:flex;
flex-direction:column;
gap:14px;
}

/* SEPARADORES DE JUGADORES */

h3{
margin-top:10px;
margin-bottom:5px;
font-size:14px;
color:#00ffff;
font-weight:600;
}

/* LABEL */

label{
font-size:12px;
color:#94a3b8;
margin-top:5px;
}

/* INPUT */

input{
padding:12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.08);
background:#020617;
color:#fff;
outline:none;
transition:.25s;
font-size:14px;
}

input::placeholder{
color:#64748b;
}

input:focus{
border-color:#00ffff;
box-shadow:0 0 10px rgba(0,255,255,.35);
transform:scale(1.01);
}

/* ===== BOTON PRO ===== */

.btn-submit{
margin-top:10px;
padding:14px;
border:none;
border-radius:12px;
background:linear-gradient(90deg,#00ffff,#0066ff);
color:#001;
font-weight:700;
cursor:pointer;
transition:.3s;
position:relative;
overflow:hidden;
}

/* efecto shine */
.btn-submit::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
transition:.5s;
}

.btn-submit:hover::after{
left:100%;
}

.btn-submit:hover{
transform:translateY(-2px);
box-shadow:0 0 20px rgba(0,255,255,.5);
}

/* ===== ESTADO ===== */

.form-status{
margin-bottom:10px;
padding:12px;
border-radius:10px;
font-size:13px;
text-align:center;
display:none;
border:1px solid transparent;
}

/* pendiente */
.form-status.pending{
display:block;
background:#0f172a;
color:#38bdf8;
border-color:#38bdf833;
}

/* éxito */
.form-status.success{
display:block;
background:#022c22;
color:#4ade80;
border-color:#4ade8033;
}

/* error */
.form-status.error{
display:block;
background:#2c0202;
color:#f87171;
border-color:#f8717133;
}

/* ===== RESPONSIVE ===== */

@media(max-width:600px){

.cf-form-container{
margin:30px 12px;
padding:20px;
}

h3{
text-align:left;
}

}

/* ===== TERMINOS ===== */

.terms-box{
  margin-top:15px;
  padding:12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.terms-label{
  font-size:13px;
  color:#cbd5e1;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.terms-label input{
  accent-color:#00ffff;
  cursor:pointer;
}

.terms-link{
  color:#00ffff;
  text-decoration:none;
  font-weight:600;
  transition:.2s;
}

.terms-link:hover{
  text-shadow:0 0 8px rgba(0,255,255,.7);
  text-decoration:underline;
}

/* ========================= */
/* 🌞 MODO CLARO - FORM */
/* ========================= */

body.light .cf-form-container{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  color:#111;
}

/* TITULO */

body.light .cf-form-container h1{
  color:#00bcd4;
  text-shadow:0 0 8px rgba(0,188,212,.2);
}

body.light .subtitle{
  color:#64748b;
}

/* SEPARADORES */

body.light h3{
  color:#00bcd4;
}

/* LABEL */

body.light label{
  color:#475569; /* 🔥 FIX (antes no se veía bien) */
}

/* INPUT */

body.light input{
  background:#f1f5f9;
  border:1px solid rgba(0,0,0,.1);
  color:#111;
}

body.light input::placeholder{
  color:#94a3b8;
}

body.light input:focus{
  border-color:#00bcd4;
  box-shadow:0 0 8px rgba(0,188,212,.25);
}

/* BOTON */

body.light .btn-submit{
  background:linear-gradient(90deg,#00bcd4,#2563eb);
  color:#fff;
}

body.light .btn-submit:hover{
  box-shadow:0 0 15px rgba(0,188,212,.35);
}

/* STATUS */

body.light .form-status.pending{
  background:#e0f2fe;
  color:#0284c7;
  border-color:#0284c733;
}

body.light .form-status.success{
  background:#dcfce7;
  color:#16a34a;
  border-color:#16a34a33;
}

body.light .form-status.error{
  background:#fee2e2;
  color:#dc2626;
  border-color:#dc262633;
}

/* TERMS */

body.light .terms-box{
  background:#f8fafc;
  border:1px solid rgba(0,0,0,.08);
}

body.light .terms-label{
  color:#374151;
}

body.light .terms-link{
  color:#00bcd4;
}

body.light .terms-link:hover{
  color:#0891b2;
  text-shadow:none;
}