/* ══════════════════════════════════════
   APP LAYOUT — css/layout.css
══════════════════════════════════════ */
#app { height:100vh; display:flex; flex-direction:column; }
.app-shell { flex:1; display:flex; overflow:hidden; position:relative; z-index:1; }

/* ── Proactive Banner ── */
.promo-bar {
  padding:8px 22px; display:flex; align-items:center; gap:12px;
  font-size:12px; flex-shrink:0;
  background:linear-gradient(90deg,rgba(59,142,255,.12),rgba(0,229,160,.08));
  border-bottom:1px solid rgba(59,142,255,.2);
}
.promo-bar.warn { background:linear-gradient(90deg,rgba(255,181,71,.1),rgba(255,92,106,.07)); border-color:rgba(255,181,71,.25); }
.promo-pulse { width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; animation:pulse 2s ease-in-out infinite; }
.promo-pulse.amber { background:var(--amber); }
.promo-text { color:var(--m3); flex:1; line-height:1.4; }
.promo-text strong { color:var(--t); }
.promo-cta {
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px;
  border:none; background:var(--blue); color:#fff; cursor:pointer; white-space:nowrap; transition:all .15s;
}
.promo-cta:hover { background:var(--blue2); }
.promo-dismiss { font-size:13px; color:var(--m2); cursor:pointer; padding:4px 6px; border-radius:4px; line-height:1; }
.promo-dismiss:hover { color:var(--m3); }

/* ── Sidebar ── */
.sidebar {
  width:var(--sw); flex-shrink:0; height:100%;
  background:var(--s1); border-right:1px solid var(--b);
  display:flex; flex-direction:column; overflow:hidden;
}
.sb-header { padding:16px 14px 12px; border-bottom:1px solid var(--b); flex-shrink:0; }
.sb-logo { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sb-logo-mark { width:24px; height:24px; border-radius:7px; background:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-logo-mark svg { width:12px; height:12px; }
.sb-logo-name { font-size:15px; font-weight:900; letter-spacing:-.4px; }
.sb-logo-name span { color:var(--blue); }
.sb-version { font-size:8px; color:var(--m); font-family:var(--mo); }
/* Nicho switcher */
.nicho-switcher { display:flex; background:var(--s2); border:1px solid var(--b2); border-radius:8px; padding:3px; gap:2px; }
.ns-btn {
  flex:1; padding:5px 3px; border-radius:6px; font-size:9px; font-weight:800;
  text-align:center; cursor:pointer; color:var(--m2); border:none; background:transparent;
  letter-spacing:.03em; text-transform:uppercase; transition:all .2s;
}
.ns-btn.active        { background:var(--blue); color:#fff; }
.ns-btn.active.law    { background:var(--purple); }
.ns-btn.active.clinic { background:var(--teal); color:#000; }
/* Nav */
.sb-nav { flex:1; overflow-y:auto; padding:6px 0; }
.sb-section {
  font-size:9px; font-weight:700; color:var(--m); letter-spacing:.14em;
  text-transform:uppercase; padding:12px 14px 5px; font-family:var(--mo);
}
.nav-item {
  display:flex; align-items:center; gap:8px; padding:7px 14px;
  font-size:12px; font-weight:600; color:var(--m2); cursor:pointer;
  transition:all .15s; position:relative; border:none; background:transparent;
  width:100%; text-align:left;
}
.nav-item:hover { color:var(--t); background:rgba(255,255,255,.028); }
.nav-item.active { color:var(--t); }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:18px; width:3px; background:var(--blue); border-radius:0 3px 3px 0;
}
.nav-icon { width:14px; height:14px; opacity:.55; flex-shrink:0; }
.nav-item.active .nav-icon { opacity:1; }
.nav-badge { margin-left:auto; font-size:9px; font-weight:800; border-radius:20px; padding:1px 6px; font-family:var(--mo); }
.nav-badge.red    { background:var(--red); color:#fff; }
.nav-badge.blue   { background:var(--bd); color:var(--blue); }
.nav-badge.green  { background:var(--gd); color:var(--green); }
.nav-badge.amber  { background:var(--ad); color:var(--amber); }
/* Footer */
.sb-footer { border-top:1px solid var(--b); padding:12px 14px; flex-shrink:0; }
.sb-user { display:flex; align-items:center; gap:8px; cursor:pointer; }
.sb-avatar { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--green)); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#000; font-family:var(--mo); flex-shrink:0; }
.sb-user-name { font-size:12px; font-weight:700; }
.sb-user-plan { font-size:10px; color:var(--blue); font-weight:600; }
.sb-online-dot { width:6px; height:6px; background:var(--green); border-radius:50%; margin-left:auto; animation:blink 2.5s ease-in-out infinite; }

/* ── Main wrap ── */
.main-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
/* Topbar */
.topbar {
  height:var(--th); background:var(--s1); border-bottom:1px solid var(--b);
  display:flex; align-items:center; padding:0 22px; gap:10px; flex-shrink:0;
}
.tb-left {}
.tb-title { font-size:15px; font-weight:800; letter-spacing:-.3px; }
.tb-sub   { font-size:11px; color:var(--m2); }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:7px; }
.ai-live-chip {
  display:flex; align-items:center; gap:5px; background:var(--bd);
  border:1px solid rgba(59,142,255,.25); border-radius:20px; padding:4px 10px;
  font-size:10px; font-weight:700; color:var(--blue);
}
.ai-live-dot { width:5px; height:5px; background:var(--blue); border-radius:50%; animation:blink 1.2s ease-in-out infinite; flex-shrink:0; }
/* Page area */
.page-area { flex:1; overflow-y:auto; min-height:0; }
.page { display:none; }

/* Páginas de bloque: display:block, el contenido desborda y page-area scrollea */
.page.active { display:block; animation:fadeUp .28s ease; }

/* Páginas con scroll interno (inbox, agenda): ocupan exactamente el alto disponible */
.page.active.page-fill { display:flex; flex-direction:column; height:100%; }

/* Demo data notice */
.demo-notice {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px;
  background:rgba(255,181,71,.07);
  border:1px solid rgba(255,181,71,.2);
  border-radius:10px;
  font-size:11px; color:var(--m3);
  line-height:1.5; margin-bottom:16px;
}
.demo-notice strong { color:var(--amber); }
.demo-notice-icon { font-size:14px; flex-shrink:0; }

/* ── Supabase setup modal ── */
#modal-supabase {
  position:fixed; inset:0; z-index:1000; display:flex;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
}
#modal-supabase .modal { border-color:rgba(59,142,255,.35); max-width:460px; width:100%; }