/* Esqueleto do app: navegacao lateral no computador, barra inferior no celular. */
.app { display: flex; height: 100dvh; overflow: hidden; }

.rail {
  width: 76px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 16px 8px;
  background: var(--pn); border-right: var(--rw) solid var(--lnS);
}
.rail-logo { width: 40px; height: 40px; margin: 0 auto 18px; display: block; border-radius: var(--r); }
.rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0;
  border-radius: var(--r); color: var(--mu); text-decoration: none; font-size: 10.5px; font-weight: 500;
}
.rail-item [class^="icon-"] { font-size: 20px; }
.rail-item:hover { background: var(--hv); color: var(--ink); }
.rail-item[aria-current="page"] { background: var(--sk); color: var(--ink); font-weight: 600; }
.rail-selo {
  position: absolute; top: 4px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; background: var(--ac); color: var(--onA);
  font-size: 10px; font-weight: 700; border-radius: 8px;
}
.rail-espaco { flex: 1; }
.rail-usuaria {
  width: 36px; height: 36px; margin: 6px auto 0; display: grid; place-items: center;
  border: 0; border-radius: var(--ra); background: var(--sk); font-size: 12px; font-weight: 700; cursor: pointer;
}
.rail-usuaria:hover { box-shadow: 0 0 0 2px var(--lnS); }
.so-celular { display: none; }

.conteudo { flex: 1; min-width: 0; overflow: auto; background: var(--bg); }
.modulo { height: 100%; }

/* Menu da usuaria (sair) */
.menu-usuaria {
  position: fixed; left: 84px; bottom: 16px; z-index: 40; width: 240px; padding: 6px;
  background: var(--pn); border: 1px solid var(--lnS); border-radius: var(--rc); box-shadow: var(--shadow-pop);
}
.menu-usuaria .menu-cabeca { padding: 8px 10px 10px; border-bottom: 1px solid var(--ln); margin-bottom: 4px; }
.menu-item {
  width: 100%; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  border: 0; background: transparent; border-radius: var(--r); cursor: pointer; text-align: left; font-size: 14px;
}
.menu-item:hover { background: var(--hv); }

/* Estado vazio e area exclusiva */
.vazio {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 48px 24px; text-align: center;
}
.vazio .selo-circulo { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--pr); color: var(--ink); border-radius: 50%; font-size: 24px; }
.vazio p { max-width: 380px; }

/* Lista "Mais" do celular */
.lista-mais { display: flex; flex-direction: column; padding: 16px; gap: 2px; }
.lista-mais a { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: var(--r); text-decoration: none; font-size: 15px; }
.lista-mais a:hover { background: var(--hv); }

@media (max-width: 767px) {
  .app { flex-direction: column-reverse; }
  .rail {
    width: 100%; flex-direction: row; justify-content: space-around; gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: var(--rw) solid var(--lnS);
  }
  .rail-logo, .rail-espaco, .rail-usuaria, .so-computador { display: none; }
  .so-celular { display: flex; }
  .rail-item { flex: 1; min-height: 48px; font-size: 11px; }
  .rail-item [class^="icon-"] { font-size: 22px; }
  .rail-item[aria-current="page"] { background: transparent; font-weight: 700; }
  .rail-selo { right: auto; left: calc(50% + 6px); }
}