/* RESET GENERAL */
*{
margin:0; /* quito márgenes por defecto */
padding:0; /* quito espacios internos */
box-sizing:border-box; /* facilita medidas */
font-family:Arial; /* letra general */
}

/* FONDO GENERAL */
body{
background:#82c0c9; /* color fondo claro */
}

/* CONTENEDOR PRINCIPAL */
.contenedor{
display:flex; /* acomoda sidebar y contenido */
}

/* SIDEBAR IZQUIERDO */
.sidebar{
width:240px; /* ancho menú */
height:100vh; /* ocupa toda pantalla */
background:#1e293b; /* color oscuro */
padding:30px;
position:fixed; /* queda fijo */
}

/* TITULO SIDEBAR */
.sidebar h2{
color:white;
margin-bottom:30px;
text-align:center;
}

/* BOTONES MENU */
.sidebar a{
display:block; /* uno debajo del otro */
color:white;
text-decoration:none;
padding:12px;
margin:10px 0;
background:#334155;
border-radius:10px;
transition:.3s; /* animación suave */
}

/* CONTENIDO DERECHA */
.contenido{
margin-left:260px; /* deja espacio sidebar */
padding:30px;
width:100%;
}

/* TITULOS */
h1{
margin-bottom:20px;
color:#222;
}

/* FORMULARIOS */
form{
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 5px 10px rgba(0,0,0,.1);
margin-bottom:30px;
}

/* INPUTS */
input,textarea{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ccc;
border-radius:8px;
}

/* BOTONES */
button{
background:#2563eb;
color:white;
border:none;
padding:12px 20px;
border-radius:8px;
cursor:pointer;
}

/* GALERIA */
.galeria{
display:grid; /* acomoda tarjetas */
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px; /* separación */
}

/* TARJETAS */
.card{
background:white;
padding:15px;
border-radius:15px;
box-shadow:0 5px 10px rgba(0,0,0,.1);
text-align:center;
}

/* IMAGENES */
.card img{
width:100%;
height:220px;
object-fit:contain; /* muestra imagen completa */
background:#f8f8f8;
padding:8px;
border-radius:10px;
margin-bottom:10px;
}

/* BOTONES DE EDITAR Y ELIMINAR */
.botones{
margin-top:10px;
display:flex;
gap:10px;
justify-content:center;
}

/* BOTONES DENTRO CARD */
.botones a{
padding:8px 12px;
background:#ef4444;
color:white;
text-decoration:none;
border-radius:8px;
}

/* SEGUNDO BOTON VERDE */
.botones a:last-child{
background:#22c55e;
}

/* SECCION EDITAR */
.contenido2{
max-width:700px;
margin:auto;
padding:30px;
}

/* IMAGEN EDITAR */
.contenido2 img{
width:100%;
max-width:300px;
height:220px;
object-fit:contain;
background:#f8f8f8;
padding:10px;
border-radius:10px;
box-shadow:0 5px 10px rgba(0,0,0,.1);
margin-bottom:15px;
}

/* BARRA CLIENTE */
.barra-top{
background:#1e293b;
padding:15px 30px;
display:flex;
justify-content:space-between;
align-items:center;
color:white;
}

/* BOTON CERRAR SESION */
.barra-top a{
background:#53a7df;
padding:10px 15px;
border-radius:8px;
text-decoration:none;
color:white;
}

/* CONTENIDO CLIENTE */
.contenido-cliente{
padding:30px;
}

/* FONDO LOGIN */
.fondo-login{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#2563eb,#1e3a8a);
}

/* CAJA LOGIN */
.login-box{
width:100%;
max-width:400px;
background:white;
padding:35px;
border-radius:20px;
box-shadow:0 15px 30px rgba(0,0,0,.15);
text-align:center;
}

/* TITULO LOGIN */
.login-box h1{
margin-bottom:10px;
color:#1e293b;
font-size:30px;
}

/* TEXTO LOGIN */
.login-box p{
margin-bottom:25px;
color:#666;
}

/* INPUTS LOGIN */
.login-box input{
width:100%;
padding:14px;
margin:10px 0;
border:1px solid #ccc;
border-radius:10px;
font-size:15px;
}

/* BOTON LOGIN */
.login-box button{
width:100%;
padding:14px;
margin-top:10px;
background:#2563eb;
color:white;
border:none;
border-radius:10px;
font-size:16px;
cursor:pointer;
transition:.3s;
}

/* EFECTO BOTON LOGIN */
.login-box button:hover{
background:#1d4ed8;
transform:translateY(-2px);
}

/* botón registrarse */
.registro-btn{
display:inline-block;
margin-top:15px;
padding:12px 20px;
background:#22c55e;
color:white;
text-decoration:none;
border-radius:10px;
font-size:15px;
transition:.3s;
}