: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;
<<<<<<< HEAD
  /* Scrollbar */
  --sb-size: 10px;
  --sb-thumb: rgba(255, 159, 203, 0.55);
  --sb-thumb-hover: rgba(255, 159, 203, 0.75);
  --sb-thumb-active: rgba(255, 127, 187, 0.9);
  --sb-track: rgba(255,255,255,0.05);
=======
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
}
: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;
<<<<<<< HEAD
  --sb-thumb: rgba(255, 127, 187, 0.65);
  --sb-thumb-hover: rgba(255, 127, 187, 0.82);
  --sb-thumb-active: rgba(255, 110, 178, 0.95);
  --sb-track: rgba(0,0,0,0.06);
=======
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
}
* { 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));
<<<<<<< HEAD
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box,
    linear-gradient(135deg,
      rgba(255, 159, 203, 0.95) 0%,
      rgba(255, 159, 203, 0.60) 10%,
      rgba(255, 127, 187, 0.45) 18%,
      rgba(0, 0, 0, 0.20) 28%,
      rgba(0, 0, 0, 0.06) 50%,
      rgba(0, 0, 0, 0.00) 70%
    ) border-box;
}
:root:not(.light) .topbar {
  background:
    linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box,
    linear-gradient(135deg,
      rgba(255, 46, 134, 0.95) 0%,
      rgba(255, 46, 134, 0.60) 10%,
      rgba(255, 107, 176, 0.45) 18%,
      rgba(0, 0, 0, 0.28) 28%,
      rgba(0, 0, 0, 0.10) 50%,
      rgba(0, 0, 0, 0.00) 70%
    ) border-box;
  border-width: 0.5px; /* borde más delgado en dark */
=======
  background: linear-gradient(180deg, rgba(var(--card)), rgba(var(--card)) 60%, rgba(0,0,0,0));
  border-bottom: 1px solid rgba(var(--border));
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
}
.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; }
.dropdown { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: rgba(var(--card)); border: 1px solid #ffcfe4; border-radius: 10px; padding: 6px; backdrop-filter: blur(var(--glass-blur)); min-width: 180px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); }
.menu button:hover { transform: none; background: rgba(255,255,255,0.06); }

/* Layout */
.shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; gap: 12px; padding: 12px; }
<<<<<<< HEAD
.panel { 
  border: 1px solid #ffcfe4; /* light más claro */
  background: linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box;
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur));
  overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}
:root:not(.light) .panel { border-color: #ff2e86; border-width: 0.5px; /* borde más delgado en dark */ }
=======
.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; }
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
.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.fullscreen { width: 96vw; max-width: 96vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
.modal.fullscreen > .modal-header { position: sticky; top: 0; background: rgba(var(--card)); z-index: 1; }
.modal.fullscreen > .modal-footer { position: sticky; bottom: 0; background: rgba(var(--card)); z-index: 1; }
.modal.fullscreen > div:nth-child(2) { flex: 1 1 auto; overflow: auto; }
.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)); }
<<<<<<< HEAD

/* Scrollbars */
/* Firefox */
html, body, .scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
/* WebKit */
html::-webkit-scrollbar, body::-webkit-scrollbar, .scroll::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid transparent; /* creates inset padding */
  background-clip: content-box;
  box-shadow: 0 0 10px rgba(255, 46, 134, 0.15);
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
  background-clip: content-box;
}
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active, .scroll::-webkit-scrollbar-thumb:active {
  background: var(--sb-thumb-active);
  background-clip: content-box;
}
=======
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722