/* ============================================================
   Dispositivos - o cartao de aparelho
   ============================================================
   O cartao e pequeno de proposito. Ele nao conta a historia do
   aparelho: responde "este aqui precisa de mim agora?" e cabe
   junto com os outros na mesma tela, que e o que permite marcar
   varios e tocar o lote de uma vez. A historia inteira - tela ao
   vivo, contas, acoes, ocorrencias - fica no modal.

   Dentro do cartao a hierarquia e feita por divisoria e degrau
   de cinza, nunca por caixa dentro de caixa. Nem a execucao em
   curso ganha moldura: ela e uma linha com um ponto que pulsa.
   ============================================================ */

#page-dispositivos { max-width:1400px; }
.dispositivo-eyebrow { color:var(--tinta-apagada); font:500 11px var(--mono); letter-spacing:.15em; margin:0 0 8px; }
#page-dispositivos .cabeca h2 { font-size:32px; letter-spacing:-.8px; }
.dispositivos-cabeca-acoes { display:flex; gap:10px; align-items:flex-start; }

.dispositivos-resumo { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:26px 0 18px; }
.dispositivos-resumo > div { background:var(--placa); border:1px solid var(--linha); border-radius:var(--raio-g); padding:14px 16px; }
.dispositivos-resumo span { display:block; font-size:11.5px; color:var(--tinta-apagada); }
.dispositivos-resumo strong { display:block; font:500 26px var(--mono); color:var(--tinta-forte); line-height:1.5; letter-spacing:-.02em; }

/* ---------------- faixa de operacao ----------------
   Os tres botoes tinham o MESMO peso e moravam em faixas diferentes: o que
   gasta SMS parecia igual ao que so atualiza a lista, e comecar/parar - que
   sao um par - ficavam longe um do outro. Aqui a hierarquia faz o trabalho:
   um primario cheio, o seu contrario em fantasma ao lado, e o utilitario
   empurrado pro fim. Observar a frota (telas, atualizar) subiu pro cabecalho,
   discreto: nao e operacao, e olhar. */
.dispositivos-acoes { display:flex; align-items:center; gap:10px; margin-top:4px; }

.acao-principal { display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:var(--raio-g);
  background:var(--tinta); border-color:var(--tinta); color:var(--acento-tinta); font-weight:600; font-size:13.5px; }
.acao-principal svg { width:15px; height:15px; flex:none; }
.acao-principal:hover:not(:disabled) { background:var(--tinta-forte); border-color:var(--tinta-forte); }
.acao-principal:disabled { background:none; border-color:var(--linha-forte); color:var(--tinta-sumida); opacity:1; }
/* A contagem vive DENTRO do botao: "quantos vao girar" e a informacao que
   decide o clique, e separada dele vira mais um numero solto na tela. */
.acao-contagem { font:500 11.5px var(--mono); padding:2px 7px; border-radius:99px;
  background:var(--acento-tinta); color:var(--tinta); opacity:.72; }
.acao-principal:disabled .acao-contagem { display:none; }

.acao-parar { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:var(--raio-g); font-size:13px; }
.acao-parar svg { width:13px; height:13px; flex:none; }
.acao-parar:not(:disabled) { color:var(--atencao); border-color:var(--atencao-borda); }

.dispositivos-dica { margin:10px 0 0; font-size:12.5px; color:var(--tinta-apagada); }

/* Cabecalho: observar, nao operar. Icone a frente, sem preenchimento. */
.acao-discreta { display:inline-flex; align-items:center; gap:7px; padding:9px 13px; font-size:12.5px;
  color:var(--tinta-suave); background:none; }
.acao-discreta svg { width:14px; height:14px; flex:none; color:var(--tinta-apagada); }
.acao-discreta:hover:not(:disabled) { color:var(--tinta-forte); }
.acao-discreta:hover:not(:disabled) svg { color:var(--tinta-suave); }
.dispositivos-incidentes-contador b { color:var(--atencao); font-weight:600; }
#dispositivos-mensagem:empty { display:none; }
#dispositivos-mensagem { border-left:3px solid var(--linha-forte); padding:11px 15px; background:var(--placa); border-radius:0 var(--raio) var(--raio) 0; color:var(--tinta-suave); font-size:13px; }

