/* =========================================================================================
   Observatório · o OS do Gabinete Exemplo na direção C da visão nova (11/11/2026).
   O OS como um instrumento para ver a empresa a trabalhar: preto a sério, branco e cinzentos, um só sinal
   vermelho-coral para o que precisa de ti e o que está fora do normal, e o espetro quente só nos dados.
   As fichas (as cores, as letras, os espaços, os raios e o movimento) estão no LEIA.md.
   Telemóvel primeiro: a base é a 390 px; o computador entra a partir dos 960 px.
   ========================================================================================= */

:root {
  color-scheme: dark;
  /* o preto e os cinzentos */
  --breu: #050506;          /* o fundo */
  --cupula: #0B0B0D;        /* os painéis */
  --lente: #111114;         /* por cima: menus, campos, hover */
  --lente-2: #18181C;       /* o escolhido */
  --lente-3: #222227;       /* o escolhido por cima de um painel */
  --fio: rgba(255, 255, 255, .07);
  --fio-2: rgba(255, 255, 255, .12);
  --fio-3: rgba(255, 255, 255, .20);
  --branco: #F2F2F0;        /* o texto e o botão principal */
  --nevoa: #C4C4C8;         /* o texto que acompanha */
  --cinza: #8E8E94;         /* o que fica atrás */
  --grafite: #5E5E64;       /* os eixos, as réguas */
  /* o sinal: só para o que precisa de ti e o que está fora do normal */
  --sinal: #FF5246;
  --sinal-claro: #FF8F85;
  --sinal-fundo: rgba(255, 82, 70, .08);
  --sinal-fundo-2: rgba(255, 82, 70, .14);
  --sinal-fio: rgba(255, 82, 70, .34);
  /* o espetro: só nos dados */
  --rosa: #F49AB8;
  --ambar: #FFAC4A;
  --amarelo: #FFDD75;
  --pedra: #9A9AA0;
  /* a cor da casa (Configurações › Aparência): a atmosfera da esfera, o separador escolhido, o centro do mapa e o foco;
     o símbolo do ORBIT não a leva (fica a preto e branco, como o resto) */
  --casa: #2F6FED;
  --casa-suave: rgba(47, 111, 237, .18);
  --casa-fio: rgba(47, 111, 237, .5);
  /* as letras */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* as medidas */
  --lado: 248px;
  --carril: 64px;
  --topo: 56px;
  --baixo: 64px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- a base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--breu); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--breu); color: var(--branco);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
input, select, textarea { font: inherit; color: inherit; margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--casa-suave); color: var(--branco); }
:focus-visible { outline: 2px solid var(--casa); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.fraco { color: var(--cinza); }
[hidden] { display: none !important; }
@media (max-width: 959px) { .so-c { display: none !important; } }
.oculto-acess { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 960px) { .so-m { display: none !important; } }

/* os ícones: viewBox 24, traço 1,6, pontas redondas (os do OS de hoje) */
.ic { width: 16px; height: 16px; flex-shrink: 0; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic--p { width: 14px; height: 14px; }
.ic--g { width: 20px; height: 20px; }
.ic--xg { width: 24px; height: 24px; }

/* ---------- a casca: o carril ao lado, o topo, o conteúdo e a barra de baixo ---------- */
.app { min-height: 100dvh; }
.principal { min-width: 0; }
.lado { display: none; }

.topo {
  position: sticky; top: 0; z-index: 30; height: var(--topo); display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: rgba(5, 5, 6, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--fio);
}
.topo-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topo-marca__txt { display: grid; gap: 4px; min-width: 0; }
.topo-marca__os { font: 500 10px/1 var(--mono); letter-spacing: .22em; color: var(--cinza); }
.topo-marca__nome { font: 600 14px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.migalhas { display: none; }

/* a marca: o glifo do ORBIT, branco, num quadrado de grafite, como o resto (o Bruno, 11/11: «a cor deste simbolo nao
   condiz com o resto»); a cor da casa não entra aqui */
.marca {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(180deg, #2A2A2F, #151518);
  color: var(--branco); box-shadow: inset 0 0 0 1px var(--fio-3), 0 8px 16px -8px rgba(0, 0, 0, .8);
}
.marca .ic { width: 18px; height: 18px; stroke-width: 1.8; }

/* o estado da IA (o ponto e «A trabalhar · 2») */
.estado-ia {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--lente); box-shadow: inset 0 0 0 1px var(--fio-2); font: 500 12px/1 var(--sans); color: var(--branco); white-space: nowrap;
}
.estado-ia:hover { box-shadow: inset 0 0 0 1px var(--fio-3); }
.estado-ia .conta { margin-right: -4px; }

.conteudo { padding: 16px 16px calc(var(--baixo) + 32px + env(safe-area-inset-bottom)); max-width: 1400px; margin: 0 auto; outline: none; }

.barra-baixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--baixo) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(5, 5, 6, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--fio);
}
.barra-baixo a, .barra-baixo button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; color: var(--cinza); font: 500 11px/1 var(--sans);
}
.barra-baixo .ic { width: 20px; height: 20px; }
.barra-baixo [aria-current="page"] { color: var(--branco); }
.barra-baixo [aria-current="page"]::before {
  content: ''; position: absolute; top: -1px; left: 50%; width: 32px; height: 2px; margin-left: -16px; border-radius: 0 0 2px 2px; background: var(--branco);
}
.barra-baixo__ic { position: relative; display: grid; place-items: center; }
.barra-baixo__ic .conta { position: absolute; left: 12px; top: -8px; }

@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); transition: grid-template-columns .28s var(--curva); }
  .app.carril { grid-template-columns: var(--carril) minmax(0, 1fr); }
  .barra-baixo { display: none; }
  .topo { padding: 0 32px; gap: 16px; }
  .topo-marca { display: none; }
  .migalhas { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 14px/1 var(--sans); color: var(--cinza); white-space: nowrap; }
  .migalhas a:hover { color: var(--branco); }
  .migalhas__sep { color: var(--grafite); }
  .migalhas [aria-current="page"] { color: var(--branco); }
  .conteudo { padding: 24px 32px 48px; }
}

/* ---------- a barra lateral (como a de um painel de operações) e o carril ---------- */
@media (min-width: 960px) {
  .lado {
    display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100dvh; padding: 12px;
    background: var(--breu); border-right: 1px solid var(--fio); overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  }
  .lado::-webkit-scrollbar { display: none; }
}
.lado-casa {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px; border-radius: 10px; text-align: left;
}
.lado-casa:hover { background: var(--lente); }
.lado-casa__txt { display: grid; gap: 6px; min-width: 0; flex: 1; }
.lado-casa__os { font: 500 10px/1 var(--mono); letter-spacing: .22em; color: var(--cinza); }
.lado-casa__nome { font: 600 14px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lado-casa > .ic { color: var(--grafite); }

.lado-nav { display: grid; gap: 2px; }
.lado-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--cinza); font: 400 14px/1 var(--sans); white-space: nowrap; transition: background .12s, color .12s;
}
.lado-item:hover { background: var(--lente); color: var(--branco); }
.lado-item[aria-current="page"] { background: var(--lente-2); color: var(--branco); }
.lado-item[aria-current="page"]::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: var(--casa);
  box-shadow: 0 0 12px var(--casa);
}
.lado-item__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lado-item .conta { margin-left: auto; }
.lado-item--p { height: 32px; font-size: 13px; }
.lado-item--p .ic { width: 15px; height: 15px; }

.lado-grupo { display: grid; gap: 2px; }
.lado-grupo__tit {
  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 6px;
  font: 400 12px/1 var(--sans); color: var(--grafite); width: 100%;
}
button.lado-grupo__tit:hover { color: var(--cinza); }
.lado-grupo__tit .ic { margin-left: auto; transition: transform .2s var(--curva); }
.lado-grupo[data-fechado] .lado-grupo__tit .ic { transform: rotate(-90deg); }
.lado-grupo[data-fechado] .lado-grupo__lista { display: none; }
.lado-grupo__lista { display: grid; gap: 2px; }
.lado-projeto { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--nevoa); font: 400 13px/1 var(--sans); }
.lado-projeto:hover { background: var(--lente); color: var(--branco); }
.lado-projeto__ponto { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin: 0 5px; }
.lado-projeto__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado-projeto__n { font: 400 11px/1 var(--mono); color: var(--grafite); }

.lado-fundo { margin-top: auto; display: grid; gap: 8px; }
.lado-medidor { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio); }
.lado-medidor:hover { box-shadow: inset 0 0 0 1px var(--fio-2); }
.lado-medidor__l { display: flex; align-items: baseline; gap: 8px; font: 400 12px/1 var(--sans); color: var(--cinza); }
.lado-medidor__l b { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--branco); }
.lado-medidor__nota { font: 400 11px/1.3 var(--mono); color: var(--grafite); }
.lado-recolher { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--grafite); font: 400 12px/1 var(--sans); width: 100%; }
.lado-recolher:hover { color: var(--branco); background: var(--lente); }

/* o carril: só os ícones, com o nome por cima ao passar */
.app.carril .lado { padding: 12px 8px; align-items: center; }
.app.carril .lado-casa { width: 48px; justify-content: center; padding: 8px; }
.app.carril .lado-casa__txt, .app.carril .lado-casa > .ic,
.app.carril .lado-item__nome, .app.carril .lado-grupo__tit, .app.carril .lado-projetos,
.app.carril .lado-medidor, .app.carril .lado-recolher__txt, .app.carril .lado-so-aberta { display: none; }
.app.carril .lado-nav, .app.carril .lado-grupo__lista { justify-items: center; }
.app.carril .lado-item { width: 44px; height: 40px; padding: 0; justify-content: center; }
.app.carril .lado-item[aria-current="page"]::before { left: -8px; }
.app.carril .lado-item .conta { position: absolute; top: 2px; right: 0; margin: 0; min-width: 16px; height: 14px; padding: 0 4px; font-size: 9px; }
.app.carril .lado-recolher { width: 44px; justify-content: center; padding: 0; }
.app:not(.carril) .lado-so-carril { display: none; }
.lado-dica {
  position: fixed; z-index: 65; padding: 0 8px; height: 26px; display: flex; align-items: center; border-radius: 6px;
  background: var(--lente-3); box-shadow: inset 0 0 0 1px var(--fio-2); font: 500 12px/1 var(--sans); pointer-events: none; white-space: nowrap;
}

