/* =========================================================
   TOPBAR + SIDEBAR (admin + cliente)
   - Diseno limpio y simple, copiando logica de facturas
   - Topbar SIN marca (la marca esta en el sidebar)
   - En movil: sidebar empieza debajo del topbar al abrirse
   ========================================================= */

/* Limpiar pseudo-elementos heredados */
html body .topbar:before,
html body .topbar:after{
  content:none!important;
  display:none!important;
}

/* ============ TOPBAR (escritorio + base) ============ */
html body .topbar{
  position:sticky!important;
  top:0!important;
  width:auto!important;
  height:72px!important;
  min-height:72px!important;
  margin:0!important;
  padding:0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  background:var(--topbar)!important;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--topbar) 92%,white 4%) 0%,var(--topbar) 100%)!important;
  border-bottom:1px solid color-mix(in srgb,var(--acc) 28%,transparent)!important;
  box-shadow:0 6px 22px rgba(0,0,0,.35)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  z-index:50!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
}

html body.light .topbar{
  background:var(--topbar)!important;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--topbar) 96%,white) 0%,var(--topbar) 100%)!important;
  border-bottom-color:color-mix(in srgb,var(--acc) 22%,transparent)!important;
  box-shadow:0 6px 18px rgba(15,23,42,.08)!important;
}

/* Buscador (oculto siempre, visible solo en pantallas grandes) */
html body .topbar .top-search{display:none!important}
@media(min-width:1180px){
  html body .topbar .top-search{
    display:flex!important;
    align-items:center;
    gap:10px;
    padding:0 14px;
    height:44px;
    width:min(380px,30vw);
    border-radius:14px;
    border:1px solid rgba(139,92,246,.22)!important;
    background:rgba(255,255,255,.04)!important;
    color:rgba(255,255,255,.78);
  }
  html body.light .topbar .top-search{
    background:rgba(15,23,42,.04)!important;
    border-color:rgba(15,23,42,.12)!important;
    color:#0f172a!important;
  }
}

/* Acciones (theme + user + salir) */
html body .topbar .top-actions{
  display:flex!important;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  margin:0!important;
  padding:0!important;
  position:static!important;
  margin-left:auto!important;
}

html body .topbar .theme-toggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)!important;
  background:color-mix(in srgb,var(--acc) 16%,transparent)!important;
  color:var(--acc)!important;
  cursor:pointer;
  box-shadow:none!important;
  position:relative!important;
}
html body.light .topbar .theme-toggle{
  background:color-mix(in srgb,var(--acc) 10%,transparent)!important;
  border-color:color-mix(in srgb,var(--acc) 28%,transparent)!important;
  color:var(--acc)!important;
}
html body .topbar .theme-toggle i{font-size:19px!important;line-height:1!important}

html body .topbar .user-chip{
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:4px 14px 4px 4px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);
  background:color-mix(in srgb,var(--acc) 14%,transparent);
  min-height:46px;
  transition:background .2s,border-color .2s;
}
html body .topbar .user-chip:hover{
  background:color-mix(in srgb,var(--acc) 22%,transparent);
  border-color:color-mix(in srgb,var(--acc) 42%,transparent);
}
html body.light .topbar .user-chip{
  background:color-mix(in srgb,var(--acc) 8%,transparent)!important;
  border-color:color-mix(in srgb,var(--acc) 22%,transparent)!important;
}
html body .topbar .user-chip>span{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:50%!important;
  background:var(--gradient)!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  font-weight:900!important;
  overflow:hidden!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--acc) 35%,transparent)!important;
}
html body .topbar .user-chip>span>.user-chip-logo{
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
  display:block!important;
}
html body .topbar .user-chip>div{display:flex;flex-direction:column;line-height:1.15}
html body .topbar .user-chip b{color:var(--text)!important;font-weight:850!important;font-size:13px!important;white-space:nowrap}
html body .topbar .user-chip small{color:var(--acc)!important;font-size:11px!important;font-weight:650;white-space:nowrap;opacity:.92!important}