/* A barra de selecao so existe quando ha selecao: sem aparelho marcado ela
   seria mais uma fileira de botoes desativados competindo com os cartoes. */
.dispositivos-selecao { display:flex; align-items:center; gap:12px; margin:14px 0 0; padding:11px 16px; border:1px solid var(--linha-forte); border-radius:var(--raio-g); background:var(--placa-alta); }
.dispositivos-selecao b { font-family:var(--mono); color:var(--tinta-forte); }
#dispositivos-selecao-conta { font-size:13px; color:var(--tinta-suave); }
.dispositivos-selecao button { font-size:12.5px; padding:8px 13px; }
#dispositivos-iniciar { margin-left:auto; background:var(--tinta); border-color:var(--tinta); color:var(--acento-tinta); font-weight:600; }
#dispositivos-iniciar:hover:not(:disabled) { background:var(--tinta-forte); border-color:var(--tinta-forte); }
#dispositivos-iniciar:disabled { background:none; border-color:var(--linha-forte); color:var(--tinta-sumida); opacity:1; }

.dispositivos-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(336px,1fr)); gap:14px; margin:16px 0 28px; align-items:start; }

/* ---------------- o cartao ---------------- */

.aparelho { min-width:0; background:var(--placa); border:1px solid var(--linha); border-radius:var(--raio-g); overflow:hidden; }
.aparelho.marcado { border-color:var(--tinta-sumida); box-shadow:inset 0 0 0 1px var(--tinta-sumida); }

.aparelho-topo { display:flex; align-items:center; gap:10px; padding:13px 14px 12px; }
.aparelho-marca { display:grid; place-items:center; flex:none; }
.aparelho-marca input { width:15px; height:15px; }
.aparelho-marca:has(input:disabled) { opacity:.35; }
.aparelho-icone { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--placa-alta); color:var(--tinta-fraca); }
.aparelho-icone svg { width:17px; height:17px; }
.aparelho-nome { min-width:0; flex:1; }
.aparelho-nome h3 { margin:0; font-size:15px; font-weight:600; letter-spacing:-.1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aparelho-serial { display:flex; align-items:center; gap:4px; margin:1px 0 0; min-width:0; }
.aparelho-serial code { font:400 11.5px var(--mono); color:var(--tinta-id); overflow:hidden; text-overflow:ellipsis; }
.aparelho-copiar { display:grid; place-items:center; flex:none; width:20px; height:20px; padding:0; border:0; border-radius:5px; background:none; color:var(--tinta-sumida); }
.aparelho-copiar svg { width:12px; height:12px; }
.aparelho-copiar:hover:not(:disabled) { background:var(--placa-alta); border-color:transparent; color:var(--tinta-fraca); }
.aparelho-copiar.copiado { color:var(--viva-clara); }

.sinal { display:inline-flex; align-items:center; gap:5px; flex:none; font-size:11px; color:var(--tinta-fraca); white-space:nowrap; }
.sinal i { width:6px; height:6px; border-radius:50%; border:1px solid currentColor; }
.sinal-ok { color:var(--viva); }
.sinal-ok i { background:currentColor; }
.sinal-atencao { color:var(--atencao); }
.sinal-atencao i { background:currentColor; }
.sinal-apagado { color:var(--tinta-sumida); }

.aparelho-menu { position:relative; flex:none; }
.aparelho-kebab { display:grid; place-items:center; width:26px; height:26px; padding:0; border-color:transparent; background:none; color:var(--tinta-sumida); }
.aparelho-kebab svg { width:15px; height:15px; }
.aparelho-kebab:hover:not(:disabled) { background:var(--placa-alta); border-color:transparent; color:var(--tinta); }
.aparelho-popover { position:absolute; right:0; top:calc(100% + 6px); z-index:4; display:grid; gap:2px; min-width:188px; padding:6px; border:1px solid var(--linha-forte); border-radius:11px; background:var(--placa-topo); box-shadow:0 18px 44px rgba(0,0,0,.52); }
.aparelho-popover button { justify-content:flex-start; width:100%; padding:8px 10px; border-color:transparent; border-radius:var(--raio); background:none; color:var(--tinta-suave); font-size:12.5px; text-align:left; }
.aparelho-popover button:hover:not(:disabled) { background:var(--placa-alta); border-color:transparent; color:var(--tinta); }

/* ---------------- faixa de estado e numeros ---------------- */

/* Estado e ciclo orientam a leitura; os totais ganham colunas fixas abaixo. */
.aparelho-faixa { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 0; border-top:1px solid var(--linha-fina); }
.aparelho-estado { display:flex; max-width:100%; align-items:center; gap:7px; margin:0; min-width:0; font-size:13px; font-weight:600; color:var(--tinta-forte); }
.aparelho-estado > span { overflow:hidden; text-overflow:ellipsis; }
.aparelho-estado i { display:grid; place-items:center; flex:none; color:var(--tinta-sumida); }
.aparelho-estado i svg { width:14px; height:14px; }
.aparelho-estado.bom i { color:var(--viva); }
.aparelho-estado.ruim i { color:var(--parada); }

.aparelho-numeros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:18px 0; color:var(--tinta-fraca); }
.aparelho-numeros > div { display:flex; flex-direction:column; align-items:center; gap:5px; }
.aparelho-numeros > div + div { border-left:1px solid var(--linha-fina); }
.aparelho-numeros dt { order:1; font-size:11.5px; }
.aparelho-numeros dd { margin:0; font:500 22px var(--mono); line-height:1.2; color:var(--tinta-forte); }
.aparelho-numeros dd.ruim { color:var(--parada); }
.aparelho-ciclo { flex:none; font:400 11px var(--mono); color:var(--tinta-apagada); }

