/* Menu lateral.
 *
 * Muestra el arbol completo, incluido lo que falta. Lo pendiente se ve en gris y
 * no es clickeable: se sabe que existe y que todavia no esta, sin que nadie se
 * frustre haciendo clic en algo que no lleva a ningun lado.
 */

body.con-menu {
  display: flex;
  min-height: 100vh;
  margin: 0;
}

#menu-lateral {
  width: 246px;
  flex-shrink: 0;
  background: #16232b;
  color: #c3ccd3;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-size: 13px;
}

.marca-menu {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.marca-menu strong { display: block; color: #fff; font-size: 15px; }
.marca-menu span { color: #7d8b95; font-size: 11px; }

#menu-lateral ul { list-style: none; margin: 0; padding: 0; }
#menu-lateral ul.nivel-0 { padding: 8px 0; flex: 1; }

#menu-lateral li a,
#menu-lateral li span.inerte,
#menu-lateral button.cabecera {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 7px 18px;
  color: #c3ccd3;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#menu-lateral button.cabecera { justify-content: space-between; font-weight: 600; }
#menu-lateral button.cabecera:hover { background: rgba(255, 255, 255, .05); filter: none; }

#menu-lateral button.cabecera::after {
  content: '▾';
  font-size: 10px;
  color: #6f7d87;
  margin-left: 4px;
}

li.grupo.cerrado > ul { display: none; }
li.grupo.cerrado > button.cabecera::after { content: '▸'; }

.cuenta {
  font-size: 10px;
  color: #6f7d87;
  font-weight: 400;
  margin-left: auto;
  padding-right: 4px;
}

#menu-lateral li a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

#menu-lateral li a.aqui {
  background: var(--acento);
  color: #fff;
  font-weight: 600;
}

/* Lo que todavia no existe: visible pero apagado y sin cursor de enlace. */
#menu-lateral span.inerte { color: #67757f; cursor: default; }

#menu-lateral .marca {
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
  white-space: nowrap;
}

.marca.siguiente { background: #b8860b; color: #fff; }
.marca.pendiente { background: rgba(255, 255, 255, .07); color: #7d8b95; }
.marca.descartado { background: transparent; color: #55636c; }

#menu-lateral small {
  display: block;
  font-size: 10px;
  color: #6f7d87;
  margin-top: 1px;
}

#menu-lateral a small { color: #9fb0bb; }

/* Subniveles con sangria creciente. */
ul.nivel-1 li a, ul.nivel-1 li span.inerte, ul.nivel-1 button.cabecera { padding-left: 30px; }
ul.nivel-2 li a, ul.nivel-2 li span.inerte { padding-left: 42px; }

.avance {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  color: #7d8b95;
}

.barra-avance {
  height: 4px;
  background: rgba(255, 255, 255, .1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.barra-avance i { display: block; height: 100%; background: var(--acento); }

/* La pantalla en si ocupa el resto. */
body.con-menu > #pantalla-panel,
body.con-menu > #pantalla-login { flex: 1; min-width: 0; }

@media (max-width: 860px) {
  body.con-menu { flex-direction: column; }
  #menu-lateral { width: 100%; max-height: 220px; }
}