body{
margin:0;
font-family:Arial;
background:#f4f6f9;
}

.admin-container{
display:flex;
min-height:100vh;
}

/* SIDEBAR */

.sidebar{
width:230px;
background:#1e293b;
color:white;
padding:20px;
display:flex;
flex-direction:column;
}

.sidebar h2{
margin-bottom:20px;
}

.sidebar a{
color:white;
text-decoration:none;
padding:10px;
border-radius:6px;
margin-bottom:5px;
}

.sidebar a:hover{
background:#334155;
}

/* MAIN */

.main{
flex:1;
padding:30px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.admin-user{
background:#e2e8f0;
padding:8px 15px;
border-radius:20px;
}

/* CARDS */

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:40px;
}

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.card h3{
margin-bottom:10px;
color:#555;
}

.card p{
font-size:24px;
font-weight:bold;
}

/* TABLA */

table{
width:100%;
background:white;
border-collapse:collapse;
border-radius:10px;
overflow:hidden;
}

td,th{
padding:12px;
border-bottom:1px solid #eee;
text-align:left;
}

/* LOGIN */

.login-container{

display:flex;

height:100vh;

font-family:Arial;

}


/* IMAGEN */

.login-image{

flex:1;

background:linear-gradient(120deg,#0077ff,#004aad);

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.login-image h1{

font-size:40px;

margin-bottom:10px;

}

.login-image p{

font-size:18px;

opacity:0.8;

}


/* FORMULARIO */

.login-form{

flex:1;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:white;

}

.login-form h2{

margin-bottom:20px;

}

.login-form form{

width:300px;

display:flex;

flex-direction:column;

}

.login-form input{

padding:12px;

margin-bottom:15px;

border-radius:6px;

border:1px solid #ddd;

}

.login-form button{

padding:12px;

background:#0077ff;

color:white;

border:none;

border-radius:6px;

cursor:pointer;

}

.login-form button:hover{

background:#005bd1;

}


/* ERROR */

.error{

background:#ffdddd;

color:#900;

padding:10px;

margin-bottom:15px;

border-radius:6px;

width:300px;

text-align:center;

}


/* RESPONSIVE */

@media(max-width:900px){

.login-image{

display:none;

}

.login-form{

flex:1;

}

}