/* ---------------- execucao em curso ---------------- */

.aparelho-execucao { display:flex; align-items:center; gap:8px; margin:0; padding:8px 14px; border-top:1px solid var(--linha-fina); background:var(--placa-etapa); font-size:12px; color:var(--tinta-suave); }
.aparelho-execucao > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aparelho-execucao b { margin-left:auto; flex:none; font:400 11.5px var(--mono); color:var(--tinta-apagada); }
/* O ponto que pulsa e o unico sinal de "agora" no cartao. Uma caixa com
   fundo proprio dizia a mesma coisa ocupando quatro vezes mais espaco. */
.pulso { flex:none; width:7px; height:7px; border-radius:50%; background:var(--viva); }
@media (prefers-reduced-motion: no-preference) {
  .pulso { animation:pulsa 1.6s ease-in-out infinite; }
  @keyframes pulsa { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.78); } }
}

/* ---------------- lista de contas ---------------- */

.aparelho-contas { list-style:none; margin:0; padding:0; }
.aparelho-contas-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 18px; border:0; border-top:1px solid var(--linha-fina); border-radius:0; background:none; color:var(--tinta-fraca); }
.aparelho-contas-toggle:hover:not(:disabled) { background:var(--placa-alta); border-color:var(--linha-fina); color:var(--tinta-forte); }
.aparelho-contas-toggle:focus-visible { outline:2px solid var(--acento); outline-offset:-3px; }
.aparelho-avatares { display:flex; align-items:center; gap:6px; }
.aparelho-contas-extra { display:grid; place-items:center; min-width:30px; height:30px; padding:0 5px; border-radius:50%; background:var(--placa-alta); color:var(--tinta-suave); font:500 11px var(--mono); }
.aparelho-contas-toggle > i { display:grid; place-items:center; }
.aparelho-contas-toggle > i svg { width:15px; height:15px; }
.aparelho-contas-toggle > i.virada { transform:rotate(180deg); }
.aparelho-conta { position:relative; display:flex; gap:12px; margin:0 18px; padding:15px 0; border-top:1px solid var(--linha-fina); }
.aparelho-conta:first-child { border-top:0; padding-top:4px; }
.conta-avatar { position:relative; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--av-1); box-shadow:inset 0 0 0 1px rgba(242,243,245,.07); color:var(--tinta); font-size:10.5px; font-weight:500; letter-spacing:.02em; overflow:hidden; }
/* A foto cobre as iniciais em vez de substitui-las no HTML: se o arquivo sumiu
   do disco, o onerror tira a imagem e as letras reaparecem sozinhas. */
