body{
margin:0;
padding:0 40px;
background-color:rgb(18,20,26);
color:rgb(0,220,255);
font-family:"Rajdhani", sans-serif;
}

/* TARJETA DEL FORMULARIO */

.tarjetaregistro{
width:900px;
margin:auto;
padding:30px;
background-color:rgb(24,25,31);
border:1px solid rgba(0,220,255,0.25);
border-radius:16px;
}

/* TITULO */

.subtituloentrar{
text-align:center;
font-size:26px;
color:rgba(18,222,253,0.6);
}

.lineaentrar{
border:none;
border-top:2px solid rgb(0,140,180);
width:60px;
margin:auto;
}

/* ESTRUCTURA DEL FORMULARIO */

.fila{
display:flex;
gap:30px;
margin-bottom:20px;
}

.campo{
flex:1;
display:flex;
flex-direction:column;
}

/* ETIQUETAS */

.etiquetacampo{
font-family:"Orbitron", sans-serif;
font-size:18px;
color:rgba(0,220,255,0.7);
margin-bottom:6px;
}

/* INPUTS */

input.campotexto,
select.campotexto{

width:100%;
padding:14px 16px;
background-color:rgb(24,25,31);
border:1px solid rgba(0,220,255,0.3);
border-radius:8px;
color:white;
font-family:"Rajdhani", sans-serif;
font-size:14px;

box-sizing:border-box;

transition: all 0.25s ease;

}

input.campotexto:hover,
select.campotexto:hover{

border-color:rgba(0,220,255,0.8);
box-shadow:0 0 12px rgba(0,220,255,0.25);

}

input.campotexto:focus,
select.campotexto:focus{

outline:none;
border-color:rgba(0,220,255,1);
box-shadow:0 0 14px rgba(0,220,255,0.35);

transform: translateX(6px);

}

/* ICONO DEL CALENDARIO */

input[type="date"]::-webkit-calendar-picker-indicator{
filter:invert(1);
}

/* BOTONES */

button,
.botoncrearcuenta{

padding:14px 70px;
background-color:rgb(0,220,255);
color:black;
font-family:"Orbitron", sans-serif;
font-weight:700;
border-radius:8px;
border:none;
cursor:pointer;

transition:background-color 0.3s, box-shadow 0.3s, transform 0.2s;

}

button:hover,
.botoncrearcuenta:hover{

background-color:rgb(0,180,210);
box-shadow:0 0 24px rgba(0,220,255,0.5);
transform:scale(1.05);

}

/* MENSAJES */

#confirmacion,
#datos,
#mensaje{
margin-top:10px;
}

/* FOOTER */

.footer{
text-align:center;
padding:22px 0;
color:rgba(0,220,255,0.3);
font-size:13px;
}