frontend actualizado y mejorado extremadamente

frontend/src/styles.css

@@ -0,0 +1,75 @@
+:root {
+  --bg: 15 15 18;
+  --fg: 235 235 240;
+  --muted: 180 180 190;
+  --accent: 80 160 255;
+  --card: 28 28 34 / 0.55;
+  --border: 255 255 255 / 0.12;
+  --glass-blur: 14px;
+  --radius: 14px;
+}
+:root.light {
+  --bg: 245 245 248;
+  --fg: 20 20 22;
+  --muted: 110 110 120;
+  --accent: 18 108 242;
+  --card: 255 255 255 / 0.6;
+  --border: 0 0 0 / 0.08;
+}
+* { box-sizing: border-box; }
+html, body, #app { height: 100%; }
+html, body { margin: 0; padding: 0; background: rgb(var(--bg)); color: rgb(var(--fg)); }
+body { font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
+button { cursor: pointer; }
+a { color: inherit; }
+
+/* Top bar */
+.topbar {
+  position: sticky; top: 0; z-index: 10;
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 10px; padding: 10px 14px; backdrop-filter: blur(var(--glass-blur));
+  background: linear-gradient(180deg, rgba(var(--card)), rgba(var(--card)) 60%, rgba(0,0,0,0));
+  border-bottom: 1px solid rgba(var(--border));
+}
+.title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; }
+.actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); color: inherit; transition: transform .12s ease, background .2s;
+  backdrop-filter: blur(var(--glass-blur)); }
+.icon-btn:hover { transform: translateY(-1px); background: rgba(var(--card)); }
+.icon { width: 16px; height: 16px; opacity: .9; }
+
+/* Layout */
+.shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; gap: 12px; padding: 12px; }
+.panel { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur)); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
+.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(var(--border)); }
+.panel-title { font-weight: 600; }
+.panel-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
+.scroll { overflow: auto; padding: 10px; }
+
+/* Cards */
+.card { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: 12px; padding: 10px; transition: transform .12s ease, box-shadow .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
+.card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
+
+/* Responsive */
+@media (max-width: 980px) {
+  .shell { grid-template-columns: 1fr; }
+}
+
+/* Collapse helpers: keep headers visible when collapsed */
+.panel.collapsed .scroll { display: none; }
+
+/* Modal */
+.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 20; animation: fadeIn .15s ease;
+}
+.modal { width: min(680px, 92vw); border-radius: 14px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); padding: 14px; box-shadow: 0 10px 32px rgba(0,0,0,.2); }
+.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+/* Small bits */
+.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(var(--border)); border-radius: 999px; background: rgba(var(--card)); font-size: 12px; }
+.muted { color: rgb(var(--muted)); }
+.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.spacer { flex: 1; }
+.toggle { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); }