.conta-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.conta-avatar[data-cor="1"] { background:var(--av-1); }
.conta-avatar[data-cor="2"] { background:var(--av-2); }
.conta-avatar[data-cor="3"] { background:var(--av-3); }
.conta-avatar[data-cor="4"] { background:var(--av-4); }
.conta-avatar[data-cor="5"] { background:var(--av-5); }
.conta-avatar[data-cor="6"] { background:var(--av-6); }
.conta-avatar[data-cor="7"] { background:var(--av-7); }
.conta-avatar[data-cor="8"] { background:var(--av-8); }
/* A conta em execucao ganha um anel verde: o sinal de "agora" e sempre a
   mesma cor, no cartao e na linha. */
.aparelho-conta.agora .conta-avatar { box-shadow:0 0 0 2px var(--placa), 0 0 0 3px var(--viva); }

.conta-corpo { min-width:0; flex:1; }
.conta-cabeca { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.conta-cabeca h4 { min-width:0; margin:0; font-size:13px; font-weight:500; }
/* O @ e um botao, nao um link: ele nao navega nesta janela, abre o perfil no
   navegador do sistema. Desenhado como texto pra nao virar mais um controle
   competindo com as acoes do cartao. */
.conta-perfil { display:block; max-width:100%; padding:0; border:0; border-radius:3px; background:none; color:var(--tinta-suave); font:inherit; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.conta-perfil:hover:not(:disabled) { border-color:transparent; background:none; color:var(--tinta-forte); text-decoration:underline; text-underline-offset:2px; }
.conta-perfil:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
.conta-progresso { display:flex; align-items:center; gap:10px; margin:9px 0; }
.conta-reels { flex:none; margin:0; font-size:11px; color:var(--tinta-fraca); }
.conta-reels b { font:500 11px var(--mono); color:var(--tinta-suave); }

/* Selos: o rotulo e a coisa, a cor e o estado. Sem fundo e sem borda - seis
   pilulas por conta transformavam a lista num mosaico. */
.conta-selos { display:flex; flex-wrap:wrap; gap:3px 11px; list-style:none; margin:4px 0 0; padding:0; }
.conta-selo { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tinta-fraca); white-space:nowrap; cursor:default; }
.conta-selo i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.selo-ok i { background:var(--viva); }
.selo-pendente { color:var(--tinta-sumida); }
.selo-pendente i { background:none; border:1px solid currentColor; }
.selo-ruim { color:var(--parada); }
.conta-selos > .selo-ruim:first-child { flex-basis:100%; margin-bottom:3px; }

/* A trilha curta pertence a conta; nenhuma barra atravessa as divisorias. */
.conta-trilha { flex:1; max-width:140px; height:4px; border-radius:4px; background:var(--linha); overflow:hidden; }
.conta-trilha i { display:block; height:100%; border-radius:inherit; background:var(--viva); }
.conta-aviso { margin-top:10px; }
.conta-aviso summary { width:fit-content; font-size:11.5px; color:var(--parada); cursor:pointer; }
.conta-aviso summary:focus-visible { outline:2px solid var(--acento); outline-offset:3px; }
.conta-erro { margin:8px 0 0; padding:0 0 0 10px; border-left:2px solid var(--linha-forte); font-size:12px; line-height:1.6; overflow-wrap:anywhere; color:var(--tinta-suave); }

/* ---------------- acoes ---------------- */

.aparelho-acoes { display:flex; align-items:center; gap:7px; padding:11px 14px 12px; border-top:1px solid var(--linha-fina); }
.aparelho-acoes button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 13px; border-radius:9px; font-size:12.5px; font-weight:500; white-space:nowrap; }
.aparelho-acoes i { display:grid; place-items:center; }
.aparelho-acoes i svg { width:12px; height:12px; }
.aparelho-primaria { flex:1; min-width:0; }
.aparelho-primaria.tom-clara { background:var(--tinta); border-color:var(--tinta); color:var(--acento-tinta); font-weight:600; }
.aparelho-primaria.tom-clara:hover:not(:disabled) { background:var(--tinta-forte); border-color:var(--tinta-forte); }
.aparelho-primaria.tom-atencao { background:none; border-color:var(--atencao-borda); color:var(--atencao); font-weight:600; }
.aparelho-primaria.tom-atencao:hover:not(:disabled) { background:var(--atencao-veu); border-color:var(--atencao); }
/* Acao indisponivel perde a superficie clara em vez de so clarear menos: um
   bloco branco esmaecido continua sendo a coisa mais chamativa do cartao. */