/* ---------- os botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 8px;
  font: 500 14px/1 var(--sans); white-space: nowrap; flex-shrink: 0; transition: background .12s, color .12s, box-shadow .12s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn--branco { background: var(--branco); color: #0A0A0B; }
.btn--branco:hover { background: #FFFFFF; }
.btn--linha { color: var(--branco); box-shadow: inset 0 0 0 1px var(--fio-2); }
.btn--linha:hover { background: var(--lente); box-shadow: inset 0 0 0 1px var(--fio-3); }
.btn--fantasma { color: var(--nevoa); }
.btn--fantasma:hover { color: var(--branco); background: var(--lente); }
.btn--sinal { color: var(--branco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.btn--sinal:hover { background: rgba(255, 255, 255, .06); }
.btn--p { padding: 0 12px; }
.btn--cheio { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn-ic { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; color: var(--cinza); }
.btn-ic:hover { color: var(--branco); background: var(--lente); }
.btn-ic--linha { box-shadow: inset 0 0 0 1px var(--fio-2); }
@media (min-width: 960px) {
  .btn { height: 36px; }
  .btn--p { height: 32px; }
  .btn-ic { width: 36px; height: 36px; }
  .btn-ic--p { width: 32px; height: 32px; }
}

/* ---------- as pills, os pontos e o sinal vivo ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; flex-shrink: 0;
  font: 500 12px/1 var(--sans); color: var(--nevoa); background: var(--lente-2); box-shadow: inset 0 0 0 1px var(--fio); white-space: nowrap;
}
.pill--branco { color: var(--branco); }
.pill--sinal { color: var(--sinal-claro); background: var(--sinal-fundo); box-shadow: inset 0 0 0 1px var(--sinal-fio); }
.pill--mono { font: 500 11px/1 var(--mono); letter-spacing: .01em; }
.pill--vazia { background: transparent; }
.pill .ponto { width: 6px; height: 6px; }

.ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ponto--feito { background: var(--branco); }
.ponto--fila { box-shadow: inset 0 0 0 1.5px var(--grafite); }
.ponto--parado { background: var(--grafite); }
.ponto--sinal { background: var(--sinal); }
.ponto--sinal::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1px var(--sinal); opacity: 0;
  animation: pulso 2.4s var(--curva) infinite;
}
.ponto--erro { box-shadow: inset 0 0 0 1.5px var(--sinal); }
.ponto--casa { background: var(--casa); }
@keyframes pulso { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* a onda: a IA a trabalhar vê-se pelo movimento, não por uma cor */
.onda { width: 16px; height: 8px; flex-shrink: 0; display: block; overflow: hidden; color: var(--branco); }
.onda path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; animation: onda 1.1s linear infinite; }
.onda--g { width: 24px; height: 12px; }
@keyframes onda { to { transform: translateX(-8px); } }

.conta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  font: 500 11px/1 var(--mono); background: var(--lente-3); color: var(--nevoa); flex-shrink: 0;
}
.conta--sinal { background: #3A1513; color: var(--sinal-claro); box-shadow: inset 0 0 0 1px var(--sinal-fio); }
.tecla { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font: 500 11px/1 var(--mono); color: var(--cinza); box-shadow: inset 0 0 0 1px var(--fio-2); }

.avatar {
  width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  font: 500 10px/1 var(--mono); letter-spacing: .02em; color: var(--nevoa); background: var(--lente-3); box-shadow: inset 0 0 0 1px var(--fio-2);
}
.avatar--g { width: 32px; height: 32px; font-size: 11px; }
.avatar--os { color: var(--branco); background: var(--breu); }

/* ---------- os painéis ---------- */
.painel { position: relative; min-width: 0; background: var(--cupula); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--fio); }
a.painel:hover, .painel--clica:hover { box-shadow: inset 0 0 0 1px var(--fio-2); }
.painel-cab { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--fio); }
.painel-cab--sem { border-bottom: 0; }
.painel-cab__ic { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; color: var(--nevoa); box-shadow: inset 0 0 0 1px var(--fio-2); }
.painel-cab__ic .ic { width: 15px; height: 15px; }
.painel-cab__txt { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.painel-cab__tit { font: 500 14px/1.2 var(--sans); white-space: nowrap; }
.painel-cab__meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font: 400 12px/1.3 var(--mono); color: var(--cinza); white-space: nowrap; }
.painel-cab__meta > span:only-child, .painel-cab__meta > span:not([class]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 959px) { .painel-cab__meta { white-space: normal; } }
.painel-cab__dir { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ligacao-tudo { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 6px; font: 500 12px/1 var(--sans); color: var(--nevoa); }
.ligacao-tudo:hover { color: var(--branco); background: var(--lente-2); }
.painel-corpo { padding: 16px; }
.legenda-mini { display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--sans); color: var(--cinza); }
.legenda-mini span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- o cabeçalho de cada página ---------- */
.pag-cab { display: grid; gap: 12px; margin-bottom: 24px; }
.pag-cab__linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px; min-width: 0; }
.pag-cab h1 { font: 600 24px/1.15 var(--sans); letter-spacing: -.015em; }
.pag-cab__det { font: 400 12px/1.2 var(--mono); color: var(--cinza); }
.pag-cab__det a { text-decoration: underline; text-decoration-color: var(--grafite); text-underline-offset: 3px; }
.pag-cab__sub { color: var(--nevoa); font-size: 14px; max-width: 72ch; }
.pag-cab__dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pag-cab__dir .seg { flex: 1; }
@media (min-width: 960px) {
  .pag-cab { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .pag-cab__esq { display: grid; gap: 8px; min-width: 0; }
  .pag-cab__dir { flex-wrap: nowrap; }
  .pag-cab__dir .seg { flex: none; }
}
.pag-cab__esq { display: grid; gap: 8px; min-width: 0; }

/* o seletor (o tempo, Lista ou Kanban, Pastas ou Tipos) */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio); }
.seg button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 8px;
  font: 500 13px/1 var(--sans); color: var(--cinza); white-space: nowrap; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--branco); }
.seg button[aria-pressed="true"] { background: var(--lente-3); color: var(--branco); box-shadow: inset 0 0 0 1px var(--fio); }
.seg button .conta { background: transparent; padding: 0; min-width: 0; color: inherit; opacity: .7; }
@media (min-width: 960px) { .seg button { height: 30px; flex: none; } }

/* os campos */
.campo {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px; min-width: 0;
  background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio-2); color: var(--cinza);
}
.campo input, .campo textarea { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--branco); font-size: 16px; }
.campo input::placeholder, textarea::placeholder { color: var(--grafite); }
.campo:focus-within { box-shadow: inset 0 0 0 1px var(--fio-3), 0 0 0 3px var(--casa-suave); }
@media (min-width: 960px) { .campo { height: 36px; } .campo input { font-size: 14px; } }

.escolha {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px; min-width: 0;
  background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio-2); color: var(--nevoa); font: 400 14px/1 var(--sans); white-space: nowrap;
}
.escolha:hover { box-shadow: inset 0 0 0 1px var(--fio-3); color: var(--branco); }
.escolha > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.escolha .ic:last-child { margin-left: auto; color: var(--grafite); }
@media (min-width: 960px) { .escolha { height: 36px; } }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; flex-shrink: 0;
  font: 400 13px/1 var(--sans); color: var(--nevoa); box-shadow: inset 0 0 0 1px var(--fio-2); white-space: nowrap;
}
.chip:hover { color: var(--branco); box-shadow: inset 0 0 0 1px var(--fio-3); }
.chip[aria-pressed="true"] { color: var(--branco); background: var(--lente-3); }
.chip .mono { font-size: 11px; color: var(--cinza); }

/* o interruptor */
.interruptor { position: relative; width: 40px; height: 24px; flex-shrink: 0; border-radius: 999px; background: var(--lente-3); box-shadow: inset 0 0 0 1px var(--fio-2); transition: background .2s; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cinza); transition: transform .2s var(--curva), background .2s; }
.interruptor[aria-checked="true"] { background: var(--branco); }
.interruptor[aria-checked="true"]::after { transform: translateX(16px); background: var(--breu); }
.interruptor-alvo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; width: 100%; text-align: left; }

/* as barras (os limites, o uso) */
.barra { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; min-width: 0; }
.barra > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); border-radius: 2px; background: var(--branco); transition: width .6s var(--curva); }
.barra--sinal > i { background: var(--sinal); }
.barra--escala { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 10%), rgba(255, 255, 255, .05); }
.barra--g { height: 6px; border-radius: 3px; }

.passos { display: flex; gap: 2px; }
.passos i { flex: 1; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, .08); }
.passos i.feito { background: var(--branco); }
.passos i.agora { background: rgba(255, 255, 255, .45); }
.passos i.erro { background: var(--sinal); }

