/* layout.css — Rejilla de 3 columnas separadas por hairlines + responsive. */
#app{
  display:grid;grid-template-columns:var(--col-nav) minmax(0,var(--col-feed)) var(--col-panel);
  justify-content:center;max-width:1180px;margin:0 auto;
}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 18px;border-right:1px solid var(--line)}
.feed{border-right:1px solid var(--line);min-height:100vh}
.panel{padding:24px 20px}

.topbar{display:none}
.fab{display:none}

@media(max-width:980px){
  #app{grid-template-columns:var(--col-nav) minmax(0,1fr)}
  .panel{display:none}
}
@media(max-width:700px){
  #app{grid-template-columns:1fr}
  .sidebar{display:none}
  .feed{border:none}
  .topbar{display:flex;flex-direction:column;gap:12px;position:sticky;top:0;z-index:6;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 14px}
  .pills{display:flex;gap:16px;overflow-x:auto}
  .fab{display:flex;position:fixed;right:16px;bottom:16px;z-index:7;padding:10px 16px;border:1px solid var(--accent);color:var(--accent);background:var(--bg);font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
}