.aparelho-primaria:disabled { background:none; border-color:var(--linha-forte); color:var(--tinta-sumida); opacity:1; }
.aparelho-secundaria { flex:none; background:none; border-color:var(--linha-forte); color:var(--tinta-suave); }
.aparelho-secundaria:hover:not(:disabled) { background:var(--placa-alta); border-color:var(--tinta-sumida); color:var(--tinta-forte); }
.aparelho-so-icone { padding:9px; }
.aparelho-so-icone svg { width:15px; height:15px; }

.aparelho-erro { display:flex; align-items:flex-start; gap:7px; margin:0; padding:10px 14px; border-top:1px solid var(--linha-fina); font-size:11.5px; line-height:1.45; color:var(--tinta-fraca); }
.aparelho-erro::before { content:""; flex:none; width:5px; height:5px; margin-top:6px; border-radius:50%; background:var(--parada); }

.aparelho-vazio { margin:0; padding:18px 14px; border-top:1px solid var(--linha-fina); color:var(--tinta-apagada); font-size:12.5px; }
.aparelho-vazio.grande { grid-column:1/-1; padding:44px; border:1px dashed var(--linha-forte); border-radius:var(--raio-g); text-align:center; }

/* ---------------- novo ciclo (configuracao) ---------------- */

.dispositivo-etiqueta { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:var(--raio); background:var(--placa-alta); color:var(--tinta-fraca); font-size:11px; white-space:nowrap; }
.dispositivo-incidente { padding:14px; margin:8px 0; border-left:2px solid var(--atencao); border-radius:0 var(--raio) var(--raio) 0; background:var(--placa); font-size:12px; }
.dispositivo-incidente time { color:var(--tinta-apagada); margin-left:12px; }
.dispositivo-incidente-candidatos { color:var(--tinta-apagada); font-family:var(--mono); font-size:11px; overflow-wrap:anywhere; }
.dispositivo-incidente-print { margin-top:6px; padding:4px 10px; font-size:11px; }

.dispositivo-novo { border:1px solid var(--linha); border-radius:var(--raio-g); background:var(--placa); margin-top:24px; padding:20px; }
.dispositivo-novo summary { cursor:pointer; font-weight:600; color:var(--tinta-forte); }
.dispositivo-novo summary .secundario { margin-left:16px; font-size:12px; font-weight:400; }
.dispositivos-config { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:22px 0; }
.dispositivos-config label { display:grid; gap:9px; font-size:12px; color:var(--tinta-apagada); }
.dispositivos-config button { align-self:end; }
.dispositivo-fluxo { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--tinta-apagada); margin:22px 0; }
.dispositivo-fluxo b { color:var(--tinta-fraca); }

#page-config > .placa { border-radius:var(--raio-g); margin-bottom:20px; padding:24px; }
#page-config .placa-cabeca { margin-bottom:20px; }
#page-config .grupo-config { gap:22px; }
#page-config .placa > .grupo-config { grid-template-columns:repeat(3,minmax(0,1fr)); }
#page-config .placa > details > summary { cursor:pointer; font-size:15px; font-weight:600; }
#page-config .placa > details > summary .secundario { margin-left:12px; font-size:12px; font-weight:400; }
#page-config .placa > details[open] > summary { margin-bottom:24px; }