/* ---------- o alerta (o fundo do sinal, com as ações) ---------- */
.alerta { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 82, 70, .12), rgba(255, 82, 70, .06)); box-shadow: inset 0 0 0 1px var(--sinal-fio); }
/* ancora à primeira linha do título (que pode partir em duas): o ponto vive numa caixa da altura dessa linha */
.alerta-tit { display: flex; align-items: flex-start; gap: 12px; font: 500 14px/20px var(--sans); }
.alerta-marca { height: 20px; width: 16px; display: grid; place-items: center; flex-shrink: 0; }
.alerta-tit > .ic { height: 20px; }
.alerta-txt { font-size: 13px; line-height: 1.5; color: #D9C2BF; }
.alerta-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alerta-acoes .btn { flex: 1; }
@media (min-width: 960px) { .alerta-acoes .btn { flex: none; } }

/* ---------- os números grandes (com a variação e as barrinhas) ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--fio); border: 1px solid var(--fio); border-radius: 12px; overflow: hidden; }
.kpi {
  /* no telemóvel, em coluna: o número com a unidade numa linha e as barrinhas a toda a largura, por baixo */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'rot' 'num' 'barras' 'nota';
  row-gap: 8px; column-gap: 8px; align-items: end; padding: 16px; background: var(--cupula); min-width: 0; transition: background .15s;
}
.kpi:hover { background: #0F0F12; }
.kpi-rot { grid-area: rot; display: flex; align-items: center; gap: 8px; font: 400 13px/1 var(--sans); color: var(--cinza); white-space: nowrap; }
.kpi-rot .ic { width: 14px; height: 14px; }
.kpi-num { grid-area: num; display: flex; align-items: baseline; gap: 4px; font: 500 28px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-num small { font: 400 14px/1 var(--sans); color: var(--cinza); letter-spacing: 0; white-space: nowrap; }
.kpi-num--sinal { color: var(--sinal-claro); }
.kpi-nota { grid-area: nota; font: 400 12px/1.3 var(--sans); color: var(--cinza); min-width: 0; }
.kpi-nota b { font: 500 12px/1 var(--mono); color: var(--branco); }
.kpi-nota b.sinal { color: var(--sinal-claro); }
.kpi-barras { grid-area: barras; display: block; width: 100%; height: 24px; }
@media (min-width: 960px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi { padding: 16px 20px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'rot rot' 'num barras' 'nota barras'; }
  .kpi-num { font-size: 32px; }
  .kpi-barras { width: 88px; height: 36px; }
}

/* ---------- as listas ---------- */
/* a lista com barras (as contas de IA e os limites) */
.lista-barras { display: grid; }
/* cada linha: o código e o valor ancorados à primeira linha do nome, e a barra por baixo, de ponta a ponta */
.lista-barras a, .lista-barras > li > div, .lista-barras > li > button {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'cod nome val' 'cod barra barra';
  align-items: start; column-gap: 12px; row-gap: 10px; width: 100%; padding: 12px 16px; border-top: 1px solid var(--fio); text-align: left;
}
.lista-barras li:first-child a, .lista-barras li:first-child > div, .lista-barras li:first-child > button { border-top: 0; }
.lista-barras a:hover, .lista-barras > li > button:hover { background: rgba(255, 255, 255, .02); }
.lista-barras__cod { grid-area: cod; height: 20px; display: flex; align-items: center; font: 500 11px/1 var(--mono); color: var(--cinza); }
.lista-barras__cod .ic { width: 15px; height: 15px; }
.lista-barras__nome { grid-area: nome; display: grid; gap: 2px; min-width: 0; }
.lista-barras__nome b { font: 500 14px/20px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-barras__nome span { font: 400 12px/1.4 var(--sans); color: var(--cinza); }
.lista-barras > li .barra { grid-area: barra; }
.lista-barras__val { grid-area: val; height: 20px; display: flex; align-items: center; justify-content: flex-end; font: 500 12px/1 var(--mono); color: var(--branco); white-space: nowrap; }
.lista-barras__cod .area-cor { margin-left: 4px; }
.lista-barras__val.fraco { color: var(--grafite); }
.lista-barras .sinal { color: var(--sinal-claro); }

/* a lista dos acontecimentos (os pontos de estado, as horas em mono e as pessoas) */
.eventos { display: grid; }
.evento { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fio); min-width: 0; }
.eventos li:first-child .evento { border-top: 0; }
a.evento:hover { background: rgba(255, 255, 255, .02); }
/* ancora à primeira linha do título: o ponto vive numa caixa da altura dessa linha */
.evento__marca { height: 20px; width: 16px; display: grid; place-items: center; flex-shrink: 0; }
.evento__txt { display: grid; gap: 4px; min-width: 0; flex: 1; }
.evento__tit { font: 400 14px/20px var(--sans); color: var(--branco); }
.evento__meta { font: 400 12px/1.3 var(--mono); color: var(--cinza); }
.evento__meta .sinal { color: var(--sinal-claro); }
.evento__dir { display: grid; justify-items: end; gap: 6px; flex-shrink: 0; }
.evento__nota { font-size: 13px; line-height: 1.45; color: var(--cinza); }
.evento__pill { display: flex; }
.evento__quando { font: 400 11px/1 var(--mono); color: var(--grafite); white-space: nowrap; }

/* uma linha de tabela (os ficheiros, as pessoas, a atividade) */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { height: 40px; padding: 0 16px; text-align: left; font: 400 12px/1 var(--sans); color: var(--grafite); border-bottom: 1px solid var(--fio); white-space: nowrap; }
.tabela td { height: 56px; padding: 8px 16px; vertical-align: middle; border-bottom: 1px solid var(--fio); font-size: 14px; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.celula { display: flex; align-items: center; gap: 12px; min-width: 0; }
.celula__txt { display: grid; gap: 4px; min-width: 0; }
.celula__txt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.celula__txt span { font: 400 12px/1.2 var(--mono); color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ligacao { color: var(--branco); text-decoration: underline; text-decoration-color: var(--grafite); text-underline-offset: 3px; }
.ligacao:hover { text-decoration-color: var(--branco); }

/* ---------- os menus, a folha, a janela e o aviso rápido (todos da marca) ---------- */
.menu {
  position: fixed; z-index: 60; min-width: 232px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 4px;
  border-radius: 12px; background: var(--lente); box-shadow: inset 0 0 0 1px var(--fio-2), 0 20px 48px rgba(0, 0, 0, .65);
  animation: surgir .16s var(--curva);
}
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 8px;
  font: 400 14px/1.2 var(--sans); color: var(--nevoa); text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--lente-3); color: var(--branco); outline: none; }
.menu-item[aria-checked="true"] { color: var(--branco); }
.menu-item__fim { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--grafite); font: 400 11px/1 var(--mono); }
.menu-item__txt { display: grid; gap: 4px; padding: 8px 0; min-width: 0; }
.menu-item__txt small { font: 400 12px/1.3 var(--sans); color: var(--cinza); }
.menu-sep { height: 1px; margin: 4px 0; background: var(--fio); }
.menu-rot { padding: 12px 12px 8px; font: 400 11px/1 var(--mono); color: var(--grafite); }
.menu-nota { padding: 8px 12px 12px; font: 400 11px/1.4 var(--mono); color: var(--grafite); }
@keyframes surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.folha-fundo { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .62); animation: aparecer .2s; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: var(--cupula);
  box-shadow: inset 0 1px 0 var(--fio-2), 0 -24px 64px rgba(0, 0, 0, .6); animation: subir .3s var(--curva);
}
.folha-pega { width: 36px; height: 4px; margin: 4px auto 16px; border-radius: 2px; background: var(--fio-3); }
.folha-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.folha-cab h2 { font: 600 20px/1.2 var(--sans); }
.folha-cab .btn-ic { margin-left: auto; }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.janela-fundo { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); animation: aparecer .2s; }
.janela {
  width: min(440px, 100%); display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: var(--lente);
  box-shadow: inset 0 0 0 1px var(--fio-2), 0 32px 80px rgba(0, 0, 0, .75); animation: surgir .2s var(--curva);
}
.janela-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-2); color: var(--nevoa); }
.janela h2 { font: 600 20px/1.25 var(--sans); }
.janela p { color: var(--nevoa); font-size: 14px; line-height: 1.55; }
.janela-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 959px) { .janela-acoes .btn { flex: 1; } }

.toast {
  position: fixed; left: 50%; z-index: 90; bottom: calc(var(--baixo) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 16px; width: max-content; max-width: calc(100vw - 32px); border-radius: 12px;
  background: var(--lente-2); box-shadow: inset 0 0 0 1px var(--fio-2), 0 16px 40px rgba(0, 0, 0, .6); font-size: 14px; line-height: 1.4;
  animation: toast-in .3s var(--curva);
}
.toast span { min-width: 0; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 960px) { .toast { bottom: 24px; } }

/* a procura (⌘K) */
.procura-btn {
  display: none; align-items: center; gap: 8px; height: 32px; width: 220px; padding: 0 8px 0 12px; border-radius: 8px;
  background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio-2); color: var(--grafite); font: 400 13px/1 var(--sans);
}
.procura-btn:hover { color: var(--cinza); box-shadow: inset 0 0 0 1px var(--fio-3); }
.procura-btn .tecla { margin-left: auto; }
@media (min-width: 960px) { .procura-btn { display: flex; } }
.paleta { width: min(560px, 100%); padding: 0; gap: 0; overflow: hidden; align-self: start; margin-top: 12dvh; }
.paleta .campo { height: 52px; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--fio); padding: 0 16px; }
.paleta .campo:focus-within { box-shadow: none; }
.paleta-lista { max-height: 50dvh; overflow-y: auto; padding: 4px; }
.paleta-vazio { padding: 24px 16px; color: var(--cinza); font-size: 14px; }

/* o cartão que aparece por cima (o dia, o nó, a máquina) */
.flutua {
  position: absolute; z-index: 6; width: 248px; padding: 12px; display: grid; gap: 12px; border-radius: 12px; pointer-events: none;
  background: rgba(17, 17, 20, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--fio-2), 0 16px 40px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.flutua.ver { opacity: 1; transform: none; }
.flutua-cab { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); }
.flutua-cab .mono { margin-left: auto; font-size: 11px; color: var(--cinza); font-weight: 400; }
.flutua-grelha { display: grid; grid-template-columns: auto auto minmax(0, 1fr); border-top: 1px solid var(--fio); padding-top: 12px; column-gap: 16px; row-gap: 8px; }
.flutua-grelha span { white-space: nowrap; }
.flutua-grelha div { display: grid; gap: 6px; }
.flutua-grelha span { font: 400 11px/1 var(--sans); color: var(--cinza); }
.flutua-grelha b { font: 500 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.flutua-grelha b small { font-size: 11px; color: var(--cinza); font-weight: 400; }
.flutua-lista { display: grid; gap: 6px; }
.flutua-lista li { display: flex; align-items: center; gap: 8px; font: 400 12px/1.2 var(--sans); color: var(--nevoa); min-width: 0; }
.flutua-lista li span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flutua-lista li .mono { color: var(--cinza); font-size: 11px; }

/* as marcas dos tipos (a legenda do mês) */
.tipo { position: relative; width: 16px; height: 12px; flex-shrink: 0; display: inline-block; }
.tipo::before, .tipo::after { content: ''; position: absolute; }
.tipo--conversa::before { width: 5px; height: 5px; left: 5px; top: 3.5px; border-radius: 50%; background: var(--branco); }
.tipo--ajudante::before { left: 0; right: 4px; top: 5.5px; height: 1px; background: linear-gradient(90deg, transparent, var(--rosa)); }
.tipo--ajudante::after { width: 5px; height: 5px; right: 1px; top: 3.5px; border-radius: 50%; background: var(--rosa); }
.tipo--tarefa::before { width: 6px; height: 6px; left: 5px; top: 3px; border-radius: 50%; background: var(--amarelo); }
.tipo--automatismo::before { width: 2px; height: 2px; left: 3px; top: 5px; border-radius: 50%; background: var(--ambar); box-shadow: 4px -2px 0 var(--ambar), 8px 1px 0 var(--ambar), 5px 3px 0 rgba(255, 172, 74, .6); }
.tipo--ficheiro::before { width: 5px; height: 5px; left: 5.5px; top: 3.5px; background: var(--pedra); }
.tipo--precisa::before { width: 6px; height: 6px; left: 5px; top: 3px; border-radius: 50%; background: var(--sinal); box-shadow: 0 0 0 2px rgba(255, 82, 70, .25); }
.tipo--erro::before { width: 7px; height: 7px; left: 4.5px; top: 2.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sinal); }

