/* ═══════════════════════════════════════════════════════════════
 * shell-nav.css — Sidebar shell del dashboard-ecommerce.
 *
 * Clonado de Business OS (/Volumes/ACASIS YT/Business OS/skills/
 * client-apps/contract-generator/shell-nav.css) y reducido a las
 * piezas que esta app utiliza: sidebar fijo, header del sidebar
 * (logo + brand + toggle), quick-actions bar, footer con user
 * menu, dropdown del user menu. Sin palette ni bell.
 *
 * Mantiene el namespace --shell-* invariante al tema.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────── */
.nav-sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--shell-bg);
  border-right:1px solid var(--shell-border-subtle);
  z-index:var(--z-sidebar,95);
  display:flex;flex-direction:column;
  transition:width var(--shell-transition), transform var(--shell-transition);
  overflow:hidden;
}
body.nav-collapsed .nav-sidebar{ width:var(--sidebar-w-collapsed); }

/* Header del sidebar — logo + brand + toggle a la derecha */
.nav-sidebar__header{
  height:var(--header-h);
  display:flex;align-items:center;
  gap:10px;
  padding:0 12px 0 16px;
  border-bottom:1px solid var(--shell-border-subtle);
  flex-shrink:0;
}
.nav-sidebar__logowrap{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
}
.nav-sidebar__logo{
  height:22px;width:auto;display:block;flex-shrink:0;
}
.nav-sidebar__logo-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 10px var(--brand);
  flex-shrink:0;
}
.nav-sidebar__brand-spacer{ flex:1; }
body.nav-collapsed .nav-sidebar__logo-dot{ display:none; }
body.nav-collapsed .nav-sidebar__brand-spacer{ display:none; }

.nav-sidebar__toggle{
  background:transparent;
  border:1px solid transparent;
  color:var(--shell-text-dim);
  padding:5px;
  border-radius:5px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.nav-sidebar__toggle:hover{
  background:rgba(255,255,255,0.05);
  color:var(--shell-text);
}
.nav-sidebar__toggle:focus-visible{
  outline:none;border-color:var(--shell-border);
}
.nav-sidebar__toggle svg{ display:block; }
body.nav-collapsed .nav-sidebar__header{
  padding:0;justify-content:center;gap:0;
}
body.nav-collapsed .nav-sidebar__logo{ display:none; }
body.nav-collapsed .nav-sidebar__toggle{ padding:7px; }

/* ── Quick actions bar ──────────────────────────────────
 * Botón pill "Quick actions ⌘K" + lupa de búsqueda. */
.nav-sidebar__quick{
  display:flex;align-items:center;gap:6px;
  padding:12px 8px 4px;flex-shrink:0;
}
.nav-sidebar__quick-btn{
  flex:1;display:inline-flex;align-items:center;gap:8px;
  height:30px;padding:0 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--shell-border-subtle);
  border-radius:6px;
  color:var(--shell-text-dim);
  font-size:12px;font-weight:500;
  font-family:inherit;
  cursor:pointer;min-width:0;
  transition:background .15s, border-color .15s, color .15s;
}
.nav-sidebar__quick-btn:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--shell-border);
  color:var(--shell-text-secondary);
}
.nav-sidebar__quick-btn svg{ flex-shrink:0; }
.nav-sidebar__quick-label{
  flex:1;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-sidebar__quick-kbd{
  flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--shell-text-disabled);
  letter-spacing:0.5px;
}
.nav-sidebar__quick-search{
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--shell-border-subtle);
  border-radius:6px;
  color:var(--shell-text-dim);
  cursor:pointer;flex-shrink:0;
  transition:background .15s, border-color .15s, color .15s;
}
.nav-sidebar__quick-search:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--shell-border);
  color:var(--shell-text-secondary);
}
body.nav-collapsed .nav-sidebar__quick{ display:none; }

/* ── Body del sidebar ───────────────────────────────────── */
.nav-sidebar__body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:14px 8px;
  display:flex;flex-direction:column;gap:18px;
}

.nav-section{
  display:flex;flex-direction:column;gap:2px;
}
.nav-section__label{
  font-size:11px;font-weight:500;
  text-transform:none;letter-spacing:0;
  color:var(--shell-text-dim);
  padding:0 10px 6px;
  opacity:0.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity var(--shell-transition);
}
body.nav-collapsed .nav-section__label{ opacity:0;height:10px; }

