/* MR7 ENTERPRISE — SHELL de 3 áreas (layout responsivo) */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr var(--ctx-w); min-height:100vh; transition:grid-template-columns var(--dur-med) var(--ease); }
.app.sidebar-collapsed{ grid-template-columns:var(--sidebar-w-collapsed) 1fr var(--ctx-w); }
.app.ctx-hidden{ grid-template-columns:var(--sidebar-w) 1fr 0; }

/* ÁREA 1 — SIDEBAR */
.sidebar{ background:linear-gradient(180deg,#0e1430,#0a0f22); border-right:1px solid var(--mr7-border); padding:12px 10px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.sidebar__logo{ display:flex; align-items:center; gap:8px; padding:4px 6px 10px; }
.sidebar__logo img{ height:34px; }
.sidebar__logo .cap{ font-size:var(--fs-xs); color:var(--mr7-text-muted); letter-spacing:1px; }
.sidebar.collapsed .sidebar__logo .cap, .sidebar.collapsed .nav-item span, .sidebar.collapsed .sidebar__foot .txt, .sidebar.collapsed .sub{ display:none; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-md); color:#c7d2f0; font-size:var(--fs-sm); cursor:pointer; text-decoration:none; white-space:nowrap; }
.nav-item .ic{ width:20px; text-align:center; flex:0 0 20px; }
.nav-item:hover{ background:rgba(37,99,255,.1); }
.nav-item.active{ color:#fff; background:linear-gradient(90deg,rgba(37,99,255,.22),rgba(124,58,237,.1)); box-shadow:inset 0 0 0 1px var(--mr7-border-strong); }
.nav-group{ margin-top:6px; } .nav-sub{ margin-left:26px; font-size:var(--fs-xs); color:var(--mr7-text-muted); }
.sidebar__foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--mr7-border); font-size:var(--fs-xs); color:var(--mr7-text-muted); }
.sidebar__foot .perfil{ display:flex; align-items:center; gap:8px; }

/* ÁREA 2 — CENTRAL */
.central{ display:flex; flex-direction:column; min-width:0; }
.header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid var(--mr7-border); background:var(--mr7-bg-glass); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; }
.header__left{ display:flex; align-items:center; gap:12px; }
.header h1{ font-size:var(--fs-xl); font-weight:var(--fw-bold); }
.header__right{ display:flex; align-items:center; gap:10px; }
.content{ padding:20px; display:flex; flex-direction:column; gap:var(--gap); overflow:auto; }
.grid{ display:grid; gap:var(--gap); }
.grid--kpi{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* ÁREA 3 — PAINEL CONTEXTUAL */
.ctx{ background:linear-gradient(180deg,#0e1430,#0a0f22); border-left:1px solid var(--mr7-border); padding:16px; overflow:auto; }
.ctx__title{ font-size:var(--fs-lg); font-weight:var(--fw-bold); margin-bottom:10px; }
.ctx .row{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--mr7-border); font-size:var(--fs-sm); }

/* hambúrguer / botões de shell */
.icon-btn{ width:38px; height:38px; border-radius:var(--r-md); background:#0e1730; border:1px solid var(--mr7-border); color:#fff; cursor:pointer; font-size:16px; display:none; }

/* RESPONSIVO */
@media (max-width:1000px){
  .app,.app.sidebar-collapsed,.app.ctx-hidden{ grid-template-columns:var(--sidebar-w-collapsed) 1fr; }
  .ctx{ position:fixed; top:0; right:0; height:100vh; width:min(360px,92vw); transform:translateX(100%); transition:transform var(--dur-med) var(--ease); z-index:62; }
  .app.ctx-open .ctx{ transform:translateX(0); }
  .sidebar .sidebar__logo .cap, .sidebar .nav-item span, .sidebar .sub{ display:none; } /* compacta */
  .icon-btn.ctx-toggle{ display:grid; place-items:center; }
}
@media (max-width:720px){
  .app,.app.sidebar-collapsed{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; height:100vh; width:250px; transform:translateX(-100%); transition:transform var(--dur-med) var(--ease); z-index:63; }
  .sidebar .sidebar__logo .cap, .sidebar .nav-item span, .sidebar .sub{ display:inline; }
  .app.nav-open .sidebar{ transform:translateX(0); }
  .app.nav-open::after{ content:""; position:fixed; inset:0; background:rgba(4,6,12,.6); z-index:62; }
  .icon-btn.nav-toggle{ display:grid; place-items:center; }
  .content{ padding:14px; }
}