/* ---------- a Visão: o mês da empresa ---------- */
.visao { display: grid; gap: 16px; }
.mes { display: grid; gap: 16px; padding: 16px; overflow: hidden; }
.mes-titulo { display: grid; gap: 4px; font: 600 26px/1 var(--mono); letter-spacing: -.03em; text-transform: uppercase; }
.mes-titulo span { color: var(--grafite); }
.mes-titulo b { font-weight: 600; color: var(--branco); }
.mes-titulo .mes-titulo__datas { padding-top: 8px; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--cinza); text-transform: none; }
.mes-leg, .mes-vivos { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mes-vivos { gap: 8px; }
@media (max-width: 959px) {
  /* no telemóvel, o desenho vem logo a seguir ao título: a legenda e os números por baixo */
  .mes > .mes-esq { display: contents; }
  .mes-titulo, .mes-intro { order: 1; }
  .mes-centro { order: 2; }
  .mes-leg, .mes-numeros { order: 3; }
  .mes-dir { order: 4; }
}
.mes-intro { font-size: 13px; line-height: 1.55; color: var(--cinza); max-width: 40ch; }
.mes-intro b { color: var(--nevoa); font-weight: 500; }
.mes-esq, .mes-dir { display: grid; gap: 16px; align-content: start; min-width: 0; position: relative; z-index: 2; }
.mes-centro { position: relative; min-width: 0; aspect-ratio: 1 / 1; width: 100%; }
.mes-centro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.mes-rot { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--mono); color: var(--grafite); }
.mes-rot::after { content: ''; flex: 1; height: 1px; background: var(--fio); }
.legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.legenda li { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 12px/1 var(--mono); color: var(--nevoa); }
.legenda li span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda li .mono { color: var(--grafite); font-size: 11px; }
.glossario { display: grid; gap: 8px; font: 400 11px/1.5 var(--mono); color: var(--grafite); }
.glossario dt { color: var(--nevoa); display: inline; }
.glossario dt::after { content: ' — '; color: var(--grafite); }
.glossario dd { display: inline; }
.glossario div { display: block; }
.agora { display: grid; gap: 8px; }
.agora-hora { display: flex; align-items: baseline; gap: 8px; font: 500 32px/1 var(--mono); letter-spacing: -.03em; }
.agora-hora small { font: 400 11px/1 var(--mono); letter-spacing: 0; color: var(--cinza); text-transform: lowercase; }
.agora-dia { font: 400 12px/1.3 var(--mono); color: var(--cinza); }
.vivo-linha { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-2); background: rgba(255, 255, 255, .02); min-width: 0; }
.vivo-linha:hover { box-shadow: inset 0 0 0 1px var(--fio-3); }
.vivo-linha__txt { display: grid; gap: 4px; min-width: 0; flex: 1; }
.vivo-linha__txt b { font: 500 13px/1.25 var(--sans); }
.vivo-linha__txt span { font: 400 11px/1.3 var(--mono); color: var(--cinza); }
.vivo-linha > .ic { color: var(--grafite); }
/* três números numa linha, cada rótulo numa só linha (o «tokens» explica-se no glossário) */
.mes-numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; }
.mes-numeros div { display: grid; gap: 6px; }
.mes-numeros b { font: 500 20px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mes-numeros span { font: 400 11px/1.2 var(--mono); color: var(--grafite); white-space: nowrap; }
@media (min-width: 960px) {
  .mes { grid-template-columns: 232px minmax(0, 1fr) 304px; gap: 24px; padding: 24px; min-height: 560px; }
  .mes-centro { aspect-ratio: auto; height: 100%; min-height: 512px; }
  .mes-esq { grid-template-rows: auto auto 1fr auto; height: 100%; }
  .mes-dir { height: 100%; grid-template-rows: auto auto auto 1fr; }
  .legenda { grid-template-columns: 1fr; gap: 10px; }
  .mes-glossario-fundo { align-self: end; }
}
.visao-grelha { display: grid; gap: 16px; }
.visao-coluna { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 960px) { .visao-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.parada { display: grid; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fio); }
.parada:first-child { border-top: 0; }
.parada__tit { font: 400 14px/1.4 var(--sans); }
.parada__acoes { display: flex; align-items: center; gap: 8px; }
.parada__acoes .mono { margin-right: auto; font-size: 11px; color: var(--grafite); }
.aviso-sistema { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fio); color: var(--nevoa); font-size: 13px; }
.aviso-sistema:hover { color: var(--branco); }
.aviso-sistema span { flex: 1; min-width: 0; }

/* ---------- a rede: as máquinas e as plataformas como nós ---------- */
.rede { position: relative; height: 240px; overflow: hidden; border-radius: 0 0 12px 12px; }
.rede canvas, .rede svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rede--g { height: 380px; border-radius: 12px; }
.rede-no { cursor: pointer; }
.rede-no text { font-family: var(--mono); }

