/* Barra de titulo (WCO quando instalado como PWA) e o led de estado da sinalizacao. */

/* ---------- barra de titulo (direcao 1A) ---------- */
.titlebar{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 12px;
          background:hsl(var(--vidroPRaw)/calc(var(--opq) + .20));border-bottom:1px solid hsl(var(--veuRaw)/.08);
          -webkit-app-region:drag;app-region:drag}
.titlebar button,.titlebar a{-webkit-app-region:no-drag;app-region:no-drag}
/* Instalado como PWA com a barra de titulo do sistema sobreposta (WCO):
   os botoes minimizar/maximizar/fechar do proprio Windows ocupam o canto,
   e a nossa barra se encolhe para a area que sobra — igual ao design. */
@media (display-mode: window-controls-overlay){
  .app{grid-template-rows:env(titlebar-area-height,40px) minmax(0,1fr)}
  .titlebar{padding-left:calc(env(titlebar-area-x,0px) + 12px);
            padding-right:calc(100% - env(titlebar-area-x,0px) - env(titlebar-area-width,100%) + 12px)}
}
.titlebar svg{color:var(--ac);flex:none}
.titlebar .tnome{font-size:13px;font-weight:500}
.titlebar .chip{display:flex;align-items:center;gap:6px;height:24px;padding:0 8px;
                background:transparent;border:0;border-radius:6px;cursor:pointer;
                font-family:ui-monospace,Consolas,monospace;font-size:11px;font-weight:500;
                letter-spacing:.06em;color:var(--tx2)}
.titlebar .chip:hover{background:hsl(var(--acRaw)/.12)}
.titlebar .chip svg{color:var(--tx3);width:13px;height:13px}
.titlebar .tfim{margin-left:auto;display:flex;align-items:center;gap:6px;
                font-size:11px;color:var(--tx3)}

/* ---------- resto do palco ---------- */
.led{width:8px;height:8px;border-radius:50%;background:var(--tx4)}