/* ── Items de navegación ───────────────────────────────── */
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:var(--shell-radius);
  font-size:13px;font-weight:500;
  color:var(--shell-text-secondary);
  text-decoration:none;
  background:none;border:none;
  width:100%;text-align:left;
  white-space:nowrap;
  min-height:34px;
  font-family:inherit;cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-item:hover{
  background:rgba(255,255,255,0.04);
  color:var(--shell-text);
}
.nav-item.is-active{
  background:rgba(255,255,255,0.08);
  color:var(--shell-text);
  font-weight:500;
}
.nav-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--shell-brand-ring);
}

.nav-item__icon{
  flex-shrink:0;width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--shell-text-dim);
}
.nav-item:hover .nav-item__icon{ color:var(--shell-text-secondary); }
.nav-item.is-active .nav-item__icon{ color:var(--shell-text); }
.nav-item__icon svg{ display:block; }
.nav-item__label{
  flex:1;overflow:hidden;text-overflow:ellipsis;
  transition:opacity var(--shell-transition);
}
.nav-item__badge{
  margin-left:auto;
  background:var(--brand);color:var(--brand-on);
  font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:4px;
}

body.nav-collapsed .nav-item{
  justify-content:center;padding:8px 0;gap:0;
}
body.nav-collapsed .nav-item__label,
body.nav-collapsed .nav-item__badge{ display:none; }

/* Tooltip al hover en estado colapsado */
body.nav-collapsed .nav-item{ position:relative; }
body.nav-collapsed .nav-item:hover::after{
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--shell-bg-elevated);
  color:var(--shell-text);
  padding:5px 10px;
  border-radius:var(--shell-radius);
  border:1px solid var(--shell-border);
  font-size:12px;white-space:nowrap;
  z-index:200;pointer-events:none;
  box-shadow:var(--shell-shadow-pop);
}

/* ── Footer del sidebar (user menu) ─────────────────────── */
.nav-sidebar__footer{
  border-top:1px solid var(--shell-border-subtle);
  padding:8px;flex-shrink:0;
}

.iug-user-menu{ position:relative; }
.iug-user-menu__btn{
  background:transparent;
  border:1px solid transparent;
  padding:6px 8px;border-radius:6px;
  cursor:pointer;
  display:flex;align-items:center;gap:10px;
  width:100%;
  font-family:inherit;
  transition:background .15s, border-color .15s;
}
.iug-user-menu__btn:hover{ background:rgba(255,255,255,0.04); }
.iug-user-menu__btn[aria-expanded="true"]{ background:rgba(255,255,255,0.06); }
.iug-user-menu__btn:focus-visible{
  outline:none;border-color:var(--shell-border);
}
.iug-user-menu__btn-name{
  flex:1;
  font-size:13px;font-weight:500;
  color:var(--shell-text);
  text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.iug-user-menu__btn-chev{
  color:var(--shell-text-dim);flex-shrink:0;
}
body.nav-collapsed .iug-user-menu__btn{ padding:4px;justify-content:center; }
body.nav-collapsed .iug-user-menu__btn-name,
body.nav-collapsed .iug-user-menu__btn-chev{ display:none; }

.iug-user-menu__avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:var(--brand-on);
  font-size:10px;font-weight:600;
  letter-spacing:-0.2px;user-select:none;flex-shrink:0;
}
.iug-user-menu__avatar--lg{
  width:38px;height:38px;font-size:14px;
}

.iug-user-menu__pop{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;right:0;
  min-width:240px;
  background:var(--shell-bg-elevated);
  border:1px solid var(--shell-border);
  border-radius:10px;
  box-shadow:var(--shell-shadow-pop);
  padding:6px;
  z-index:300;
}
.iug-user-menu__pop[hidden]{ display:none; }