/* ---------- o Chat ---------- */
.chat { display: grid; gap: 16px; }
.chat-lista { display: grid; gap: 16px; align-content: start; }
.chat-lista__topo { display: grid; gap: 8px; }
.chat-filtros { display: grid; gap: 8px; }
.chat-sec { display: grid; gap: 8px; }
.chat-sec__tit { display: flex; align-items: center; gap: 8px; height: 28px; font: 400 12px/1 var(--sans); color: var(--cinza); }
.chat-sec__tit .ic { width: 14px; height: 14px; }
.chat-sec__tit .mono { margin-left: auto; font-size: 11px; color: var(--grafite); }
.chat-sec__tit .btn-ic { margin-right: -8px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.pastas-lista { display: grid; gap: 2px; }
.pasta-linha { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--nevoa); font-size: 14px; }
.pasta-linha:hover { background: var(--lente); color: var(--branco); }
.pasta-linha span:nth-child(2) { flex: 1; min-width: 0; }
.conversas { display: grid; gap: 2px; }
.conversa-linha {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center;
  padding: 12px; border-radius: 10px; color: var(--nevoa); position: relative;
}
.conversa-linha:hover { background: var(--lente); }
.conversa-linha[aria-current="page"] { background: var(--lente-2); color: var(--branco); box-shadow: inset 0 0 0 1px var(--fio); }
.conversa-linha__marca { grid-row: 1; display: grid; place-items: center; height: 16px; }
.conversa-linha__tit { font: 500 14px/1.25 var(--sans); color: var(--branco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-linha__quando { font: 400 11px/1 var(--mono); color: var(--grafite); }
.conversa-linha__meta { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 12px/1.2 var(--sans); color: var(--cinza); }
.conversa-linha__meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-linha__meta .sinal { color: var(--sinal-claro); }
.conversa-linha__eti { font: 400 11px/1 var(--mono); color: var(--grafite); margin-left: auto; flex-shrink: 0; }

.conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.conversa-cab { display: flex; align-items: center; gap: 12px; padding: 12px 0 16px; border-bottom: 1px solid var(--fio); min-width: 0; }
.conversa-cab__txt { display: grid; gap: 8px; min-width: 0; flex: 1; }
.conversa-cab__tit { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.conversa-cab__tit h1, .conversa-cab__tit h2 { font: 600 16px/1.25 var(--sans); min-width: 0; }
.conversa-cab__det { font: 400 11px/1.4 var(--mono); color: var(--cinza); }
.conversa-cab__acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.conversa-msgs { flex: 1; min-height: 0; padding: 16px 0 24px; display: grid; gap: 24px; align-content: start; }

/* a conversa como uma linha do tempo: a hora em mono no carril, o nó, o texto */
.msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; position: relative; }
.msg::before { content: ''; position: absolute; left: 51px; top: 24px; bottom: -24px; width: 1px; background: var(--fio); }
.msg:last-child::before { display: none; }
.msg-hora { font: 400 11px/20px var(--mono); color: var(--grafite); text-align: right; }
.msg-corpo { display: grid; gap: 8px; min-width: 0; position: relative; padding-left: 16px; }
.msg-corpo::before { content: ''; position: absolute; left: -4px; top: calc((20px - 7px) / 2); /* ao centro da linha do autor (20 px) */ width: 7px; height: 7px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 4px var(--breu); }
.msg--eu .msg-corpo::before { background: var(--breu); box-shadow: inset 0 0 0 1.5px var(--nevoa), 0 0 0 4px var(--breu); }
.msg--viva .msg-corpo::before { background: var(--branco); animation: brilhar 1.6s ease-in-out infinite; }
@keyframes brilhar { 50% { box-shadow: 0 0 0 4px var(--breu), 0 0 12px 2px rgba(255, 255, 255, .5); } }
.msg-autor { display: flex; align-items: center; gap: 8px; font: 400 12px/20px var(--sans); color: var(--cinza); }
.msg-autor b { font-weight: 500; color: var(--nevoa); }
.msg-texto { font-size: 15px; line-height: 1.6; color: var(--branco); }
.msg-texto p + p { margin-top: 8px; }
.msg--eu .msg-texto { padding: 12px 16px; border-radius: 4px 12px 12px 12px; background: var(--lente-2); box-shadow: inset 0 0 0 1px var(--fio); }
.msg-ficheiro {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-2);
  font: 400 12px/1.3 var(--mono); color: var(--nevoa); min-width: 0;
}
.msg-ficheiro:hover { box-shadow: inset 0 0 0 1px var(--fio-3); }
.msg-ficheiro span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-ficheiro b { color: var(--branco); font-weight: 500; }
.msg-ficheiro i { font-style: normal; color: var(--grafite); }
.msg-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-escreve { display: flex; align-items: center; gap: 12px; font: 400 12px/20px var(--mono); color: var(--cinza); }

/* os ajudantes: o tráfego (nascem, trabalham, entregam e saem) */
.ajudantes { display: grid; border-radius: 12px; background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio-2); overflow: hidden; min-width: 0; }
.ajudantes-cab { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--fio); flex-wrap: wrap; row-gap: 4px; }
.ajudantes-cab b { font: 500 13px/1.2 var(--sans); }
.ajudantes-cab .mono { font-size: 11px; color: var(--cinza); }
.ajudantes-cab__dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.trafego { position: relative; min-height: 120px; }
.trafego svg.fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.trafego-nucleo {
  position: absolute; left: 16px; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2A2B30, #0B0B0D 70%); box-shadow: inset 0 0 0 1px var(--fio-2), 0 0 0 6px rgba(255, 255, 255, .02), 0 0 32px -8px var(--casa);
  color: var(--branco);
}
.trafego-nucleo .ic { width: 22px; height: 22px; }
.trafego-nucleo.flash { animation: flash .9s var(--curva); }
@keyframes flash { 0% { box-shadow: inset 0 0 0 1px var(--fio-2), 0 0 0 0 rgba(255, 255, 255, .5), 0 0 32px -8px var(--casa); } 100% { box-shadow: inset 0 0 0 1px var(--fio-2), 0 0 0 18px rgba(255, 255, 255, 0), 0 0 32px -8px var(--casa); } }
.trafego-filas { position: relative; display: grid; padding: 8px 12px 8px 112px; }
.aj {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--fio); transition: opacity .6s var(--curva), transform .6s var(--curva); min-width: 0;
}
.aj:first-child { border-top: 0; }
.aj.nascer { animation: aj-nascer .9s var(--curva) both; }
.aj.sair { opacity: 0; transform: translateX(-12px); }
@keyframes aj-nascer { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.aj-no { position: relative; width: 28px; height: 28px; display: grid; place-items: center; grid-row: 1 / 3; }
.aj-no svg { position: absolute; inset: 0; width: 28px; height: 28px; transform: rotate(-90deg); }
.aj-no circle { fill: none; stroke-width: 1.6; }
.aj-no .trilho { stroke: rgba(255, 255, 255, .1); }
.aj-no .arco { stroke: var(--branco); stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.aj-no i { width: 8px; height: 8px; border-radius: 50%; background: var(--branco); }
.aj[data-estado="trabalhar"] .aj-no i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--branco); }
.aj[data-estado="entregou"] .aj-no i { background: var(--branco); box-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.aj-tit { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aj-tit .mono { font-size: 11px; color: var(--grafite); flex-shrink: 0; }
.aj-tit b { font: 500 13px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aj-txt { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; font: 400 12px/1.3 var(--mono); color: var(--cinza); min-width: 0; }
.aj-txt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* o estado vai na segunda linha (o nome fica com a linha de cima toda), em tamanho pequeno */
.aj-txt .pill { height: 20px; padding: 0 6px; font-size: 11px; }
/* a pill do estado (no telemóvel, ao lado do texto) nunca encolhe: só o texto leva as reticências */
.aj-txt > [data-pill], .aj-txt > [data-pill] span { flex-shrink: 0; overflow: visible; min-width: auto; }
/* o texto fica ao lado do estado se couber; se não, passa inteiro para a linha de baixo (a largura vem do JS, em ch) */
.aj-txt > [data-txt] { flex: 1 1 var(--txt, auto); white-space: normal; }
.aj-dir { grid-column: 3; grid-row: 1 / 3; display: grid; justify-items: end; gap: 6px; }
.aj-sinal { width: 56px; height: 16px; display: block; }
.aj-sinal path { fill: none; stroke: var(--branco); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.aj-tok { font: 400 11px/1 var(--mono); color: var(--grafite); white-space: nowrap; }
.aj-ver { grid-column: 2 / 4; display: grid; gap: 4px; font: 400 12px/1.5 var(--mono); color: var(--cinza); padding: 4px 0 0 0; }
.aj-ver li { display: flex; gap: 8px; }
/* o pontinho ancora à primeira linha: uma caixa da altura da linha (18 px) com o ponto ao centro, sem margens */
.aj-ver li::before { content: ''; width: 4px; height: 18px; flex-shrink: 0; background: radial-gradient(circle, var(--grafite) 0 2px, transparent 2.5px) center / 4px 4px no-repeat; }
.aj-mostrar { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; font: 400 12px/1 var(--sans); color: var(--cinza); justify-self: start; }
.aj-mostrar:hover { color: var(--branco); }
.aj-mostrar .ic { width: 14px; height: 14px; transition: transform .2s; }
.aj-mostrar[aria-expanded="true"] .ic { transform: rotate(180deg); }
.faixas { border-top: 1px solid var(--fio); padding: 12px 16px 8px; }
.faixas svg { display: block; width: 100%; height: auto; overflow: visible; }
.faixas text { font-family: var(--mono); font-size: 10px; fill: var(--grafite); }
.registo-vivo { border-top: 1px solid var(--fio); padding: 8px 16px 12px; display: grid; gap: 4px; max-height: 132px; overflow: hidden; }
.registo-vivo li { display: flex; align-items: center; gap: 12px; font: 400 11px/1.6 var(--mono); color: var(--cinza); min-width: 0; animation: aparecer .5s; }
.registo-vivo li .h { color: var(--grafite); flex-shrink: 0; }
.registo-vivo li .q { color: var(--nevoa); flex-shrink: 0; }
.registo-vivo li span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 959px) {
  .trafego-nucleo { left: 8px; width: 40px; height: 40px; margin-top: -20px; }
  .trafego-nucleo .ic { width: 16px; height: 16px; }
  .trafego-filas { padding: 4px 12px 4px 60px; }
  /* no telemóvel, os tokens e o sinal vivo saem: o nome fica com a largura toda e pode partir em duas linhas */
  .aj { grid-template-columns: 28px minmax(0, 1fr); }
  .aj-tit { align-items: baseline; }
  .aj-tit b { white-space: normal; }
  /* o cabeçalho: o título e o «Ao vivo» na mesma linha, a contagem por baixo do título */
  .ajudantes-cab .mono { order: 3; width: 100%; padding-left: 40px; }
  .ajudantes-cab__dir { order: 2; }
  .aj-dir { display: none; }
  .aj-ver, .aj-mostrar { grid-column: 2; }
  .conversa-cab__det { display: none; }
}

/* o compositor */
.compositor { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio-2); }
.compositor:focus-within { box-shadow: inset 0 0 0 1px var(--fio-3), 0 0 0 3px var(--casa-suave); }
.compositor textarea { width: 100%; min-height: 48px; resize: none; border: 0; outline: 0; background: none; color: var(--branco); font-size: 16px; line-height: 1.5; padding: 4px; }
.compositor-barra { display: flex; align-items: center; gap: 4px; min-width: 0; }
.compositor-barra .limites { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--grafite); white-space: nowrap; }
.chip-local { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; font: 500 12px/1 var(--sans); color: var(--nevoa); box-shadow: inset 0 0 0 1px var(--fio-2); white-space: nowrap; }
.chip-local:hover { color: var(--branco); }
.chip-local .ponto { width: 6px; height: 6px; }
@media (min-width: 960px) { .compositor textarea { font-size: 14px; } }

/* o Local ao lado: a página que a IA está a fazer */
.local-painel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.local-painel__cab { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--fio); min-width: 0; }
.local-painel__cab b { font: 500 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.local-painel__cab .acoes { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ecra { flex: 1; min-height: 0; margin: 12px; border-radius: 10px; background: #08080A; box-shadow: inset 0 0 0 1px var(--fio-2); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.ecra-barra { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--fio); font: 400 11px/1 var(--mono); color: var(--grafite); flex-shrink: 0; }
.ecra-barra i { width: 6px; height: 6px; border-radius: 50%; background: var(--fio-3); }
.ecra-barra span { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecra-pag { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--lente-3) transparent; }
.ecra-varre { position: absolute; left: 0; right: 0; height: 64px; top: 32px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .05), transparent); animation: varrer 4.8s ease-in-out infinite; }
@keyframes varrer { 0% { transform: translateY(-64px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(560px); opacity: 0; } }
.pg-tit { font: 600 20px/1.2 var(--sans); }
.pg-total { display: grid; gap: 6px; padding: 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-2); }
.pg-total b { font: 600 32px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-total span { font-size: 13px; color: var(--cinza); }
.pg-sec { font: 500 13px/1 var(--sans); color: var(--cinza); display: flex; align-items: center; gap: 8px; }
.pg-linhas { display: grid; gap: 4px; }
.pg-linha { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 14px; }
.pg-linha b { font: 500 13px/1 var(--mono); }
.pg-linha span { color: var(--cinza); }
.pg-linha em { font-style: normal; font: 400 12px/1 var(--mono); color: var(--nevoa); }
.pg-linha.nova { animation: linha-nova 1.4s var(--curva); }
.pg-linha--cab { height: 24px; background: none; }
.pg-linha--cab b, .pg-linha--cab span, .pg-linha--cab em { font: 400 11px/1 var(--mono); color: var(--grafite); }
@keyframes linha-nova { 0% { background: rgba(255, 255, 255, .14); } 100% { background: rgba(255, 255, 255, .03); } }

@media (min-width: 960px) {
  .chat { grid-template-columns: 288px minmax(0, 1fr) 384px; gap: 12px; height: calc(100dvh - var(--topo) - 40px); }
  .chat--sem-local { grid-template-columns: 288px minmax(0, 1fr); }
  .chat > * { min-height: 0; }
  .chat-lista { padding: 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lente-3) transparent; }
  .conversa { padding: 0 20px 16px; }
  .conversa-msgs { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lente-3) transparent; padding-right: 8px; margin-right: -8px; }
  .conversa-cab { padding: 16px 0; }
  .conteudo--chat { padding-top: 16px; padding-bottom: 24px; }
}
@media (max-width: 959px) {
  .chat-col-conversa .conversa { height: calc(100dvh - var(--topo) - var(--baixo) - env(safe-area-inset-bottom) - 16px); }
  .conversa-msgs { overflow-y: auto; }
  .conteudo--conversa { padding-top: 0; padding-bottom: 0; }
  .conteudo--conversa .compositor { margin-bottom: 8px; }
}

