/* ============================================================
   LAYOUT — sidebar fijo + main content
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--surface-0);
  color:var(--ink-900);
  font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{max-width:100%; display:block;}

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar-logo-link{
  display:block; width:100%; max-width:190px; margin:0 0 var(--space-5);
  text-decoration:none;
}
.sidebar-logo{
  width:100%; height:auto; object-fit:contain; object-position:left center;
}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  position:sticky;
  top:0;
  height:100vh;
  padding:var(--space-6) var(--space-5) var(--space-5);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  background:var(--surface-0);
}

.sidebar-brand{
  display:flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--ink-900); margin-bottom:var(--space-1);
}
.sidebar-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--action);}
.sidebar-tag{font-size:var(--fs-caption); color:var(--ink-500); margin-bottom:var(--space-7); letter-spacing:.02em;}

.sidebar-nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-s);
  font-size:var(--fs-body-s); font-weight:500; color:var(--ink-700);
  text-decoration:none; transition:background .15s var(--ease), color .15s var(--ease);
  position:relative;
}
.nav-item .n{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-300); width:18px; flex-shrink:0;
}
.nav-item:hover{background:var(--surface-2);}
.nav-item.is-active{background:var(--action-tint); color:var(--action);}
.nav-item.is-active .n{color:var(--action);}
.nav-item.is-soon{color:var(--ink-300); cursor:default;}
.nav-item.is-soon:hover{background:transparent;}
.soon-tag{
  margin-left:auto; font-size:9.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-300); background:var(--surface-2); padding:2px 6px; border-radius:20px;
}

.sidebar-footer{
  margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border);
  font-size:11px; color:var(--ink-300);
}

.conn-indicator{
  display:flex; align-items:center; font-size:11.5px; font-weight:700; color:var(--ink-700);
  margin-bottom:4px;
}
.sync-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--brand-warmgray); margin-right:7px; flex-shrink:0;}
.sync-dot.is-connecting{background:var(--brand-amber); animation:navPulse 1.1s ease-in-out infinite;}
.sync-dot.is-connected{background:var(--action);}
.sync-dot.is-error{background:var(--brand-guinda);}
@keyframes navPulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

.sync-time{font-size:10.5px; color:var(--ink-300); margin-bottom:8px;}
.sync-error{font-size:10.5px; color:var(--brand-guinda); margin-bottom:8px; line-height:1.4;}

.connect-link{
  display:block; margin-top:2px; background:none; border:none; padding:0;
  font-family:var(--font-text); font-size:11px; font-weight:600; color:var(--ink-500);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.connect-link:hover{color:var(--action);}

.footer-actions{display:flex; flex-direction:column; gap:2px; margin-top:2px;}
.mini-btn{
  text-align:left; background:none; border:none; padding:5px 0;
  font-family:var(--font-text); font-size:11px; font-weight:600; color:var(--ink-500); cursor:pointer;
}
.mini-btn:hover{color:var(--action);}
.mini-btn:disabled{opacity:.5; cursor:default;}
.connect-link:hover{color:var(--action);}

/* ---------- MAIN ---------- */
.main{
  flex:1;
  min-width:0;
}

.content-max{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--space-7);
}

/* ---------- Banner "contenido local" (discreto, no bloqueante) ---------- */
.local-banner{
  display:none; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:10px 14px; margin:var(--space-5) 0 0; font-size:12px; color:var(--ink-500);
}
.local-banner.show{display:flex;}
.local-banner button{
  background:none; border:none; color:var(--ink-300); font-size:16px; line-height:1; cursor:pointer; flex-shrink:0;
}
.local-banner button:hover{color:var(--ink-700);}

/* ---------- RESPONSIVE ---------- */
.sidebar-toggle{display:none;}

@media (max-width: 960px){
  .app-shell{flex-direction:column;}
  .sidebar{
    width:100%; height:auto; position:relative;
    border-right:none; border-bottom:1px solid var(--border);
    padding:var(--space-4) var(--space-5);
  }
  .sidebar-nav{
    flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px;
  }
  .nav-item{white-space:nowrap;}
  .sidebar-footer{display:none;}
  .content-max{padding:0 var(--space-5);}
}