.iug-user-menu__head{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px 10px;
  border-bottom:1px solid var(--shell-border-subtle);
  margin-bottom:4px;
}
.iug-user-menu__id{ min-width:0; }
.iug-user-menu__name{
  font-size:13px;font-weight:600;
  color:var(--shell-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:180px;
}
.iug-user-menu__email{
  font-size:11px;color:var(--shell-text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:180px;
}

.iug-user-menu__item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:8px 10px;
  border:0;background:transparent;
  color:var(--shell-text-secondary);
  font:500 13px/1.2 inherit;font-family:inherit;
  text-align:left;text-decoration:none;
  border-radius:6px;cursor:pointer;
  transition:background .15s, color .15s;
}
.iug-user-menu__item:hover{
  background:rgba(255,255,255,0.06);
  color:var(--shell-text);
}
.iug-user-menu__item svg{ flex-shrink:0;opacity:.8; }
.iug-user-menu__label{ flex:1; }
.iug-user-menu__sep{
  height:1px;
  background:var(--shell-border-subtle);
  margin:4px 6px;
}

/* Theme picker (segmentado) dentro del menú */
.iug-user-menu__theme{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:6px 10px 8px;
}
.iug-user-menu__theme-label{
  font:500 13px/1.2 inherit;
  color:var(--shell-text-secondary);
}
.iug-user-menu__theme-seg{
  display:inline-flex;align-items:stretch;gap:2px;
  padding:3px;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--shell-border-subtle);
  border-radius:8px;
}
.iug-user-menu__theme-opt{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:26px;padding:0;margin:0;
  border:1px solid transparent;background:transparent;
  color:var(--shell-text-dim);
  border-radius:6px;cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.iug-user-menu__theme-opt:hover{
  color:var(--shell-text);
  background:rgba(255,255,255,0.05);
}
.iug-user-menu__theme-opt:focus-visible{
  outline:2px solid var(--brand);outline-offset:1px;
}
.iug-user-menu__theme-opt.is-active{
  background:rgba(255,255,255,0.10);
  color:var(--shell-text);
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 1px 2px rgba(0,0,0,0.35);
}
.iug-user-menu__theme-opt svg{ display:block; }

/* ── Sidebar status (sources / health) — embebido al estilo BOS ─
 * Tarjetas internas en lugar de las viejas listas. */
.nav-sidebar .sources-list{
  display:flex;flex-direction:column;gap:1px;
  padding:0 2px;
}
.nav-sidebar .source-item{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;border-radius:5px;
  font-size:12px;font-weight:500;
  color:var(--shell-text-secondary);
  background:transparent;border:0;
  transition:background .15s, color .15s;
}
.nav-sidebar .source-item:hover{
  background:rgba(255,255,255,0.04);
  color:var(--shell-text);
}
.nav-sidebar .source-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  transition:background .15s, box-shadow .15s;
}
.nav-sidebar .source-dot.ok{
  background:var(--success);
  box-shadow:0 0 6px color-mix(in srgb, var(--success) 55%, transparent);
}
.nav-sidebar .source-dot.warn{ background:var(--warning); }
.nav-sidebar .source-dot.err{ background:var(--danger); }
.nav-sidebar .source-dot.off{ background:var(--shell-text-disabled); }
.nav-sidebar .source-name{
  flex:1;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-sidebar .source-tag{
  font-size:9.5px;font-weight:600;
  color:var(--shell-text-dim);
  letter-spacing:0.04em;text-transform:uppercase;
  flex-shrink:0;
  padding:1px 5px;border-radius:3px;
  background:rgba(255,255,255,0.04);
}
.nav-sidebar .source-tag.is-action{
  cursor:pointer;
  color:var(--shell-brand-ink);
  background:var(--shell-brand-subtle);
  text-transform:none;letter-spacing:0;
}
.nav-sidebar .source-tag.is-action:hover{
  background:color-mix(in srgb, var(--brand) 22%, transparent);
}
/* Footer compacto: punto + última sincronización del cliente actual */
.nav-sidebar .sources-footer{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px 2px;margin-top:4px;
  border-top:1px solid var(--shell-border-subtle);
  font-size:11px;color:var(--shell-text-dim);
  line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-sidebar .sources-footer__dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--shell-text-dim);
  flex-shrink:0;
  transition:background .15s, box-shadow .15s;
}
.nav-sidebar .sources-footer.is-fresh .sources-footer__dot{
  background:var(--success);
  box-shadow:0 0 6px color-mix(in srgb, var(--success) 60%, transparent);
}
.nav-sidebar .sources-footer.is-stale .sources-footer__dot{
  background:var(--warning);
}
.nav-sidebar .sources-footer.is-error .sources-footer__dot{
  background:var(--danger);
}

