/* ORBS — Central do Hermes
   Os orbes são a única coisa que fala alto. O texto fica nos cantos, sem caixas, e só aparece quando informa.
   Letra: Bahnschrift (a DIN do Windows), a grafia dos painéis de instrumentos — combina com um reator de precisão. */

[hidden] { display: none !important; }

:root {
  --marinho: #0B1020;
  --fundo: #060A17;
  --ciano: #0E99E5;
  --ciano-claro: #7AD8FF;
  --ouro: #F2B233;
  --ouro-claro: #FFE2A0;
  --falha: #FF9A9A;
  --texto: #E6F1FF;
  --texto-2: #B4C8E4;
  --texto-3: #8497B5;
  --fio: rgba(122, 216, 255, 0.2);
  --fonte: "Bahnschrift", "DIN Alternate", "DIN 2014", "Barlow Semi Condensed", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --margem: clamp(16px, 2.4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* a tela pode ser um notebook ou uma TV vista de longe: o texto acompanha o tamanho */
  font-size: clamp(12px, 0.46vw + 0.68vh, 32px);
  background: var(--fundo);
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--texto);
  font-family: var(--fonte);
  font-stretch: 92%;
  font-weight: 400;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% 46%, #0F1C3D 0%, #0C1631 42%, #060A17 100%);
}

h1, h2, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- nomes sob os orbes ---------- */

.rotulos { position: fixed; inset: 0; pointer-events: none; }

.rotulo {
  position: absolute; left: 0; top: 0;
  width: 15rem; transform: translateX(-50%);
  text-align: center;
  transition: opacity 0.5s ease;
}
.rotulo-nome {
  font-size: 1.06rem; font-weight: 600; font-stretch: 88%;
  letter-spacing: 0.02em; color: var(--texto);
  text-shadow: 0 0 1.2rem rgba(6, 10, 23, 0.9), 0 1px 2px rgba(6, 10, 23, 0.9);
}
.rotulo-papel { font-size: 0.8rem; font-weight: 300; color: var(--texto-2); text-shadow: 0 1px 2px rgba(6, 10, 23, 0.9); }
.rotulo-estado {
  display: inline-flex; align-items: center; gap: 0.42em;
  margin-top: 0.28rem;
  font-size: 0.8rem; font-weight: 600; color: var(--cor-estado, var(--ciano-claro));
  text-shadow: 0 1px 2px rgba(6, 10, 23, 0.95);
}
.rotulo-etapa {
  font-size: 0.78rem; font-weight: 300; color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(6, 10, 23, 0.95);
}
.rotulo[data-tipo="nucleus"] .rotulo-nome { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.14em; margin-right: -0.14em; }
.rotulo[data-tipo="nucleus"] .rotulo-papel { font-size: 0.88rem; }
/* lua: o nome aparece só quando ela está trabalhando, ao lado dela e do lado de fora */
.rotulo[data-tipo="moon"] {
  width: max-content; max-width: 12rem;
  display: grid; grid-template-columns: auto auto; column-gap: 0.4em; align-items: center; justify-content: start;
  text-align: left; transform: translateY(-50%);
}
.rotulo[data-tipo="moon"][data-lado="esq"] { transform: translate(-100%, -50%); justify-content: end; text-align: right; }
.rotulo[data-tipo="moon"] .rotulo-caixa-estado { grid-area: 1 / 1; display: flex; }
.rotulo[data-tipo="moon"] .rotulo-nome { grid-area: 1 / 2; font-size: 0.8rem; font-weight: 600; }
.rotulo[data-tipo="moon"] .rotulo-etapa { grid-area: 2 / 1 / 3 / 3; font-size: 0.74rem; }
.rotulo[data-tipo="moon"] .rotulo-estado { margin-top: 0; }
.rotulo[data-tipo="moon"] .rotulo-estado > span:last-child { display: none; }
.rotulo[data-tipo="moon"] .rotulo-papel { display: none; }
.rotulo[data-tipo="moon"]:not([data-ativo]) { opacity: 0; }
.rotulo[data-apagado] { opacity: 0.45; }