html body .topbar .top-actions>a{
  padding:11px 18px!important;
  border-radius:12px!important;
  background:var(--gradient)!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:13px!important;
  text-decoration:none!important;
  box-shadow:0 6px 20px color-mix(in srgb,var(--acc) 40%,transparent)!important;
  border:0!important;
  display:inline-flex;
  align-items:center;
  height:42px;
}

/* Hamburguesa oculta en escritorio */
html body .topbar .mobile-menu{display:none!important}

/* ============ MOVIL (max-width:980px) ============ */
@media(max-width:980px){
  html body .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    height:64px!important;
    min-height:64px!important;
    padding:0 14px!important;
    margin:0!important;
    background:#0d1230!important;
    background-color:#0d1230!important;
    background-image:none!important;
    border-bottom:1px solid rgba(139,92,246,.32)!important;
    box-shadow:0 4px 18px rgba(0,0,0,.4)!important;
    z-index:260!important;
    justify-content:space-between!important;
  }
  html body.light .topbar{
    background:#ffffff!important;
    background-color:#ffffff!important;
    background-image:none!important;
    box-shadow:0 4px 14px rgba(15,23,42,.1)!important;
  }
  html body .topbar .mobile-menu{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#7c3aed,#d946ef)!important;
    border:0!important;
    color:#fff!important;
    font-size:22px!important;
    box-shadow:0 6px 16px rgba(139,92,246,.42)!important;
    cursor:pointer;
    flex:0 0 auto;
    position:static!important;
  }
  html body .topbar .top-actions{
    gap:8px!important;
    margin-left:auto!important;
    position:static!important;
  }
  html body .topbar .top-actions>a{display:none!important}
  html body .topbar .theme-toggle{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:11px!important;
  }
  html body .topbar .theme-toggle i{font-size:17px!important}
  html body .topbar .user-chip{
    padding:0!important;
    border:0!important;
    background:transparent!important;
    min-height:auto!important;
  }
  html body.light .topbar .user-chip{background:transparent!important;border:0!important}
  html body .topbar .user-chip>span{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }
  html body .topbar .user-chip>div:not(.user-chip-menu){display:none!important}

  /* Espacio para el topbar fijo */
  html body.area-admin .content,
  html body.area-client .content{padding-top:80px!important}

  /* Sidebar empieza DEBAJO del topbar (asi se ve la marca completa al abrir el menu) */
  html body .sidebar{
    top:64px!important;
    height:calc(100vh - 64px)!important;
    height:calc(100dvh - 64px)!important;
    z-index:270!important;
  }
}

@media(max-width:480px){
  html body .topbar{
    height:60px!important;
    min-height:60px!important;
    padding:0 10px!important;
  }
  html body.area-admin .content,
  html body.area-client .content{padding-top:74px!important}
  html body .sidebar{
    top:60px!important;
    height:calc(100vh - 60px)!important;
    height:calc(100dvh - 60px)!important;
  }
}

