/*
 * base/03-layout.css
 * Estrutura da aplicação: sidebar, topo, área principal.
 */

.shell {
  display: flex;
  min-height: 100vh;
}

.side {
  width: 256px;
  flex: none;
  background: var(--side);
  color: var(--sideTx);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1f1f1f;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px 18px;
}

.brand .mk {
  width: 34px;
  height: 34px;
  flex: none;
}

.brand b {
  display: block;
  font: 600 21px/1 var(--dp);
  color: #f3ecdc;
  letter-spacing: .01em;
}

.brand span {
  display: block;
  font-size: 11.5px;
  color: #7d786f;
  margin-top: 3px;
}

.ctx {
  margin: 0 12px 10px;
  padding: 10px 12px;
  border: 1px solid #262626;
  border-radius: 10px;
  background: #0c0c0c;
}

.ctx small {
  display: block;
  color: #6f6a62;
  font-size: 11px;
}

.ctx b {
  color: #e8e1d2;
  font-size: 13px;
  font-weight: 600;
}

.grp {
  font-size: 11.5px;
  color: #615d56;
  padding: 16px 22px 6px;
  font-weight: 600;
}

.nv {
  display: flex;
  gap: 12px;
  align-items: center;
  width: calc(100% - 20px);
  margin: 1px 10px;
  background: none;
  border: 0;
  color: #a8a39a;
  padding: 9px 12px;
  border-radius: 9px;
  font: 600 13.5px var(--ui);
  cursor: pointer;
  text-align: left;
  position: relative;
}

.nv:hover {
  background: #151515;
  color: #eee6d6;
}

.nv.on {
  background: #191510;
  color: #f5e3b5;
}

.nv.on::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #fdb621;
}

.nv svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.nv .bd {
  margin-left: auto;
}

.bd {
  background: #fdb621;
  color: #1a1203;
  border-radius: 99px;
  font: 700 11px/18px var(--ui);
  min-width: 18px;
  padding: 0 6px;
  text-align: center;
}

.side .foot {
  margin-top: auto;
  padding: 14px 12px 18px;
  border-top: 1px solid #1c1c1c;
}

.me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg,#3a2d10,#1a1408);
  color: #f2cf7a;
  display: grid;
  place-items: center;
  font: 700 12.5px var(--ui);
  flex: none;
  border: 1px solid #4a3a16;
}

.av.big {
  width: 64px;
  height: 64px;
  font-size: 21px;
}

.me b {
  display: block;
  color: #ece5d6;
  font-size: 13px;
}

.me small {
  color: #6f6a62;
  font-size: 11.5px;
}

.ws {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ln);
}

.top .tt {
  flex: 1;
  min-width: 0;
}

.top .tt h2 {
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb {
  font-size: 12px;
  color: var(--t3);
}

.crumb button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--t2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ib {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ln);
  background: var(--sf);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  flex: none;
  color: var(--tx);
}

.ib svg {
  width: 18px;
  height: 18px;
}

.ib .dot {
  position: absolute;
  top: -4px;
  right: -4px;
}

#mb {
  display: none;
}

main {
  padding: 26px 28px 60px;
  width: 100%;
  max-width: 1180px;
}

.banner {
  background: var(--gds);
  color: var(--tx);
  border-bottom: 1px solid var(--gdl);
  padding: 8px 28px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.banner svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.banner span {
  flex: 1;
  min-width: 0;
}

.banner b {
  color: var(--gd);
}

.banner .btn {
  margin-left: auto;
}

.scrim {
  display: none;
}

@media (min-width:1024px) {
  .shell {
    background: linear-gradient(90deg,var(--side) 256px,transparent 256px);
  }
}