:root{
  --sidebar-w: 260px;
  --brand-gold:#b0893b;
  --brand-blue:#0e3a8a;
  --brand-green:#198754;
  --bg-1:#e7ecf4;
  --bg-2:#d7e0ee;
}

html, body { height:100%; }
body { overflow:hidden; background:#f6f8fb; }

.topbar{ height:56px; }
.brand{
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-blue));
  color:#fff;
}
.brand .logo{ height:28px; width:auto; border-radius:2px; background:#fff; padding:2px; }
.brand .title{ font-weight:700; }
.shadow-header{ box-shadow:0 1px 2px rgba(0,0,0,.10); }

.layout { display:flex; height:calc(100% - 56px); }
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  border-right:1px solid #e9ecef; overflow:auto; background:#fff;
}
.main{
  flex:1 1 auto;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  position: relative;
}

.frame-wrap{
  position:absolute; inset:10px;
  background:#fff; border-radius:14px;
  box-shadow: 0 12px 30px rgba(14,58,138,.12);
  border:1px solid rgba(14,58,138,.08);
  overflow:hidden;
}
#appFrame{ border:0; width:100%; height:100%; background:#fff; }

.menu-title{
  font-size:.75rem; letter-spacing:.08em;
  color:#2b2f33; margin:1rem .75rem .5rem;
  text-transform:uppercase; background:#f8f9fa;
  padding:.45rem .6rem; border-radius:.4rem;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; border:1px solid #e9ecef;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.menu-title[aria-expanded="true"]{
  background:var(--brand-green); color:#fff; border-color:var(--brand-green);
}
.menu-title .caret{ transition:transform .18s ease; }
.menu-title[aria-expanded="true"] .caret{ transform:rotate(90deg); }

.nav-link{ color:#333; border-radius:.35rem; }
.nav-link:hover{ background:#f2f4f6; }
.nav-link.active{ background:#e9f7ef; color:#198754; font-weight:600; }
.nav-link i{ width:1.2rem; }
.submenu{ display:none; }
.submenu.open{ display:block; }
.submenu .nav-link{ padding-left:2.25rem; }

@media (max-width: 991.98px){
  .sidebar{
    position:fixed; z-index:1030; left:-270px; top:56px;
    height:calc(100% - 56px); transition:all .2s ease;
  }
  .sidebar.open{ left:0; }
  .brand .title{ display:none; }
}

/* Botón marca (verde) con hover visible, sin desaparecer */
:root{ --brand:#198754; }
.btn-brand{
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active{
  background-color:#1b975f !important;   /* un poco más claro */
  border-color:#1b975f !important;
  color:#fff !important;
}
.btn-brand:disabled{
  background-color:#1b975f !important;
  border-color:#1b975f !important;
  color:#fff !important;
  opacity:1 !important;
}