* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f0f2f5; color:#333;}

/* Contenedor general */
.wrapper {display:flex; height:100vh;}

/* Menú lateral */
.sidebar {width:250px; background:#1a2935; color:white; display:flex; flex-direction:column; padding-top:20px;}
.sidebar img.logo {width:250px; margin:0 auto 30px; display:block;}
.sidebar a {color:white; text-decoration:none; padding:12px 20px; display:block; transition:0.2s; border-left:4px solid transparent;}
.sidebar a:hover {background:#1a5bb8; border-left:4px solid #ffce00;}

/* Contenido principal */
.main-content {flex:1; padding:30px; overflow-y:auto;}
.main-content h1 {margin-bottom:20px; color:#2c7be5;}

/* Tarjetas de acceso rápido (dashboard) */
.cards {display:flex; flex-wrap:wrap; gap:20px;}
.card {flex:1 1 200px; background:white; border-radius:6px; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.1); text-align:center; transition:0.2s; cursor:pointer;}
.card:hover {box-shadow:0 0 15px rgba(0,0,0,0.2);}
.card h3 {margin-bottom:10px; color:#2c7be5;}
.card p {color:#555;}

/* Tabla de usuarios */
table{width:100%;border-collapse:collapse;margin-top:20px;background:white;border-radius:6px;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.1);}
th, td{padding:12px;text-align:left;border-bottom:1px solid #ddd;}
th{background:#2c7be5;color:white;}
a.button{background:#2c7be5;color:white;padding:7px 15px;text-decoration:none;border:none;border-radius:4px;cursor:pointer;}
a.button:hover{background:#1a5bb8;}
.status-active{color:green;font-weight:bold;}
.status-inactive{color:red;font-weight:bold;}