/* casa-ui v0.5.0 - gerado por ui/sync.ps1, nao edite */
/* casa-ui — o shell de navegação, que os dois apps têm igual.

   Saiu do componentes.css porque aquele arquivo misturava três coisas: este
   shell (que os dois têm), o topo do painel (que só ele tem) e o vocabulário
   genérico. Enquanto estavam juntos, "o ledger não carrega componentes.css"
   parecia justificado — e por isso o ledger reimplementou a nav inteira, com
   .nav-item com o MESMO nome de classe e dez valores diferentes.

   Quem muda aqui muda os dois. É esse o ponto. */

@layer componentes {
  .nav { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; overflow-y:auto; border-right:1px solid var(--rule); background:var(--fundo-cab); }
  .marca { display:flex; gap: var(--s3); align-items:center; padding: var(--s5) var(--s4) var(--s4); }
  .marca-selo { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-ctl); background:var(--marca); color:#fff; font:700 16px/1 var(--sans); }
  .marca strong { display:block; font-size:15px; font-weight:600; }
  .marca small { display:block; font:500 11px var(--mono); letter-spacing:.06em; color:var(--faint); }
  .nav-grupo { margin: var(--s2) var(--s4) var(--s2); font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); }
  .nav-item { display:flex; width:100%; gap: var(--s3); align-items:center; height:36px; padding: 0 var(--s4); border-left:3px solid transparent; color:var(--muted); font-size:13.5px; }
  .nav-item:hover { background:var(--raised); color:var(--ink); }
  .nav-item[aria-current="page"] { border-left-color:var(--accent); background:var(--raised); color:var(--ink); font-weight:600; }
  .nav-item.externo { height:32px; padding-left: var(--s4); color:var(--faint); font-size:13px; }
  .nav-item .fim { margin-left: auto; color:#5a5a66; }
  .nav-badge { margin-left: auto; min-width:19px; padding: 1px var(--s2); border-radius:var(--r-pilula); background:var(--rule); color:#c9c9d4; font:600 11px/1.5 var(--mono); text-align:center; }
  .nav-badge:empty { display:none; }
  .nav-badge[data-nivel="aviso"] { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn-texto); }
  .nav-badge[data-nivel="crit"] { background:color-mix(in srgb, var(--crit) 16%, transparent); color:var(--crit-texto); }
  .nav-item[data-alerta] { color:var(--warn-texto); }
  .nav-pe { display:flex; gap: var(--s3); align-items:center; margin: auto var(--s4) var(--s4); padding-top: var(--s4); border-top:1px solid var(--rule); }
  .nav-pe strong { display:block; font-size:12px; font-weight:600; color:#c9c9d4; }
  .nav-pe small { display:block; font:500 11px var(--mono); color:var(--faint); }
  /* O botao que abre a nav em tela estreita. Estava no componentes.css e eu
     o mandei para o painel.css junto com o topo - mas o ledger tambem tem
     um, e ficou sem regra. Quem abre a nav mora com a nav. */
  .menu { display:none; border:0; background:none; font-size:19px; }
  @media (max-width:1100px) { .menu { display:block; } }
  .tecla { padding: var(--s1) var(--s2); border:1px solid #2e2e38; border-radius:var(--r-min); font:500 11px var(--mono); color:var(--faint); }
}