/* a forma do marcador muda com o estado: a leitura não depende só da cor */
.marca-estado { width: 0.66em; height: 0.66em; flex: none; background: currentColor; border-radius: 50%; }
[data-estado="na_fila"] .marca-estado { background: none; border: 0.12em solid currentColor; }
[data-estado="aguardando_aprovacao"] .marca-estado { border-radius: 0; transform: rotate(45deg); }
[data-estado="aguardando_recurso"] .marca-estado { background: none; border: 0.12em dotted currentColor; width: 0.7em; height: 0.7em; }
[data-estado="falhou"] .marca-estado { border-radius: 0; height: 0.16em; width: 0.7em; }
[data-estado="cancelado"] .marca-estado { border-radius: 0; height: 0.16em; width: 0.7em; }
[data-estado="desconhecido"] .marca-estado { background: none; border: 0.12em dashed currentColor; }
[data-estado="concluido"] .marca-estado {
  background: none; border-radius: 0; width: 0.38em; height: 0.66em;
  border: solid currentColor; border-width: 0 0.15em 0.15em 0; transform: rotate(42deg) translate(-0.08em, -0.1em);
}

[data-estado="executando"] { --cor-estado: var(--ciano-claro); }
[data-estado="na_fila"] { --cor-estado: var(--texto-2); }
[data-estado="aguardando_aprovacao"] { --cor-estado: var(--ouro); }
[data-estado="aguardando_recurso"] { --cor-estado: #C9D8F0; }
[data-estado="concluido"] { --cor-estado: #8AF2C4; }
[data-estado="falhou"] { --cor-estado: var(--falha); }
[data-estado="cancelado"] { --cor-estado: var(--texto-3); }
[data-estado="desconhecido"] { --cor-estado: var(--texto-3); }

/* dados desatualizados: o último estado conhecido continua legível, mas claramente esmaecido */
body.frio .rotulo-caixa-estado, body.frio .rotulo-etapa, body.frio .painel { opacity: 0.5; }

/* ---------- faixa do alto ---------- */

.topo {
  position: fixed; inset: 0 0 auto 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
  padding: calc(var(--margem) * 0.8) var(--margem) 0;
  pointer-events: none;
}
.topo > * { pointer-events: auto; }

.marca-nome {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 1.5rem; font-weight: 300; font-stretch: 100%;
  letter-spacing: 0.46em; color: var(--texto);
}
.marca-anel {
  width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, #fff 0 12%, var(--ciano-claro) 30%, var(--ciano) 62%, #06305A 100%);
  box-shadow: 0 0 0 0.14rem #2c3648, 0 0 0.9rem rgba(14, 153, 229, 0.7);
}
.marca-sub { margin-top: 0.2rem; padding-left: 1.75rem; font-size: 0.82rem; font-weight: 300; color: var(--texto-2); }

/* ---------- navegação entre páginas  ---------- */
.paginas { display: flex; gap: 1.3rem; margin-top: 0.45rem; padding-left: 1.75rem; }
.paginas a {
  font-size: 0.86rem; font-weight: 400; color: var(--texto-2); text-decoration: none;
  padding-bottom: 0.2rem; border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.paginas a:hover { color: var(--texto); }
.paginas a[aria-current="page"] { color: var(--texto); font-weight: 600; border-bottom-color: var(--ouro); }
.paginas a:focus-visible { outline: 2px solid var(--ciano-claro); outline-offset: 4px; }


.topo-direita { display: flex; align-items: flex-start; gap: 1.6rem; }

.sinal { display: flex; align-items: flex-start; gap: 0.6rem; text-align: left; }
.sinal-luz {
  width: 0.6rem; height: 0.6rem; margin-top: 0.36rem; border-radius: 50%; flex: none;
  background: var(--cor-sinal); box-shadow: 0 0 0.7rem var(--cor-sinal);
}
.sinal-textos { display: flex; flex-direction: column; }
.sinal-texto { font-size: 1rem; font-weight: 600; color: var(--texto); }
.sinal-detalhe { font-size: 0.8rem; font-weight: 300; color: var(--texto-2); min-height: 1em; }
.sinal[data-tom="neutro"] { --cor-sinal: #7C8CA6; }
.sinal[data-tom="vivo"] { --cor-sinal: var(--ciano-claro); }
.sinal[data-tom="demo"] { --cor-sinal: var(--ouro); }
.sinal[data-tom="alerta"] { --cor-sinal: var(--ouro); }
.sinal[data-tom="alerta"] .sinal-texto { color: var(--ouro-claro); }
.sinal[data-tom="vivo"] .sinal-luz { animation: respirar 2.6s ease-in-out infinite; }
.sinal[data-tom="alerta"] .sinal-luz { animation: piscar 1.2s steps(2, jump-none) infinite; }
@keyframes respirar { 50% { opacity: 0.45; } }
@keyframes piscar { 50% { opacity: 0.25; } }

.relogio {
  font-size: 1.5rem; font-weight: 300; font-stretch: 100%;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--texto);
  line-height: 1.15;
}

.controles { display: flex; gap: 0.6rem; transition: opacity 0.4s ease; }
body.parado .controles:not(:focus-within) { opacity: 0; }
body.parado { cursor: none; }

.botao {
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--texto);
  padding: 0.5rem 0.95rem; border-radius: 2px;
  background: rgba(11, 16, 32, 0.55); border: 1px solid var(--fio);
  cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease;
}
.botao:hover { border-color: var(--ciano-claro); background: rgba(14, 153, 229, 0.16); }
.botao:focus-visible { outline: 2px solid var(--ciano-claro); outline-offset: 3px; }
.botao[aria-pressed="true"] { border-color: var(--ouro); color: var(--ouro-claro); }
.botao-cheio { background: var(--ciano); border-color: var(--ciano); color: #04101f; }
.botao-cheio:hover { background: var(--ciano-claro); border-color: var(--ciano-claro); }

/* ---------- listas nos cantos de baixo ---------- */

.painel { width: 24rem; max-width: 32vw; }
.painel h2 {
  font-size: 0.82rem; font-weight: 400; color: var(--texto-3);
  padding-bottom: 0.4rem; margin-bottom: 0.55rem; border-bottom: 1px solid var(--fio);
}
.painel-esquerda { position: fixed; left: var(--margem); bottom: var(--margem); }
.coluna-direita {
  position: fixed; right: var(--margem); bottom: var(--margem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.painel-nota { margin-top: 0.7rem; font-size: 0.76rem; font-weight: 300; color: var(--texto-3); }

.lista { display: flex; flex-direction: column; gap: 0.55rem; }
.item { position: relative; padding-left: 0.9rem; }
.item::before {
  content: ""; position: absolute; left: 0; top: 0.15rem; bottom: 0.15rem; width: 2px;
  background: var(--cor-orbe, var(--ciano)); box-shadow: 0 0 0.6rem var(--cor-orbe, var(--ciano));
}
.item-titulo {
  font-size: 1rem; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-linha { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; color: var(--texto-2); min-width: 0; }
.item-quem { display: inline-flex; align-items: baseline; gap: 0.4rem; flex: none; }
.item-nome { font-weight: 600; color: var(--texto); }
.item-papel { font-weight: 300; color: var(--texto-3); }
.item-estado { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--cor-estado, var(--texto-2)); flex: none; }
.item-etapa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 300; min-width: 0; }
.item-etapa-forte { font-size: 0.92rem; font-weight: 400; color: var(--texto); flex: 1 1 auto; }
.item-idade { margin-left: auto; padding-left: 0.4rem; flex: none; font-weight: 300; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.item[data-formato="entrega"] .item-quem { font-size: 0.78rem; }
.item[data-formato="entrega"] .item-idade { margin-left: 0; }
.lista-mais { font-size: 0.78rem; font-weight: 300; color: var(--texto-3); padding-left: 0.9rem; }

/* ---------- cartões pedidos por comando ---------- */

.cartoes {
  position: fixed; left: 50%; bottom: var(--margem); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.8rem; align-items: center;
  width: min(22rem, 32vw); pointer-events: none;
}
.cartao {
  width: 100%; padding: 1.1rem 1.3rem 1.2rem; position: relative; overflow: hidden;
  background: rgba(8, 15, 34, 0.82);
  border: 1px solid rgba(122, 216, 255, 0.28); border-radius: 3px;
  box-shadow: 0 1.2rem 3rem rgba(2, 5, 14, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: cartao-entra 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.cartao-quem { font-size: 0.8rem; font-weight: 300; color: var(--texto-2); margin-bottom: 0.25rem; }
.cartao-titulo { font-size: 1.32rem; font-weight: 600; color: var(--texto); line-height: 1.2; overflow-wrap: anywhere; }
.cartao-linha { margin-top: 0.4rem; font-size: 1rem; color: var(--texto-2); overflow-wrap: anywhere; }
.cartao-tempo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ciano-claro); transform-origin: left center; transition: transform 1s linear;
}
@keyframes cartao-entra { from { opacity: 0; transform: translateY(0.8rem); } }

.aviso-base {
  position: fixed; left: 50%; bottom: var(--margem); transform: translateX(-50%);
  width: min(40rem, 46vw); text-align: center;
  font-size: 0.9rem; font-weight: 300; color: var(--texto-2);
  text-shadow: 0 1px 2px rgba(6, 10, 23, 0.9);
}

/* ---------- código de acesso ---------- */

.acesso {
  width: min(26rem, 90vw); padding: 2rem; color: var(--texto);
  background: rgba(8, 15, 34, 0.94); border: 1px solid rgba(122, 216, 255, 0.3); border-radius: 3px;
  box-shadow: 0 2rem 5rem rgba(2, 5, 14, 0.7);
}
.acesso::backdrop { background: rgba(4, 7, 18, 0.72); backdrop-filter: blur(6px); }
.acesso h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.6rem; }
.acesso p { font-size: 0.95rem; color: var(--texto-2); margin-bottom: 1.2rem; }
.acesso label { display: block; font-size: 0.84rem; color: var(--texto-2); margin-bottom: 0.35rem; }
.acesso input {
  width: 100%; font: inherit; font-size: 1.1rem; color: var(--texto); letter-spacing: 0.08em;
  padding: 0.7rem 0.8rem; margin-bottom: 1rem;
  background: rgba(6, 10, 23, 0.8); border: 1px solid var(--fio); border-radius: 2px;
}
.acesso input:focus-visible { outline: 2px solid var(--ciano-claro); outline-offset: 2px; }
.acesso .acesso-erro { color: var(--falha); margin: -0.4rem 0 1rem; }
.acesso .botao { width: 100%; font-size: 1rem; padding: 0.75rem; }

.sem-script { position: fixed; inset: auto 0 2rem 0; text-align: center; color: var(--texto); }

/* ---------- telas pequenas e movimento reduzido ---------- */

@media (max-width: 900px) {
  .painel { max-width: 44vw; }
  .rotulo-papel { display: none; }
  .marca-sub { display: none; }
  .cartoes { width: 88vw; }
  .aviso-base { width: 88vw; }
}
@media (max-width: 640px) {
  .painel-esquerda, .coluna-direita { display: none; }
  .relogio, #botao-tela-cheia { display: none; }
  .topo { gap: 0.8rem; }
  .topo-direita { gap: 0.8rem; flex-wrap: wrap; justify-content: flex-end; }
  .botao { padding: 0.45rem 0.7rem; }
  .rotulo { width: 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sinal-luz { animation: none !important; }
  .cartao { animation: none; }
  .cartao-tempo { transition: none; }
  .rotulo { transition: none; }
}

/* ---------- ajustes da revisão de UX (13/11) ---------- */

/* piso de leitura: num notebook a letra-base encolhe, mas estado e etapa nunca descem de 12 px */
.rotulo-papel, .rotulo-estado, .rotulo-etapa { font-size: max(0.8rem, 12px); }
.rotulo-papel, .rotulo-etapa { font-weight: 400; }
.rotulo[data-tipo="nucleus"] .rotulo-papel { font-size: max(0.88rem, 12px); }
.rotulo[data-tipo="moon"] .rotulo-nome, .rotulo[data-tipo="moon"] .rotulo-etapa { font-size: max(0.8rem, 11.5px); }
.rotulo[data-tipo="moon"] .rotulo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rotulo[data-tipo="moon"] { grid-template-columns: auto minmax(0, 1fr); }
.rotulo[data-tipo="moon"][data-lado="esq"] { grid-template-columns: minmax(0, 1fr) auto; }
.rotulo[data-tipo="moon"][data-lado="esq"] .rotulo-caixa-estado { grid-area: 1 / 2; }
.rotulo[data-tipo="moon"][data-lado="esq"] .rotulo-nome { grid-area: 1 / 1; }
/* com tarefa em andamento, sob o orbe ficam nome, estado e etapa; o papel cede o lugar */
.rotulo[data-ativo]:not([data-tipo="moon"]) .rotulo-papel { display: none; }

.sinal-detalhe, .cartao-quem, .item-linha, .painel h2, .painel-nota, .lista-mais,
.item[data-formato="entrega"] .item-quem { font-size: max(0.8rem, 11px); }
.sinal-detalhe, .cartao-quem, .item-papel, .item-etapa, .item-idade, .painel-nota, .lista-mais { font-weight: 400; }
.aviso-base { font-size: 1.05rem; font-weight: 400; color: var(--texto); }

/* nomes e títulos longos encolhem com reticências em vez de empurrar o resto para fora do painel */
.item-quem { flex: 0 1 auto; min-width: 0; }
.item-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-papel { min-width: 0; flex: 0 9999 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-etapa { flex: 1 1 0; }
.item[data-formato="entrega"] .item-papel { display: none; }
.item[data-formato="entrega"] .item-etapa-forte { flex: 1 1 60%; }
/* em "precisa de atenção" a barra tem a cor do estado: falha não pode ter a cor de entrega */
.item[data-formato="atencao"]::before { background: var(--cor-estado); box-shadow: 0 0 0.6rem var(--cor-estado); }

/* dados desatualizados: esmaecido, mas dentro do contraste mínimo; a idade é o dado que mais importa aqui */
body.frio .rotulo-caixa-estado, body.frio .rotulo-etapa, body.frio .painel { opacity: 0.7; }
body.frio .item-idade { color: var(--texto); font-weight: 600; }
body.frio .painel h2, body.frio .item-papel { color: var(--texto-2); }

/* cartão e aviso nunca disputam o mesmo lugar */
.cartoes:not(:empty) + .aviso-base { bottom: auto; top: calc(var(--margem) * 0.8); width: min(30rem, 34vw); }
.cartoes-mais { font-size: max(0.8rem, 11px); color: var(--texto-2); text-shadow: 0 1px 2px rgba(6, 10, 23, 0.9); }
.cartao { max-height: 32vh; }
.acesso input { border-color: rgba(122, 216, 255, 0.5); }
.botao:disabled { opacity: 0.6; cursor: default; }

/* ---------- ajustes do teste de aceite (13/11) ---------- */

/* nas listas o nome de quem executa nunca é cortado; quem cede espaço é a etapa */
.item-quem { flex: none; }
.item-nome { overflow: visible; text-overflow: clip; }
.item-papel { flex: none; overflow: visible; text-overflow: clip; }
.item-etapa { flex: 1 1 0; min-width: 0; }
.item-motivo {
  font-size: max(0.8rem, 11px); color: var(--texto-2); margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item[data-formato="entrega"] .item-etapa-forte { flex: 1 1 auto; }
.item[data-formato="entrega"] .item-idade { margin-left: auto; }
.item[data-formato="entrega"] .item-quem { font-size: max(0.8rem, 11px); color: var(--texto-2); }
.item[data-formato="entrega"] .item-papel { display: inline; }

/* etapa da lua em até duas linhas, em vez de cortar na borda */
.rotulo[data-tipo="moon"] .rotulo-etapa {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2;
}

/* cartão: estreito o bastante para caber entre os orbes de baixo, com texto limitado em linhas */
.cartao-titulo, .cartao-linha { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-titulo { -webkit-line-clamp: 2; font-size: 1.2rem; }
.cartao-linha { -webkit-line-clamp: 2; }
.cartao { padding: 0.9rem 1.1rem 1rem; max-height: none; }
.rotulo[data-coberto] { opacity: 0 !important; }

/* piso de leitura também para botões e navegação */
.botao { font-size: max(0.84rem, 11.5px); }
.paginas a { font-size: max(0.86rem, 11.5px); }

@media (max-width: 900px) {
  /* em tela estreita o aviso de fonte não sobe para cima da navegação; o sinal no alto já diz a fonte */
  .cartoes:not(:empty) + .aviso-base { display: none; }
}
@media (max-width: 640px) {
  /* no celular some o que não cabe, mas "precisa de atenção" continua: é a informação que não pode faltar */
  .rotulo[data-tipo="moon"] { display: none; }
  .coluna-direita { display: flex; left: var(--margem); right: var(--margem); bottom: calc(var(--margem) + 3.4rem); }
  .coluna-direita .painel { width: auto; max-width: none; }
  #painel-entregas { display: none; }
}

/* o texto de cada rótulo ocupa só a própria largura (necessário para medir colisão com precisão) */
.rotulo:not([data-tipo="moon"]) > * { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.rotulo:not([data-tipo="moon"]) > .rotulo-estado, .rotulo:not([data-tipo="moon"]) .rotulo-caixa-estado { display: flex; justify-content: center; }

/* cartão sob o núcleo: fundo mais fechado para cobrir o disco e o nome do núcleo com limpeza */
.cartao { background: rgba(7, 13, 30, 0.93); }
.cartao-linha { -webkit-line-clamp: 3; }

/* o estado sob o orbe nunca quebra em duas linhas, mesmo com a letra no piso */
.rotulo:not([data-tipo="moon"]) { min-width: 216px; }
.rotulo-estado { white-space: nowrap; }
/* nome do núcleo: o espaçamento entre letras sobra à direita; compensa à esquerda para ficar no eixo */
.rotulo[data-tipo="nucleus"] .rotulo-nome { margin-right: auto; padding-left: 0.14em; }