body.nav-collapsed .nav-sidebar .sources-list,
body.nav-collapsed .nav-sidebar .sources-footer{ display:none; }

/* ── Responsive: <900px → overlay ───────────────────────── */
@media (max-width:899px){
  .nav-sidebar{
    transform:translateX(-100%);
    z-index:200;
    box-shadow:var(--shell-shadow-pop);
  }
  body.nav-overlay-open .nav-sidebar{
    transform:translateX(0);
  }
  body.nav-collapsed .nav-sidebar{ width:var(--sidebar-w); }
  body.nav-collapsed .nav-sidebar__brand{ display:inline;flex:1; }
  body.nav-collapsed .nav-sidebar__logo{ display:block; }
  body.nav-collapsed .nav-section__label{ opacity:0.75;height:auto; }
  body.nav-collapsed .nav-item{ justify-content:flex-start;padding:8px 10px;gap:10px; }
  body.nav-collapsed .nav-item__label{ display:block;opacity:1; }
  body.nav-collapsed .nav-item:hover::after{ display:none; }
  body.nav-collapsed .nav-sidebar__header{ padding:0 12px 0 16px;justify-content:flex-start;gap:10px; }
  body.nav-collapsed .nav-sidebar__quick{ display:flex; }
}

/* ── Backdrop overlay mobile ────────────────────────────── */
.nav-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.45);
  z-index:150;opacity:0;pointer-events:none;
  transition:opacity var(--shell-transition);
}
body.nav-overlay-open .nav-backdrop{
  opacity:1;pointer-events:auto;
}
@media (min-width:900px){
  .nav-backdrop{ display:none !important; }
}

/* ── Command Palette (Quick actions + Lupa) ─────────────
 * Modal full-viewport con backdrop + panel centrado superior. */
.iug-pal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 16px 4vh;
}
.iug-pal[hidden]{ display:none; }
.iug-pal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.iug-pal__panel{
  position:relative;width:100%;max-width:580px;
  background:var(--shell-bg-elevated);
  border:1px solid var(--shell-border);
  border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:70vh;
}
.iug-pal__inputbox{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--shell-border-subtle);
}
.iug-pal__icon{ color:var(--shell-text-dim);flex-shrink:0; }
.iug-pal__input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--shell-text);
  font-size:15px;font-weight:400;font-family:inherit;
  min-width:0;
}
.iug-pal__input::placeholder{ color:var(--shell-text-dim); }
.iug-pal__kbd, .iug-pal__footer kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;padding:2px 6px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--shell-border-subtle);
  border-radius:4px;
  color:var(--shell-text-dim);
  text-transform:uppercase;letter-spacing:0.5px;
}
.iug-pal__results{
  flex:1;overflow-y:auto;padding:6px;min-height:80px;
}
.iug-pal__group{
  font-size:11px;font-weight:500;
  color:var(--shell-text-dim);
  padding:8px 10px 4px;
}
.iug-pal__item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:6px;
  color:var(--shell-text-secondary);
  text-decoration:none;
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:background .12s;
  border:0;background:transparent;
  width:100%;text-align:left;font-family:inherit;
}
.iug-pal__item:hover, .iug-pal__item.is-active{
  background:rgba(255,255,255,0.06);
  color:var(--shell-text);
}
.iug-pal__item-icon{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--shell-text-dim);flex-shrink:0;
}
.iug-pal__item.is-active .iug-pal__item-icon{ color:var(--shell-text-secondary); }
.iug-pal__item-label{
  flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.iug-pal__item-hint{
  font-size:11px;color:var(--shell-text-dim);
  margin-left:auto;flex-shrink:0;
}
.iug-pal__empty{
  padding:24px 10px;text-align:center;
  color:var(--shell-text-dim);font-size:13px;
}
.iug-pal__footer{
  display:flex;align-items:center;gap:14px;
  padding:8px 14px;
  border-top:1px solid var(--shell-border-subtle);
  font-size:11px;color:var(--shell-text-dim);
}
.iug-pal__footer span{ display:inline-flex;align-items:center;gap:4px; }
body.iug-pal-open{ overflow:hidden; }