/* ---------- as Tarefas ---------- */
.tarefas { display: grid; gap: 24px; }
.precisa { display: grid; gap: 0; padding: 0; overflow: hidden; }
.precisa-cab { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--sinal-fio); }
.precisa-cab b { font: 500 14px/1.2 var(--sans); }
.precisa-cab .ligacao-tudo { margin-left: auto; color: var(--sinal-claro); }
.precisa-linha { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid rgba(255, 82, 70, .14); min-width: 0; flex-wrap: wrap; }
.precisa-linha:first-of-type { border-top: 0; }
.precisa-linha p { flex: 1 1 240px; min-width: 0; font-size: 14px; line-height: 1.45; color: #E4CFCC; }
.precisa-linha p b { color: var(--branco); font-weight: 500; }
.projetos { display: grid; gap: 12px; }
.projeto { display: grid; gap: 12px; padding: 16px; scroll-margin-top: 80px; }
.projeto.realce { box-shadow: inset 0 0 0 1px var(--fio-3), 0 0 0 4px var(--casa-suave); }
.projeto-tit { display: flex; align-items: center; gap: 12px; min-width: 0; }
.projeto-tit b { font: 500 15px/1.2 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projeto-tit .lado-projeto__ponto { margin: 0; width: 8px; height: 8px; }
.projeto-medida { display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--mono); color: var(--cinza); }
.projeto-medida .sinal { margin-left: auto; color: var(--sinal-claro); }
@media (min-width: 960px) { .projetos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ferramentas-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ferramentas-barra .campo { flex: 1 1 280px; }
.quadro { display: grid; gap: 24px; }
.coluna { display: grid; gap: 12px; align-content: start; min-width: 0; }
.coluna-cab { display: flex; align-items: center; gap: 8px; height: 32px; border-bottom: 1px solid var(--fio); font: 500 12px/1 var(--mono); color: var(--nevoa); text-transform: lowercase; }
.coluna-cab .mono { color: var(--grafite); font-weight: 400; }
.cartao-t { display: grid; gap: 12px; padding: 16px; }
.cartao-t__tit { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.cartao-t__tit b { font: 500 14px/1.4 var(--sans); }
.cartao-t__txt { font-size: 13px; line-height: 1.5; color: var(--cinza); }
.cartao-t__txt.sinal { color: var(--sinal-claro); }
.cartao-t__pe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--fio); font: 400 11px/1.3 var(--mono); color: var(--grafite); }
.cartao-t__pe .pill { height: 20px; }
.cartao-t__passos { display: grid; gap: 6px; font: 400 11px/1 var(--mono); color: var(--cinza); }
.agentes-vivos { display: inline-flex; align-items: center; gap: 4px; }
.agentes-vivos i { width: 5px; height: 5px; border-radius: 50%; background: var(--branco); animation: piscar 1.4s ease-in-out infinite; }
.agentes-vivos i:nth-child(2) { animation-delay: .2s; }
.agentes-vivos i:nth-child(3) { animation-delay: .4s; }
@keyframes piscar { 50% { opacity: .25; } }
@media (min-width: 960px) { .quadro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.lista-t .tabela td:first-child { width: 48%; }

/* ---------- o Local ---------- */
.local { display: grid; gap: 16px; }
.local-resumo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.maquinas { display: grid; }
.maquina { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; padding: 16px; border-top: 1px solid var(--fio); cursor: pointer; }
.maquinas li:first-child .maquina { border-top: 0; }
.maquina:hover { background: rgba(255, 255, 255, .015); }
.maquina[aria-current="true"] { background: rgba(255, 255, 255, .03); box-shadow: inset 2px 0 0 var(--casa); }
.maquina__marca { height: 22px; display: grid; place-items: center; }
.maquina__corpo { display: grid; gap: 8px; min-width: 0; }
.maquina__tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.maquina__tit b { font: 500 15px/22px var(--sans); }
.maquina__meta { display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--cinza); min-width: 0; }
.maquina__meta a { justify-self: start; color: var(--nevoa); text-decoration: underline; text-decoration-color: var(--grafite); text-underline-offset: 3px; }
.maquina__meta a:hover { color: var(--branco); text-decoration-color: var(--branco); }
/* o pulso: o traço na linha toda (telemóvel) e os dados por baixo, sem separadores soltos */
.maquina__pulso { grid-column: 2; display: grid; gap: 8px; min-width: 0; }
.maquina__pulso svg { width: 100%; height: 20px; display: block; }
.maquina__pulso path { fill: none; stroke: var(--nevoa); stroke-width: 1.2; stroke-linejoin: round; }
.maquina__dados { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; font: 400 11px/1.4 var(--mono); color: var(--grafite); min-width: 0; }
.maquina__dados > span { white-space: nowrap; }
.maquina__dados > span:first-child { color: var(--cinza); }
.maquina__acoes { grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.maquina__sempre { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; border-top: 1px solid var(--fio); font: 400 13px/1 var(--sans); color: var(--nevoa); white-space: nowrap; text-align: left; }
.maquina__sempre:hover { color: var(--branco); }
.maquina__sempre[aria-checked="true"] .interruptor { background: var(--branco); }
.maquina__sempre[aria-checked="true"] .interruptor::after { transform: translateX(16px); background: var(--breu); }
@media (max-width: 959px) {
  /* no telemóvel não há painel ao lado: nenhuma linha fica escolhida */
  .maquina[aria-current="true"] { background: none; box-shadow: none; }
}
@media (min-width: 960px) {
  .local { grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
  .local-ver { position: sticky; top: calc(var(--topo) + 24px); height: calc(100dvh - var(--topo) - 48px); display: flex; flex-direction: column; }
  .local-ver > * { flex: 1; min-height: 0; }
  .maquina { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .maquina__pulso { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 16px; }
  .maquina__pulso svg { width: 120px; flex-shrink: 0; }
  .maquina__acoes { grid-column: 3; grid-row: 1; align-self: start; display: grid; grid-template-columns: auto auto; justify-items: end; }
  .maquina__sempre { grid-column: 1 / 3; width: auto; justify-content: flex-end; border-top: 0; }
}

/* ---------- os Ficheiros (a coluna com a procura e a árvore, os cartões das pastas e a tabela) ---------- */
.ficheiros { display: grid; gap: 16px; }
.fich-col { display: grid; gap: 12px; align-content: start; padding: 12px; }
.fich-col__cab { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; }
.fich-col__cab b { font: 600 14px/1 var(--sans); margin-right: auto; }
.arvore { display: grid; gap: 2px; }
.arvore-item { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: 8px; color: var(--nevoa); font: 400 14px/1 var(--sans); width: 100%; text-align: left; }
.arvore-item:hover { background: var(--lente); color: var(--branco); }
.arvore-item[aria-current="true"] { background: var(--lente-2); color: var(--branco); }
.arvore-item > span:not(.conta) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore-item .ic { color: var(--cinza); }
.arvore-item .seta { transition: transform .2s; color: var(--grafite); }
.arvore-item[aria-expanded="false"] .seta { transform: rotate(-90deg); }
.arvore-item--sub { padding-left: 32px; height: 32px; font-size: 13px; color: var(--cinza); position: relative; }
.arvore-item--sub::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: var(--fio); }
.arvore-item .conta { min-width: 24px; height: 20px; border-radius: 6px; }
.fich-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pasta-cartao { display: grid; gap: 12px; justify-items: center; align-content: start; padding: 16px 12px; border-radius: 14px; background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio); text-align: center; }
.pasta-cartao:hover { box-shadow: inset 0 0 0 1px var(--fio-2); background: #0E0E11; }
.pasta-cartao[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--fio-3); }
.pasta-cartao__txt { display: grid; gap: 4px; }
.pasta-cartao__txt b { font: 500 14px/1.2 var(--sans); }
.pasta-cartao__meta { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 2px; font: 400 11px/1.3 var(--mono); color: var(--cinza); }
.pasta-cartao__meta > span { white-space: nowrap; }
.pasta-cartao__meta > span + span { color: var(--grafite); }
@media (min-width: 960px) { .fich-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pasta-cartao { padding: 20px 16px 16px; } }

/* a pasta fosca: o fundo com a aba, a folha a sair e a frente de vidro */
.pasta-ic { position: relative; width: 112px; height: 84px; }
.pasta-ic__fundo { position: absolute; inset: 8px 0 0 0; border-radius: 10px; background: linear-gradient(180deg, #34343A, #232328); }
.pasta-ic__fundo::before { content: ''; position: absolute; left: 0; top: -8px; width: 44px; height: 14px; border-radius: 8px 8px 0 0; background: #34343A; }
.pasta-ic__folha { position: absolute; left: 16px; right: 18px; top: 4px; height: 56px; border-radius: 4px; background: linear-gradient(180deg, #F7F7F5, #DADAD6); transform: rotate(-5deg); transform-origin: 30% 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pasta-ic__folha::before { content: ''; position: absolute; left: 10px; right: 14px; top: 12px; height: 24px; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 6px); }
.pasta-ic__folha--2 { left: 26px; right: 10px; top: 8px; transform: rotate(4deg); background: linear-gradient(180deg, #E6E6E2, #C9C9C4); }
.pasta-ic__frente {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 10px; display: flex; align-items: flex-end; padding: 0 0 10px 12px;
  background: linear-gradient(180deg, rgba(90, 90, 98, .55), rgba(52, 52, 58, .7)); -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06);
  font: 600 9px/1 var(--mono); letter-spacing: .2em; color: rgba(255, 255, 255, .42);
}
.pasta-ic--p { width: 28px; height: 22px; }

/* ---------- a Estrutura ---------- */
.estrutura { display: grid; gap: 16px; }
.mapa-painel { position: relative; overflow: hidden; height: 460px; }
.mapa-painel canvas { display: block; }
.mapa-topo { position: absolute; left: 16px; top: 16px; z-index: 3; display: grid; gap: 6px; pointer-events: none; }
.mapa-topo b { font: 500 11px/1 var(--mono); letter-spacing: .18em; }
.mapa-topo span { font: 400 11px/1 var(--mono); color: var(--cinza); }
.mapa-vistas { position: absolute; right: 12px; top: 12px; z-index: 3; }
.mapa-dica { position: absolute; left: 16px; bottom: 16px; z-index: 3; font: 400 11px/1.3 var(--mono); color: var(--grafite); pointer-events: none; }
.mapa-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 4px; }
.mapa-espera { position: absolute; inset: 0; display: grid; place-items: center; color: var(--grafite); font: 400 12px/1 var(--mono); }
.areas { display: grid; }
.diag { display: grid; gap: 12px; }
@media (min-width: 960px) {
  .estrutura { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .mapa-painel { height: calc(100dvh - var(--topo) - 200px); min-height: 520px; }
  .estrutura-lado { display: grid; gap: 16px; }
}

/* ---------- as Configurações ---------- */
.config { display: grid; gap: 16px; }
.config-col { display: grid; gap: 2px; align-content: start; padding: 8px; }
.config-col .menu-rot { padding: 12px 12px 8px; }
.config-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--nevoa); font: 400 14px/1.2 var(--sans); }
.config-item:hover { background: var(--lente); color: var(--branco); }
.config-item[aria-current="page"] { background: var(--lente-2); color: var(--branco); }
.config-item .ic { color: var(--cinza); }
.config-item > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 4px; }
.config-item small { font-size: 12px; color: var(--grafite); }
.config-item > .ic:last-child { color: var(--grafite); }
@media (max-width: 959px) { .config-item { min-height: 56px; padding: 8px 12px; } }
.config-conteudo { display: grid; gap: 16px; min-width: 0; align-content: start; }
.contas-g { display: grid; gap: 12px; }
.conta-c { display: grid; gap: 16px; padding: 16px; }
.conta-c__cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conta-c__cab > div { display: grid; gap: 6px; min-width: 0; flex: 1; }
.conta-c__cab b { font: 500 15px/1.2 var(--sans); }
.conta-c__cab span { font: 400 12px/1.2 var(--mono); color: var(--cinza); }
.conta-c__papel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--nevoa); }
.medidores { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.medidor-arco { width: 96px; height: 96px; display: block; }
.medidor-arco text { font-family: var(--mono); }
.limites-l { display: grid; gap: 12px; }
.limite { display: grid; gap: 8px; }
.limite__l { display: flex; align-items: baseline; gap: 8px; font: 400 12px/1 var(--mono); color: var(--cinza); }
.limite__l b { margin-left: auto; color: var(--branco); font-weight: 500; }
.conta-c__pe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--fio); font: 400 11px/1.3 var(--mono); color: var(--grafite); }
.conta-c__pe b { color: var(--nevoa); font-weight: 400; margin-left: auto; }
@media (min-width: 960px) {
  .config { grid-template-columns: 264px minmax(0, 1fr); align-items: start; gap: 24px; }
  .config-col { position: sticky; top: calc(var(--topo) + 24px); }
  .contas-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.cores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cor-op { display: grid; gap: 12px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--fio-2); text-align: left; min-height: 44px; }
.cor-op:hover { box-shadow: inset 0 0 0 1px var(--fio-3); }
.cor-op[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--branco); background: rgba(255, 255, 255, .03); }
.cor-op__amostra { height: 40px; border-radius: 8px; position: relative; overflow: hidden; }
.cor-op__nome { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); }
.cor-op__nome .mono { margin-left: auto; font-size: 11px; color: var(--grafite); font-weight: 400; }
@media (min-width: 960px) { .cores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.previa { display: grid; gap: 16px; }
.previa-palco { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: 300px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--fio-2); background: var(--breu); }
.previa-carril { display: grid; gap: 8px; align-content: start; justify-items: center; padding: 12px 0; border-right: 1px solid var(--fio); }
.previa-carril .marca { width: 28px; height: 28px; }
.previa-carril i { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--grafite); position: relative; }
.previa-carril i.sim { background: var(--lente-2); color: var(--branco); }
.previa-carril i.sim::before { content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 2px; background: var(--casa); box-shadow: 0 0 10px var(--casa); }
.previa-centro { position: relative; min-height: 300px; }
.previa-centro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.onde-entra { display: grid; gap: 8px; }
/* o ponto ancora à primeira linha: uma caixa com a altura de uma linha (o texto pode partir em duas) */
.onde-entra li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 20px; color: var(--nevoa); }
.onde-entra__marca { height: 20px; width: 8px; flex-shrink: 0; display: grid; place-items: center; }
.onde-entra li .ponto { background: var(--casa); box-shadow: 0 0 8px var(--casa); }
.onde-entra li .ponto.nao { background: var(--sinal); box-shadow: none; }

