/* Layout compartilhado do SMART System - DILOGTECH */
:root{
  --azul-900:#0d0d0d;
  --azul-700:#1f1f1f;
  --azul-500:#f2c200;
  --azul-100:#fff6d6;
  --tinta:#16203a;
  --tinta-suave:#5b6a8a;
  --linha:#e2e6f0;
  --fundo:#f5f7fb;
  --branco:#ffffff;
}

body.com-menu{
  padding-left:220px;
}

#menu-lateral{
  position:fixed;
  top:0; left:0; bottom:0;
  width:220px;
  background:linear-gradient(180deg, var(--azul-900), var(--azul-700));
  color:#fff;
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
}
#menu-lateral .marca-menu{
  padding:22px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
#menu-lateral .marca-menu strong{ display:block; font-size:17px; letter-spacing:.3px; }
#menu-lateral .marca-menu span{ font-size:11.5px; color:#c3d1f5; }

#menu-lateral nav{ flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:3px; }
#menu-lateral nav a{
  color:#dbe3fa;
  text-decoration:none;
  padding:10px 14px;
  border-radius:8px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:background .15s;
}
#menu-lateral nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
#menu-lateral nav a.ativo{ background:rgba(242,194,0,.14); color:#f2c200; font-weight:600; border-left:3px solid #f2c200; padding-left:11px; }
#menu-lateral .rodape-menu{
  padding:14px 10px 18px;
  border-top:1px solid rgba(255,255,255,.12);
}
#menu-lateral .rodape-menu button{
  width:100%;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:none;
  padding:10px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
}
#menu-lateral .rodape-menu button:hover{ background:rgba(255,255,255,.16); }

#botao-menu-mobile{
  display:none;
  position:fixed;
  top:14px; left:14px;
  z-index:110;
  background:var(--azul-700);
  color:#fff;
  border:none;
  width:40px; height:40px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}

@media (max-width:1024px){
  body.com-menu{ padding-left:0; }
  #menu-lateral{
    transform:translateX(-100%);
    transition:transform .2s ease;
    width:230px;
    box-shadow:8px 0 24px rgba(0,0,0,.2);
  }
  #menu-lateral.aberto{ transform:translateX(0); }
  #botao-menu-mobile{ display:flex; align-items:center; justify-content:center; }
  body.com-menu > header{ padding-left:64px; }
}