*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

/* fondo */

body{

background-image:url("Imagenes/abstract-technological-background-futuristic-illustration-of-high-computer-and-communication-technologies-on-a-blue-background-high-tech-digital-technology-vector (1).jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

min-height:100vh;

}

/* NAVBAR */

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

background:rgba(0,0,0,0.85);

padding:12px 40px;

color:white;

}

.logo-menu{

display:flex;
align-items:center;
gap:10px;

}

.logo-menu img{
width:40px;
}

/* menu principal */

.menu{

list-style:none;
display:flex;
gap:25px;

}

.menu li{

position:relative;

}

.menu a{

text-decoration:none;
color:white;
font-size:15px;
padding:8px;

display:block;

}

.menu a:hover{

color:#00b4ff;

}

/* submenu */

.submenu{

display:none;

position:absolute;

top:35px;

background:#111;

list-style:none;

border-radius:6px;

min-width:180px;

}

.submenu li a{

padding:10px;

}

/* mostrar submenu */

.dropdown:hover .submenu{

display:block;

}

/* sub-submenu */

.sub-dropdown{

position:relative;

}

.sub-submenu{

display:none;

position:absolute;

left:180px;

top:0;

background:#111;

list-style:none;

border-radius:6px;

min-width:150px;

}

.sub-dropdown:hover .sub-submenu{

display:block;

}

/* LOGIN */

.login-container{

display:flex;
justify-content:center;
align-items:center;

height:80vh;

}

/* tarjeta */

.login-card{

background:rgba(255,255,255,0.95);

padding:40px;

width:320px;

border-radius:12px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,0.6);

}

/* ocultar registro al inicio */

#registroCard{

display:none;

}

input,select{

width:100%;
padding:12px;
margin:10px 0;

border-radius:6px;
border:1px solid #ccc;

}

button{

width:100%;
padding:12px;

background:#1b4965;
color:white;

border:none;

border-radius:6px;

cursor:pointer;

}

button:hover{

background:#0d3b66;

}

/* texto crear cuenta */

.crear-cuenta{

margin-top:12px;

color:#0077cc;

cursor:pointer;

font-size:14px;

}

.crear-cuenta:hover{

text-decoration:underline;

}