.app-shell{min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;overflow-y:auto;z-index:40;background:var(--kb-text);color:#ffffff;padding:24px 18px;display:flex;flex-direction:column;gap:22px}
.brand{display:flex;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(185,228,245,.22)}
.brand-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--kb-pink);color:var(--kb-text)}
.brand-mark svg{width:23px;height:23px}
.brand strong{display:block;font-size:16px;font-weight:800}
.brand span,.user-card span{display:block;color:var(--kb-blue);font-size:12px;font-weight:400}
.nav{display:grid;gap:8px}
.nav-item{display:flex;align-items:center;gap:10px;color:#ffffff;text-decoration:none;border-radius:14px;padding:12px 12px;font-weight:500;transition:.16s ease}
.nav-item svg{width:18px;height:18px}
.nav-item.active,.nav-item:hover{background:var(--kb-pink);color:var(--kb-text)}
.user-card{margin-top:auto;display:flex;gap:10px;align-items:center;background:rgba(185,228,245,.14);border-radius:16px;padding:12px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--kb-blue);color:var(--kb-text);font-weight:800}
.main{min-width:0;min-height:100vh;margin-left:248px;padding:24px 28px}
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}
.title-row{display:flex;align-items:center;gap:10px}
h1{margin:0;font-size:28px;line-height:1.08;letter-spacing:-.03em;font-weight:800}
.topbar p{margin:5px 0 0;color:var(--kb-muted);font-weight:400}
.pill-soft{font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--kb-blue);color:var(--kb-text)}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.toast{position:fixed;right:20px;bottom:20px;z-index:90;background:var(--kb-text);color:#ffffff;border-radius:12px;padding:12px 16px;box-shadow:none;display:none}
.toast.show{display:block}
@media(max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;left:auto;top:auto;bottom:auto;width:auto;overflow:visible;border-radius:0 0 18px 18px}
  .nav{grid-template-columns:repeat(2,1fr)}
  .main{margin-left:0;padding:18px}
  .topbar{display:block}
  .top-actions{justify-content:flex-start;margin-top:14px}
  .search-box{min-width:100%}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
.auth-error{background:#ffd166;border:1px solid #ffafcc;color:#03045e;border-radius:14px;padding:10px 12px;font-weight:800;margin:10px 0 14px}

/* Nanas Seguras - logo profesional en sidebar */
.sidebar-logo-wrap{
  justify-content:center;
  padding:4px 0 22px;
  border-bottom:1px solid rgba(185,228,245,.22);
}
.sidebar-logo{
  display:block;
  width:152px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}


/* Ajuste solicitado: logo dentro de círculo blanco fijo en el sidebar */
.sidebar{background:#151e31!important;color:#fff!important;}
.sidebar-logo-wrap{justify-content:center;padding:10px 0 22px;border-bottom:1px solid rgba(255,255,255,.18);}
.sidebar-logo-wrap::before{content:none!important;}
.sidebar-logo{width:132px;height:132px;border-radius:50%;padding:14px;background:#fff;object-fit:contain;object-position:center;box-shadow:0 16px 36px rgba(0,0,0,.24);filter:none;}
body[data-theme="dark"] .sidebar{background:#151e31!important;color:#fff!important;border-right:0!important;}
body[data-theme="dark"] .nav-item{color:#fff!important;}
body[data-theme="dark"] .sidebar .user-card{background:rgba(255,255,255,.10);}
body[data-theme="dark"] .sidebar .logout-btn{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.10);}


/* Corrección final: logo completo visible dentro de círculo blanco */
.sidebar-logo-wrap{
  justify-content:center!important;
  padding:12px 0 24px!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
}
.sidebar-logo-badge{
  width:154px;
  height:154px;
  border-radius:50%;
  background:#ffffff;
  display:grid;
  place-items:center;
  box-shadow:0 18px 38px rgba(0,0,0,.25);
  overflow:visible;
}
.sidebar-logo-badge .sidebar-logo{
  width:132px!important;
  height:132px!important;
  max-width:132px!important;
  max-height:132px!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  object-fit:contain!important;
  object-position:center!important;
  box-shadow:none!important;
  filter:none!important;
  display:block!important;
}
body[data-theme="dark"] .sidebar-logo-badge{background:#fff!important;}

/* =========================================================
   AJUSTE FINAL LOGO SIDEBAR - Nanas Seguras CRM
   Logo original más pequeño, círculo blanco adaptado y borde delgado
   ========================================================= */
.sidebar{
  background:#151e31!important;
  color:#ffffff!important;
}
.sidebar-logo-wrap{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding:10px 0 22px!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
}
.sidebar-logo-badge{
  width:112px!important;
  height:112px!important;
  border-radius:50%!important;
  background:#ffffff!important;
  border:2px solid #ffd575!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 14px 28px rgba(0,0,0,.22)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.sidebar-logo-badge .sidebar-logo{
  width:86px!important;
  height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
body[data-theme="dark"] .sidebar{
  background:#151e31!important;
  color:#ffffff!important;
}
body[data-theme="dark"] .sidebar-logo-badge{
  background:#ffffff!important;
  border-color:#ffd575!important;
}


/* =========================================================
   Nanas Seguras CRM - Sidebar SaaS limpio
   ========================================================= */
.sidebar-saas{
  width:256px!important;
  padding:22px 16px!important;
  gap:16px!important;
  background:#151e31!important;
  border-right:1px solid rgba(255,255,255,.08);
}
.sidebar-saas .sidebar-logo-wrap{padding:4px 0 18px!important;margin:0 2px 4px!important;}
.sidebar-saas .sidebar-logo-badge{width:110px!important;height:110px!important;border:2px solid #ffd575!important;box-shadow:0 16px 32px rgba(0,0,0,.24)!important;}
.sidebar-saas .sidebar-logo-badge .sidebar-logo{width:84px!important;height:84px!important;}
.nav-saas{display:block!important;gap:0!important;padding-right:2px;}
.nav-section-toggle{width:100%;height:34px;padding:0 8px;margin:12px 0 6px;border:0;background:transparent;color:rgba(255,255,255,.56);display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;cursor:pointer;}
.nav-caret{font-size:16px;line-height:1;color:rgba(255,255,255,.42)}
.nav-section{display:grid;gap:5px;overflow:hidden;}
.nav-section.is-collapsed{display:none;}
.sidebar-saas .nav-item{min-height:42px;border-radius:12px;padding:9px 10px!important;font-size:14px;font-weight:700;color:rgba(255,255,255,.88)!important;background:transparent;}
.sidebar-saas .nav-item svg{width:18px;height:18px;stroke-width:2.25;opacity:.95;}
.sidebar-saas .nav-item:hover{background:rgba(255,255,255,.09)!important;color:#fff!important;transform:translateX(2px);}
.sidebar-saas .nav-item.active{background:#ffafcc!important;color:#03045e!important;box-shadow:0 12px 24px rgba(255,175,204,.23);}
.sidebar-saas .nav-item.active svg{color:#03045e;}
.sidebar-saas .sidebar-bottom{margin-top:auto;display:grid;gap:10px;}
.sidebar-saas .user-card{margin-top:0!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.10);border-radius:16px!important;padding:12px!important;}
.sidebar-saas .user-card strong{color:#fff;font-size:14px;line-height:1.1;display:block;}
.sidebar-saas .user-card span{color:#b9e4f5!important;font-weight:600;}
.sidebar-saas .avatar{background:#b9e4f5!important;color:#03045e!important;}
.logout-btn{min-height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-weight:800;cursor:pointer;}
.logout-btn:hover{background:rgba(255,255,255,.12)}
.main{margin-left:256px!important;background:#f6fbff;}
body[data-theme="dark"] .main{background:#0f172a!important;color:#e5e7eb;}
@media(max-width:980px){.sidebar-saas{width:auto!important}.main{margin-left:0!important}.nav-section{grid-template-columns:repeat(2,1fr)}}


/* ===== SaaS Sidebar UX Fix ===== */
.sidebar-saas{scrollbar-gutter:stable;overscroll-behavior:contain;}
.sidebar-saas::-webkit-scrollbar{width:8px;}
.sidebar-saas::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px;}
.sidebar-saas::-webkit-scrollbar-thumb{background:rgba(185,228,245,.45);border-radius:999px;}
.sidebar-saas .nav-item{max-width:100%;}
.sidebar-saas .nav-item span:last-child{white-space:normal;line-height:1.18;}
.nav-section-toggle{position:relative;}
.nav-section-toggle:hover{color:rgba(255,255,255,.82);}

/* Sidebar: logo y boton activo fijos; solo el menu navega con scroll */
.sidebar-saas{
  overflow:hidden!important;
  height:100vh;
}
.sidebar-fixed-action{
  flex:0 0 auto;
  padding:0 2px 8px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sidebar-saas .nav-saas{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.sidebar-saas .nav-saas::-webkit-scrollbar{width:8px;}
.sidebar-saas .nav-saas::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px;}
.sidebar-saas .nav-saas::-webkit-scrollbar-thumb{background:rgba(185,228,245,.45);border-radius:999px;}
.sidebar-saas .sidebar-bottom{flex:0 0 auto;}
@media(max-width:980px){
  .sidebar-saas{height:auto;overflow:visible!important;}
  .sidebar-saas .nav-saas{overflow:visible;}
}

/* Sidebar visual fix: fondo solido y estados sin destello */
.sidebar,
.sidebar-saas,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .sidebar-saas{
  background:#151e31!important;
  color:#f8fafc!important;
  border-right:1px solid rgba(148,163,184,.18)!important;
}
.sidebar-saas .nav-saas,
.sidebar-fixed-action,
.sidebar-saas .sidebar-bottom{
  background:#151e31!important;
}
.sidebar-logo-wrap,
.sidebar-fixed-action{
  border-color:rgba(148,163,184,.18)!important;
}
.sidebar-saas .nav-item,
body[data-theme="dark"] .sidebar-saas .nav-item{
  color:#cbd5e1!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease!important;
  transform:none!important;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-saas .nav-item:hover,
.sidebar-saas .nav-item:focus,
.sidebar-saas .nav-item:active,
body[data-theme="dark"] .sidebar-saas .nav-item:hover,
body[data-theme="dark"] .sidebar-saas .nav-item:focus,
body[data-theme="dark"] .sidebar-saas .nav-item:active{
  background:#1a2436!important;
  color:#f8fafc!important;
  box-shadow:none!important;
  outline:none!important;
  transform:none!important;
}
.sidebar-saas .nav-item:focus-visible{
  outline:1px solid rgba(255,175,204,.72)!important;
  outline-offset:2px;
}
.sidebar-saas .nav-item.active,
.sidebar-saas .nav-item.active:hover,
.sidebar-saas .nav-item.active:focus,
.sidebar-saas .nav-item.active:active,
body[data-theme="dark"] .sidebar-saas .nav-item.active,
body[data-theme="dark"] .sidebar-saas .nav-item.active:hover,
body[data-theme="dark"] .sidebar-saas .nav-item.active:focus,
body[data-theme="dark"] .sidebar-saas .nav-item.active:active{
  background:#ffafcc!important;
  color:#151e31!important;
  box-shadow:none!important;
  transform:none!important;
}
.sidebar-saas .nav-item.active svg,
body[data-theme="dark"] .sidebar-saas .nav-item.active svg{
  color:#151e31!important;
  stroke:#151e31!important;
}
.nav-section-toggle,
.nav-section-toggle:hover,
.nav-section-toggle:focus,
.nav-section-toggle:active{
  background:transparent!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  outline:none!important;
}
.nav-section-toggle:focus-visible{
  outline:1px solid rgba(148,163,184,.5)!important;
  outline-offset:2px;
}
.sidebar-saas .user-card,
body[data-theme="dark"] .sidebar-saas .user-card{
  background:#1a2436!important;
  border-color:rgba(148,163,184,.18)!important;
  color:#f8fafc!important;
  box-shadow:none!important;
}
.sidebar-saas .user-card span,
body[data-theme="dark"] .sidebar-saas .user-card span{
  color:#cbd5e1!important;
}
.sidebar-saas .avatar,
body[data-theme="dark"] .sidebar-saas .avatar{
  background:#ffafcc!important;
  color:#151e31!important;
}
.logout-btn,
.logout-btn:hover,
.logout-btn:focus,
.logout-btn:active,
body[data-theme="dark"] .logout-btn,
body[data-theme="dark"] .logout-btn:hover,
body[data-theme="dark"] .logout-btn:focus,
body[data-theme="dark"] .logout-btn:active{
  background:#1a2436!important;
  color:#f8fafc!important;
  border-color:rgba(148,163,184,.24)!important;
  box-shadow:none!important;
  outline:none!important;
}
.logout-btn:focus-visible{
  outline:1px solid rgba(255,175,204,.72)!important;
  outline-offset:2px;
}
body[data-theme="dark"] .main{
  background:#010101!important;
  color:#f8fafc!important;
}