/* ============ DROPDOWN MENU del avatar ============ */
html body .topbar .user-chip{
  position:relative;
  cursor:pointer;
  user-select:none;
}
html body .topbar .user-chip-menu{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:500;
  min-width:268px;
  display:none!important;
  flex-direction:column;
  border-radius:18px;
  background:var(--card);
  background-image:linear-gradient(155deg,color-mix(in srgb,var(--card) 96%,var(--acc) 4%),var(--card) 60%);
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent);
  box-shadow:0 24px 56px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--acc) 8%,transparent);
  padding:6px;
  overflow:hidden;
  transform-origin:top right;
  animation:userChipMenuIn .18s ease-out;
}
html body.light .topbar .user-chip-menu{
  background:var(--card);
  background-image:linear-gradient(155deg,color-mix(in srgb,var(--card) 96%,var(--acc) 6%),var(--card) 60%);
  border-color:color-mix(in srgb,var(--acc) 22%,transparent);
  box-shadow:0 24px 50px rgba(15,23,42,.18),0 0 0 1px color-mix(in srgb,var(--acc) 6%,transparent);
}
@keyframes userChipMenuIn{
  from{opacity:0;transform:translateY(-6px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
html body .topbar .user-chip.open .user-chip-menu{display:flex!important}

/* Cabecera del menú con avatar */
html body .topbar .user-chip-menu-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px 14px;
  margin:-6px -6px 6px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,transparent),color-mix(in srgb,var(--acc2) 12%,transparent));
  border-bottom:1px solid color-mix(in srgb,var(--acc) 18%,transparent);
}
html body.light .topbar .user-chip-menu-head{
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--acc2) 8%,transparent));
  border-bottom-color:color-mix(in srgb,var(--acc) 14%,transparent);
}
html body .topbar .user-chip-menu-avatar{
  width:46px;height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gradient);
  color:#fff;
  font-weight:900;
  font-size:17px;
  flex:0 0 auto;
  overflow:hidden;
  box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 40%,transparent),inset 0 0 0 2px rgba(255,255,255,.18);
}
html body .topbar .user-chip-menu-avatar>img,
html body .topbar .user-chip-menu-avatar>.user-chip-logo{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important;display:block!important}
html body .topbar .user-chip-menu-head>div{min-width:0;flex:1}
html body .topbar .user-chip-menu-head b{display:block;font-size:14px;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
html body .topbar .user-chip-menu-head small{display:block;font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* Secciones del menú */
html body .topbar .user-chip-menu-section{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 0;
  position:relative;
}
html body .topbar .user-chip-menu-section + .user-chip-menu-section{
  border-top:1px solid color-mix(in srgb,var(--acc) 14%,transparent);
  margin-top:4px;
  padding-top:6px;
}
html body.light .topbar .user-chip-menu-section + .user-chip-menu-section{
  border-top-color:color-mix(in srgb,var(--acc) 12%,transparent);
}

/* Items del menú */
html body .topbar .user-chip-menu a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:13px;
  letter-spacing:-.005em;
  position:relative;
  transition:background .15s,color .15s,transform .15s;
}
html body .topbar .user-chip-menu a span{flex:1;min-width:0}
html body .topbar .user-chip-menu a:hover{
  background:color-mix(in srgb,var(--acc) 16%,transparent);
  color:var(--acc);
  transform:translateX(2px);
}
html body.light .topbar .user-chip-menu a:hover{
  background:color-mix(in srgb,var(--acc) 10%,transparent);
  color:var(--acc);
}
html body .topbar .user-chip-menu a i{
  font-size:17px;
  color:var(--acc);
  width:22px;
  text-align:center;
  flex:0 0 22px;
}
html body .topbar .user-chip-menu a.danger{color:var(--danger)}
html body .topbar .user-chip-menu a.danger i{color:var(--danger)}
html body .topbar .user-chip-menu a.danger:hover{
  background:color-mix(in srgb,var(--danger) 16%,transparent);
  color:var(--danger);
}
html body.light .topbar .user-chip-menu a.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
html body .topbar .user-chip-divider{height:1px;background:color-mix(in srgb,var(--acc) 18%,transparent);margin:4px 4px}

/* Estilos del logout en sidebar cliente */
.nav-item.nav-logout{color:#fb7185!important}
.nav-item.nav-logout i{color:#fb7185}
.nav-item.nav-logout:hover{background:rgba(244,63,94,.14)!important;border-color:rgba(244,63,94,.32)!important}

/* Estilos del logout en sidebar admin */
.admin-sidebar-item.admin-logout-item{color:#fb7185}
.admin-sidebar-item.admin-logout-item:hover{background:rgba(244,63,94,.08);border-radius:14px}