/* ═══ Lunamoon Suite · Shell: sidebar + topbar ═══ */

/* ══════ APP SHELL ══════ */
#app{display:none;height:100vh;overflow:hidden;}
#app.visible{display:flex;}

/* ══════ SIDEBAR ══════ */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:width .28s cubic-bezier(.4,0,.2,1);
  position:relative;z-index:100;
  box-shadow:2px 0 12px rgba(30,37,53,.04);
}
.sidebar.collapsed{width:var(--sidebar-collapsed);}

/* ── Header / marca ── */
.sidebar-header{
  padding:0 12px 0 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;height:var(--topbar-h);
  position:relative;
}
.sidebar-brand{display:flex;align-items:center;min-width:0;flex:1;text-decoration:none;}
.sidebar-logo-img{
  height:24px;width:auto;display:block;
  transition:opacity .18s;
}
.sidebar-logo-mark{
  display:none;width:34px;height:34px;flex-shrink:0;
  background:linear-gradient(135deg,var(--sky),var(--teal));
  border-radius:10px;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 2px 8px rgba(75,168,192,.3);
}
.sidebar-logo-mark svg{width:18px;height:18px;}
.sidebar.collapsed .sidebar-header{padding:0;justify-content:center;}
.sidebar.collapsed .sidebar-logo-img{display:none;}
.sidebar.collapsed .sidebar-logo-mark{display:flex;}

/* Botón contraer (flota sobre el borde derecho) */
.sidebar-collapse-btn{
  position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--txt3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(30,37,53,.10);
  transition:color .15s,border-color .15s,transform .28s,opacity .15s;
  z-index:2;opacity:0;
}
.sidebar:hover .sidebar-collapse-btn{opacity:1;}
.sidebar-collapse-btn:hover{color:var(--sky-d);border-color:var(--sky);}
.sidebar-collapse-btn svg{width:14px;height:14px;transition:transform .28s;}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);}

/* ── Navegación ── */
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 12px;}
.nav-section{
  font-size:10px;font-weight:700;color:var(--txt3);
  text-transform:uppercase;letter-spacing:1.1px;
  padding:16px 10px 6px;white-space:nowrap;overflow:hidden;
  transition:opacity .15s;
}
.nav-section:first-child{padding-top:6px;}
.sidebar.collapsed .nav-section{
  height:1px;padding:0;margin:10px 12px;
  background:var(--border);color:transparent;overflow:hidden;
}
.sidebar.collapsed .nav-section:first-child{display:none;}

.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;margin-bottom:2px;
  border-radius:10px;
  cursor:pointer;transition:background .15s,color .15s;
  width:100%;text-align:left;
  background:transparent;border:none;color:var(--txt2);
  font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:500;
  position:relative;white-space:nowrap;
}
.nav-item:hover{background:var(--bg3);color:var(--txt);}
.nav-item:focus-visible{outline:2px solid var(--sky);outline-offset:1px;}
.nav-item.active{background:var(--sky-l);color:var(--sky-d);font-weight:600;}
.nav-item.active::before{
  content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:56%;background:var(--sky);border-radius:0 3px 3px 0;
}
.nav-icon{
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt3);transition:color .15s;
}
.nav-icon svg{width:18px;height:18px;}
.nav-item:hover .nav-icon{color:var(--txt2);}
.nav-item.active .nav-icon{color:var(--sky-d);}
.nav-label{overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;}
.nav-badge{
  margin-left:auto;background:var(--sky);color:#fff;
  font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;
}

/* Colapsado: solo icono + tooltip */
.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0;gap:0;}
.sidebar.collapsed .nav-item.active::before{left:-10px;}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge{display:none;}
.sidebar.collapsed .nav-item::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-4px);
  background:var(--txt);color:#fff;font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:7px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;
  box-shadow:var(--shadow-md);z-index:300;
}
.sidebar.collapsed .nav-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0);}

/* ── Footer / usuario ── */
.sidebar-footer{padding:10px;border-top:1px solid var(--border);flex-shrink:0;}
.user-widget{
  display:flex;align-items:center;gap:10px;padding:8px 8px;
  border-radius:10px;transition:background .15s;position:relative;
}
.user-widget:hover{background:var(--bg3);}
.user-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.user-info{overflow:hidden;flex:1;min-width:0;}
.user-name{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:11px;color:var(--txt3);white-space:nowrap;display:flex;align-items:center;gap:5px;}
.user-role-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.user-logout{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:none;border:none;color:var(--txt3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.user-logout:hover{background:var(--rose-l);color:var(--rose);}
.user-logout svg{width:16px;height:16px;}
.sidebar.collapsed .user-widget{justify-content:center;padding:6px 0;}
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-logout{display:none;}
.sidebar.collapsed .user-widget::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);
  background:var(--txt);color:#fff;font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:7px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:300;
}
.sidebar.collapsed .user-widget:hover::after{opacity:1;}

/* Backdrop (solo móvil) */
.sidebar-backdrop{display:none;}

/* ══════ TOPBAR ══════ */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{
  height:var(--topbar-h);background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:14px;
  flex-shrink:0;box-shadow:0 1px 4px rgba(30,37,53,.04);
}
.topbar-toggle{
  background:none;border:none;color:var(--txt3);cursor:pointer;
  width:32px;height:32px;border-radius:8px;transition:color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;margin-left:-8px;
}
.topbar-toggle svg{width:18px;height:18px;}
.topbar-toggle:hover{color:var(--txt);background:var(--bg3);}
.topbar-title{font-size:15px;font-weight:700;color:var(--txt);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.fx-badge{
  display:flex;align-items:center;gap:6px;padding:5px 12px;
  background:var(--bg3);border:1px solid var(--border);border-radius:20px;
  font-size:12px;color:var(--txt2);font-weight:500;white-space:nowrap;
}
.fx-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.content-area{flex:1;overflow-y:auto;padding:28px 32px;}

/* ══════ RESPONSIVE ══════ */
@media (max-width: 900px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:var(--sidebar-w) !important;
    box-shadow:none;
  }
  .sidebar.drawer-open{transform:translateX(0);box-shadow:8px 0 32px rgba(30,37,53,.18);}
  .sidebar.collapsed .sidebar-header{padding:0 12px 0 16px;justify-content:flex-start;}
  .sidebar.collapsed .sidebar-logo-img{display:block;}
  .sidebar.collapsed .sidebar-logo-mark{display:none;}
  .sidebar.collapsed .nav-label,.sidebar.collapsed .user-info,.sidebar.collapsed .user-logout{display:block;}
  .sidebar.collapsed .nav-item{justify-content:flex-start;padding:9px 10px;gap:11px;}
  .sidebar.collapsed .nav-item::after,.sidebar.collapsed .user-widget::after{display:none;}
  .sidebar.collapsed .nav-section{height:auto;padding:16px 10px 6px;margin:0;background:none;color:var(--txt3);}
  .sidebar-collapse-btn{display:none;}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;z-index:99;
    background:rgba(30,37,53,.35);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .sidebar-backdrop.show{opacity:1;pointer-events:auto;}
  .topbar{padding:0 16px;}
  .content-area{padding:20px 16px;}
  .fx-badge{display:none;}
}