@media(max-width:1050px) { .dispositivos-config { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:850px) { #page-config .placa > .grupo-config { grid-template-columns:1fr; } }
@media(max-width:700px) {
  .dispositivos-resumo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dispositivos-acoes { align-items:flex-start; flex-direction:column; }
  .dispositivos-lista { grid-template-columns:1fr; }
  .dispositivos-selecao { flex-wrap:wrap; }
  .dispositivos-config { grid-template-columns:1fr; }
  .dispositivo-novo summary .secundario { display:block; margin:8px 0; }
}

/* Acao destrutiva do menu: separada por uma linha e tingida, porque "Wipe
   insta manual" fica a um pixel de "Copiar serial" e desloga o aparelho. */
.aparelho-popover .aparelho-popover-risco { margin-top:4px; border-top:1px solid var(--linha); border-radius:0 0 var(--raio) var(--raio); color:var(--parada); }
.aparelho-popover .aparelho-popover-risco:hover:not(:disabled) { background:var(--parada-veu); color:var(--parada); }

/* Resumo das contas sem sessao: uma linha discreta no pe da lista. Elas nao
   pedem acao nenhuma - o que elas precisam dizer e que existem. */
.aparelho-sem-sessao { margin:0; padding:9px 14px; border-top:1px solid var(--linha-fina); color:var(--tinta-apagada); font-size:11.5px; }

/* Itens que mudam o estado do aparelho ficam no pe do menu, com icone, depois
   de uma divisoria: "Esconder" e "Wipe" nao podem ser vizinhos indistinguiveis
   de "Copiar serial". So o wipe acende vermelho - esconder se desfaz. */
.aparelho-popover .aparelho-popover-grupo { display:flex; align-items:center; gap:8px; }
.aparelho-popover .aparelho-popover-grupo i { display:grid; place-items:center; flex:none; width:15px; height:15px; }
.aparelho-popover .aparelho-popover-grupo i svg { width:15px; height:15px; }
.aparelho-popover [data-ocultar] { margin-top:4px; border-top:1px solid var(--linha); border-radius:0; }

/* Velocidade do aparelho: um grupo do menu como os outros (divisoria fina no
   topo), com a trilha no mesmo desenho das barras de progresso - linha-forte
   no fundo, tinta no trecho feito. Sem cor de acento: o painel nao tem uma. */
.aparelho-velocidade { display:grid; gap:7px; margin-top:4px; padding:10px 10px 8px; border-top:1px solid var(--linha); }
.aparelho-velocidade-topo { display:flex; align-items:baseline; justify-content:space-between; color:var(--tinta-suave); font-size:12.5px; }
.aparelho-velocidade-topo output { color:var(--tinta-forte); font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
.aparelho-velocidade input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:16px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.aparelho-velocidade input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:999px;
  background:linear-gradient(to right, var(--tinta-suave) 0 var(--pct, 44%), var(--linha-forte) var(--pct, 44%) 100%); }
.aparelho-velocidade input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:var(--tinta-forte); border:2px solid var(--placa-topo); box-shadow:0 0 0 1px var(--linha-forte); transition:transform .12s ease; }
.aparelho-velocidade input[type="range"]:hover::-webkit-slider-thumb,
.aparelho-velocidade input[type="range"]:active::-webkit-slider-thumb { transform:scale(1.15); }
.aparelho-velocidade input[type="range"]:focus-visible { outline:none; }
.aparelho-velocidade input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px var(--linha-forte), 0 0 0 1px var(--tinta); }
.aparelho-velocidade-pontas { display:flex; justify-content:space-between; color:var(--tinta-apagada); font-size:11px; }
.aparelho-velocidade-nota { padding-top:6px; border-top:1px solid var(--linha-fina); color:var(--tinta-apagada); font-size:11px; font-variant-numeric:tabular-nums; }
.aparelho-popover:has(.aparelho-velocidade) { min-width:216px; }

/* Cartao oculto so aparece com "Mostrar ocultos" ligado: apagado e tracejado,
   pra nao ser confundido com um aparelho em operacao. */
.aparelho.oculto { opacity:.52; border-style:dashed; }
.aparelho.oculto:hover { opacity:1; }

.dispositivos-ocultos { margin-left:auto; font-size:12.5px; padding:8px 13px; color:var(--tinta-apagada); }
.dispositivos-ocultos[aria-pressed=true] { color:var(--tinta); border-color:var(--linha-forte); }

/* O "+N" do contador: contas de ciclos anteriores, que existem mas nao estao
   na lista. Discreto de proposito - o numero que importa e o do ciclo. */
.aparelho-numero-extra { margin-left:3px; font:500 12px var(--mono); color:var(--tinta-sumida); }