diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 99d8ab8..61f3606 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -14,17 +14,47 @@ body {
   width: 240px; background: #0f172a; color: #e2e8f0;
   display: flex; flex-direction: column; padding: 0;
   position: fixed; height: 100vh; left: 0; top: 0;
+  transition: width 0.55s cubic-bezier(.22,1,.36,1);
+  overflow: hidden;
 }
 .sidebar-logo {
   padding: 22px 20px; font-size: 16px; font-weight: 700; color: #fff;
   border-bottom: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.3px;
 }
 .sidebar-logo span { color: #60a5fa; }
+
+/* Botón ☰ para colapsar/expandir */
+.sidebar-toggle {
+  border: none; background: transparent; color: #cbd5e1; cursor: pointer;
+  font-size: 20px; padding: 6px 8px; border-radius: 8px; line-height: 1;
+  transition: background .15s, color .15s;
+}
+.sidebar-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
+
+/* ── Colapsado: barra vacía (solo el botón ☰), ancho reducido ── */
+.sidebar.collapsed { width: 60px; }
+.sidebar.collapsed .sidebar-logo { padding-left: 0; padding-right: 0; }
+.sidebar.collapsed .sidebar-logo-text { display: none; }
+.sidebar.collapsed .nav,
+.sidebar.collapsed .sidebar-footer {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s ease;
+}
+.sidebar .nav,
+.sidebar .sidebar-footer {
+  opacity: 1;
+  transition: opacity .4s ease .18s;
+}
+.sidebar .sidebar-logo { transition: padding .55s cubic-bezier(.22,1,.36,1); }
+.sidebar-toggle { opacity: 1 !important; pointer-events: auto !important; }
+.app:has(.sidebar.collapsed) .main { margin-left: 60px; }
+
 .nav { padding: 12px 10px; flex: 1; }
 .nav-item {
-  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
+  display: flex; align-items: center; gap: 11px; padding: 8px 14px;
   border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 500;
-  color: #cbd5e1; margin-bottom: 3px; transition: all 0.15s; border: none;
+  color: #cbd5e1; margin-bottom: 1px; transition: all 0.15s; border: none;
   background: transparent; width: 100%; text-align: left;
 }
 .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
@@ -32,7 +62,7 @@ body {
 .nav-item .ico { font-size: 16px; }
 
 /* ── Main content ── */
-.main { margin-left: 240px; flex: 1; padding: 22px 28px; min-width: 0; overflow-x: hidden; }
+.main { margin-left: 240px; flex: 1; padding: 22px 28px; min-width: 0; overflow-x: hidden; transition: margin-left 0.55s cubic-bezier(.22,1,.36,1); }
 .page-title { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 14px; }
 
 /* ── Filters bar ── */