.pessoas .tabela td:first-child { width: 40%; }
.acesso { display: grid; gap: 12px; padding: 16px; }
.acesso-cab { display: flex; align-items: center; gap: 12px; }
.acesso-cab b { font: 500 15px/1.2 var(--sans); }
.acesso p { font-size: 13px; color: var(--nevoa); line-height: 1.55; }

/* uma página curta de uma parte (ou do «Mais») */
.parte { display: grid; gap: 16px; }
.linhas { display: grid; }
.linha { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fio); min-width: 0; min-height: 56px; }
.linhas > li:first-child > .linha, .linhas > .linha:first-child { border-top: 0; }
a.linha:hover { background: rgba(255, 255, 255, .02); }
.linha__txt { display: grid; gap: 4px; min-width: 0; flex: 1; }
.linha__txt b { font: 500 14px/1.35 var(--sans); }
.linha__txt span { font-size: 13px; line-height: 1.45; color: var(--cinza); overflow-wrap: anywhere; }
.linha__txt .mono { font-size: 11px; color: var(--grafite); }
.linha__dir { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.linha__ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-2); color: var(--nevoa); }
.grelha-2 { display: grid; gap: 16px; }
@media (min-width: 960px) { .grelha-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grelha-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grelha-3 { display: grid; gap: 16px; }

/* os Automatismos: cada um com a régua das últimas 24 horas (os traços de quando correu) */
.regua { display: block; width: 100%; height: 28px; }
.regua-eixo { display: flex; justify-content: space-between; font: 400 10px/1 var(--mono); color: var(--grafite); }
.auto { display: grid; gap: 12px; padding: 16px; border-top: 1px solid var(--fio); }
.auto:first-child { border-top: 0; }
.auto-cab { display: flex; align-items: flex-start; gap: 12px; }
.auto-cab b { flex: 1; font: 500 14px/1.45 var(--sans); min-width: 0; }
.auto-pe { display: flex; column-gap: 16px; row-gap: 4px; flex-wrap: wrap; font: 400 11px/1.3 var(--mono); color: var(--cinza); }
.auto-pe span b { color: var(--nevoa); font-weight: 400; }

/* o texto cresce e a nota e o «Abrir» ficam em baixo, à mesma altura nas três */
.ferr { display: grid; grid-template-rows: auto auto 1fr auto auto; align-content: start; gap: 16px; padding: 16px; }
.ferr-desenho { height: 136px; border-radius: 10px; background: #08080A; box-shadow: inset 0 0 0 1px var(--fio); position: relative; overflow: hidden; }
.ferr-desenho svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ferr-tit { display: flex; align-items: center; gap: 12px; }
.ferr-tit b { font: 500 15px/1.2 var(--sans); }
.ferr p { font-size: 13px; line-height: 1.55; color: var(--nevoa); }
.ferr small { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--cinza); }


/* =========================================================================================
   O que as páginas juntaram (a conversa nova, o terminal, a Estrutura, os Ficheiros, as Configurações e o «Mais»)
   ========================================================================================= */
.visao > .pag-cab, .parte > .pag-cab, .fich-corpo > .pag-cab, .config-conteudo > .pag-cab { margin-bottom: 8px; }
.tarefas > .pag-cab { margin-bottom: 0; }
.painel-corpo--campo { padding: 12px 16px 4px; }
.painel-corpo--chips { padding: 12px 16px; border-bottom: 1px solid var(--fio); }
.nota-txt { font-size: 14px; line-height: 1.55; color: var(--nevoa); max-width: 72ch; }
.parte { display: grid; gap: 16px; }
button.linha { width: 100%; text-align: left; }
button.linha:hover { background: rgba(255, 255, 255, .02); }
.linha > .ic:last-child, .linha__dir > .ic:last-child { color: var(--grafite); }
.sinal { color: var(--sinal-claro); }
.marca--g { width: 48px; height: 48px; border-radius: 12px; }
.marca--g .ic { width: 24px; height: 24px; }

/* o Chat: as colunas no computador, a lista com margem, a conversa nova e o terminal */
.chat-lista { padding: 12px; }
.chat-lista__filtros { display: grid; gap: 16px; min-width: 0; }
.folha .chat-lista__filtros { margin-bottom: 16px; }
.chat-procura { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-procura .campo { flex: 1; }
.chat-procura .btn-ic { position: relative; }
.conta--canto { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 5px; background: var(--branco); color: #0A0A0B; }
@media (min-width: 960px) {
  .chat-col-lista, .chat-col-conversa, .chat-col-local { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .chat-col-lista > *, .chat-col-conversa > *, .chat-col-local > * { flex: 1; min-height: 0; }
}
@media (max-width: 959px) {
  .chat-col-conversa .conversa.painel { background: none; box-shadow: none; border-radius: 0; }
}
.conversa-vazia { display: grid; justify-items: start; gap: 12px; padding: 24px 0; max-width: 56ch; }
.conversa-vazia b { font: 600 20px/1.25 var(--sans); }
.conversa-vazia p { font-size: 14px; line-height: 1.55; color: var(--nevoa); }
.conversa-msgs.terminal .msg-texto { font: 400 13px/1.6 var(--mono); color: var(--nevoa); }
.conversa-msgs.terminal .msg--eu .msg-texto { padding: 0; background: none; box-shadow: none; color: var(--branco); }
.conversa-msgs.terminal .msg--eu .msg-texto p::before { content: '> '; color: var(--grafite); }
.conversa-msgs.terminal .msg-autor { font-family: var(--mono); font-size: 11px; }
.local-painel--folha { height: min(70dvh, 560px); margin: 0 -16px; border-top: 1px solid var(--fio); }

/* o botão da conta, no topo */
.conta-btn { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 4px; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--nevoa); white-space: nowrap; }
.conta-btn:hover { background: var(--lente); color: var(--branco); }
.conta-btn > .ic { color: var(--grafite); }
.app.carril .lado-grupo--mais { display: none; }

/* a Estrutura */
.estrutura-mapa { display: grid; gap: 12px; min-width: 0; align-content: start; }
.estrutura-lado { display: grid; gap: 16px; min-width: 0; }
.mapa-painel { height: 440px; }
.mapa-painel::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--fio); pointer-events: none; }
.mapa-painel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-painel:focus-visible { outline: 2px solid var(--casa); outline-offset: 2px; }
.mapa-vistas .seg { background: rgba(11, 11, 13, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mapa-zoom .btn-ic { background: rgba(11, 11, 13, .86); color: var(--nevoa); }
.mapa-zoom .btn-ic:hover { background: var(--lente-2); color: var(--branco); }
.mapa-dica { right: 168px; transition: color .2s; }
.mapa-dica.ver { color: var(--nevoa); }
.mapa-espera span { display: inline-flex; align-items: center; gap: 12px; }
.mapa-nota { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 16px; min-height: 64px; }
/* ancora à primeira linha do título: o ponto e o ícone vivem numa caixa da altura dessa linha */
.mapa-nota__marca { height: 20px; display: grid; place-items: center; color: var(--cinza); }
.mapa-nota > .btn { align-self: center; }
.mapa-nota__txt { display: grid; gap: 4px; min-width: 0; }
.mapa-nota__txt b { font: 500 14px/20px var(--sans); }
.mapa-nota__txt span { font-size: 13px; line-height: 1.45; color: var(--cinza); }
.mapa-nota__txt code { font: 400 11px/1.4 var(--mono); color: var(--grafite); overflow-wrap: anywhere; }
.mapa-nota__txt .sinal { color: var(--sinal-claro); }
.area-cor { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--grafite); justify-self: center; }
.area-cor--g { width: 10px; height: 10px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .03); }
.lista-barras--areas .lista-barras__nome span { white-space: normal; }
.linhas--notas .linha { min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
.linha--nota .area-cor { width: 8px; }
.mais-notas { width: 100%; justify-content: center; height: 44px; border-top: 1px solid var(--fio); border-radius: 0 0 12px 12px; }
.diag-txt { font-size: 13px; line-height: 1.55; color: var(--nevoa); }
.diag-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px; column-gap: 12px; align-items: start; width: 100%; padding: 12px; border-radius: 10px; text-align: left; background: var(--sinal-fundo); box-shadow: inset 0 0 0 1px var(--sinal-fio); }
.diag-item:hover { background: var(--sinal-fundo-2); }
.diag-item > .ic { align-self: center; color: var(--sinal-claro); }
.diag-item__txt { display: grid; gap: 4px; min-width: 0; }
.diag-item__txt b { font: 500 14px/20px var(--sans); }
.diag-item__txt span { font-size: 12px; line-height: 1.45; color: #D9C2BF; }
.diag-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diag-acoes .btn[aria-pressed="true"] { background: var(--lente-3); box-shadow: inset 0 0 0 1px var(--fio-3); }
.alternadores { display: grid; padding-top: 4px; padding-bottom: 4px; }
.alternadores .interruptor-alvo { padding: 12px 0; border-top: 1px solid var(--fio); }
.alternadores .interruptor-alvo:first-child { border-top: 0; }
.interruptor-alvo__txt { display: grid; gap: 4px; min-width: 0; }
.interruptor-alvo__txt b { font: 500 14px/1.35 var(--sans); }
.interruptor-alvo__txt span { font-size: 13px; line-height: 1.45; color: var(--cinza); }
.interruptor-alvo[aria-checked="true"] .interruptor { background: var(--branco); }
.interruptor-alvo[aria-checked="true"] .interruptor::after { transform: translateX(16px); background: var(--breu); }
@media (min-width: 960px) {
  .mapa-painel { height: calc(100dvh - var(--topo) - 236px); min-height: 520px; }
  .estrutura-lado { position: sticky; top: calc(var(--topo) + 24px); max-height: calc(100dvh - var(--topo) - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lente-3) transparent; padding-right: 2px; }
}
@media (max-width: 959px) {
  .mapa-dica { display: none; }
  .mapa-painel { margin: 0 -16px; border-radius: 0; height: 420px; }
  .mapa-painel::after { border-radius: 0; box-shadow: inset 0 1px 0 var(--fio), inset 0 -1px 0 var(--fio); }
}

/* os Ficheiros */
@media (min-width: 960px) {
  .ficheiros { grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 24px; }
  .fich-col { position: sticky; top: calc(var(--topo) + 24px); }
}
.fich-corpo { display: grid; gap: 16px; min-width: 0; align-content: start; }
.fich-col .seg { display: flex; }
.seg--cheio { width: 100%; }
.seg--cheio button { flex: 1; }
.fich-col .arvore-item { min-height: 44px; }
.fich-col .arvore-item--sub { min-height: 36px; }
.arvore-item__ext { font: 400 11px/1 var(--mono); color: var(--grafite); flex: none !important; }
.arvore-item .seta { color: var(--grafite); }
@media (min-width: 960px) { .fich-col .arvore-item { min-height: 36px; } .fich-col .arvore-item--sub { min-height: 32px; } }
.pasta-cartao { width: 100%; }
.pasta-cartao .pasta-ic__frente { justify-content: flex-start; }
.tabela--fich { table-layout: fixed; }
.tabela--fich th, .tabela--fich td { padding-left: 12px; padding-right: 12px; }
.tabela--fich th:first-child, .tabela--fich td:first-child { padding-left: 16px; }
.sem-partir { white-space: nowrap; }
.celula__um { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore-vazio { width: 14px; height: 14px; flex-shrink: 0; }
.fich-procura { display: grid; gap: 12px; }
.fich-arvore { display: grid; gap: 2px; }
.fich-pastas { display: grid; gap: 12px; }
.fich-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; scroll-margin-top: calc(var(--topo) + 16px); }
.fich-subs .chip { height: 36px; }
#gerados-tit { scroll-margin-top: calc(var(--topo) + 32px); }
@media (max-width: 959px) {
  /* no telemóvel: o título primeiro, depois a procura, as pastas (ou os tipos), a lista e o que vem com o OS */
  .ficheiros { display: flex; flex-direction: column; gap: 16px; }
  .fich-col, .fich-corpo { display: contents; }
  .fich-col__cab { display: none; }
  .fich-corpo > .pag-cab { order: 1; margin-bottom: 0; }
  .fich-procura { order: 2; }
  .fich-arvore, .fich-pastas { order: 3; }
  .fich-corpo > section.painel { order: 4; }
  .ficheiros[data-modo="pastas"] .fich-arvore { display: none; }
  .ficheiros[data-modo="tipos"] .fich-pastas { display: none; }
  .fich-arvore { padding: 8px; border-radius: 12px; background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio); }
}
.tabela .celula__txt { min-width: 0; }
.tabela td > .fraco:not(.pill), .tabela td > span:not(.pill) { display: block; line-height: 1.4; }
.ligacao-celula { color: var(--nevoa); }
.ligacao-celula:hover { color: var(--branco); }
.ligacao-celula span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligacao-celula .ic { color: var(--grafite); }

/* as Configurações */
.config-folha { display: grid; gap: 8px; }
.config-folha > .pag-cab { margin-bottom: 8px; }
.config-folha .config-col { padding: 4px; }
.voltar { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 0; width: max-content; color: var(--nevoa); font: 500 14px/1 var(--sans); }
.voltar:hover { color: var(--branco); }
.conta-c__cod { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fio-2); font: 500 11px/1 var(--mono); color: var(--nevoa); }
.conta-c__papel > span:last-child { color: var(--cinza); }
.limite__nota { font: 400 11px/1.45 var(--mono); color: var(--grafite); }
.medidores > .limite__nota { font-size: 12px; color: var(--cinza); }
.uso-30 { display: grid; gap: 12px; }
.uso-30__num { display: grid; gap: 8px; }
.uso-30__num b { display: flex; align-items: baseline; gap: 6px; font: 500 32px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.uso-30__num b small { font: 400 14px/1 var(--sans); color: var(--cinza); letter-spacing: 0; }
.uso-30__num > span { font-size: 13px; line-height: 1.45; color: var(--cinza); }
.uso-30__barras { display: block; width: 100%; height: 120px; }
.cor-op { width: 100%; }
.cor-op__amostra { height: 72px; background: radial-gradient(90% 130% at 50% 125%, color-mix(in srgb, var(--c) 55%, transparent), transparent 72%), #08080A; box-shadow: inset 0 0 0 1px var(--fio); }
.cor-op__amostra i { position: absolute; left: 50%; bottom: -22px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2A2B30, #0B0B0D 70%); box-shadow: 0 0 28px 6px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.previa-palco { min-height: 320px; }
.previa-centro { min-height: 320px; }
@media (min-width: 960px) { .previa { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; } .previa-palco, .previa-centro { min-height: 360px; } }
.alerta--aviso { background: var(--cupula); box-shadow: inset 0 0 0 1px var(--fio-2); }
.alerta--aviso .alerta-tit .ic { color: var(--nevoa); }
.alerta--aviso .alerta-txt { color: var(--nevoa); }
.codigo-barras { display: grid; gap: 12px; }
.codigo-barras svg { display: block; width: 100%; height: 64px; }
.legenda--linha { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.legenda--linha li { flex: none; }
.chip .tipo { width: 12px; }
.agente { display: grid; gap: 12px; }
.agente-vivo { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); color: var(--cinza); }
.autos { display: grid; }
.auto .evento__marca { width: 16px; }
.auto-cab .pill { flex-shrink: 0; }
.ferr .btn { justify-self: start; }
/* ancora à primeira linha da nota: o ícone numa caixa da altura dessa linha */
.ferr small { align-items: flex-start; }
.ferr small .ic { height: 18px; color: var(--grafite); }
/* o ponto e a hora ancoram à primeira linha (o assunto); o resumo pode partir em várias */
.linha--email { align-items: flex-start; }
.linha__marca { height: 19px; width: 8px; flex-shrink: 0; display: grid; place-items: center; }
.linha--email .linha__dir { height: 19px; }

/* ---------- o movimento: calmo, e nenhum com o «reduzir o movimento» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .onda path, .ponto--sinal::after, .agentes-vivos i, .ecra-varre, .msg--viva .msg-corpo::before { animation: none !important; }
  .ponto--sinal { box-shadow: 0 0 0 3px rgba(255, 82, 70, .3); }
}