/* =============================================================================
   efg.app.br — FOLHA ÚNICA. Consome tokens.css; não define cor, fonte nem duração.
   Ver /DESIGN.md. App novo usa estas classes; se faltar componente, ele entra
   AQUI — nunca num <style> dentro de template. (Foi o que gerou 5 paletas
   divergentes e um design system desligado.)
   ============================================================================= */

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

body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);
     font-size:var(--text-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--ls-tight);margin:0;
         font-weight:var(--fw-display);line-height:var(--lh-tight)}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-md);margin:var(--space-8) 0 var(--space-3)}
h3{font-size:var(--text-lg)}
p{margin:0 0 var(--space-3)}
a{color:var(--accent);text-decoration:none}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-6) 0}

.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
           font-feature-settings:var(--nums-tabular)}
.sub{color:var(--ink-2);margin:0 0 var(--space-5);font-size:var(--text-sm)}
.mut{color:var(--muted)} .ink2{color:var(--ink-2)}
.bom{color:var(--success)} .ruim{color:var(--danger)}
.aten{color:var(--warning)} .ac{color:var(--accent)}
.cresce{flex:1}

/* --- ENTRADA: uma vez, ao carregar --------------------------------------- */
@keyframes surgir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sobe{animation:surgir var(--dur-3) var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.10s}.d3{animation-delay:.15s}
.d4{animation-delay:.20s}.d5{animation-delay:.25s}.d6{animation-delay:.30s}

/* =============================================================================
   RESPOSTA AO CLIQUE — ondulação a partir do ponto tocado
   -----------------------------------------------------------------------------
   Nasce EXATAMENTE onde o dedo/cursor tocou (o JS grava --x/--y), e não no meio
   do botão. É o que separa "a tela reagiu ao meu clique" de "a tela piscou":
   a origem confirma que o navegador registrou o toque naquele ponto, o que é a
   dúvida real de quem clica e não vê nada acontecer.

   `pointer-events:none` para a ondulação nunca engolir o clique seguinte.
   ============================================================================= */
.onda{position:absolute;border-radius:var(--radius-full);pointer-events:none;
      transform:translate(-50%,-50%) scale(0);background:var(--onda);
      left:var(--x);top:var(--y);width:var(--d);height:var(--d);
      animation:ondular var(--dur-onda) var(--ease) forwards}
@keyframes ondular{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* Sobre preenchimento escuro (botão primário) a ondulação precisa ser clara. */
.btn.forte .onda,.modal .btn.forte .onda{background:var(--onda-forte)}
/* Quem hospeda ondulação precisa recortar e posicionar. */
.btn,.modo,.app,.kpi{position:relative;overflow:hidden}

/* =============================================================================
   RESPOSTA AO PONTEIRO — clarão que segue o cursor
   -----------------------------------------------------------------------------
   Um brilho muito discreto (5,5%) centrado na posição do mouse dentro do cartão.
   Some quando o ponteiro sai. Serve de orientação periférica quando há seis
   cartões iguais lado a lado: o olho sabe onde está sem ler nada.
   ============================================================================= */
.kpi::after,.app::after,.anel-cx::after{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease);
  background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),
                             var(--facho),transparent 62%)}
.kpi:hover::after,.app:hover::after,.anel-cx:hover::after{opacity:1}
.anel-cx{position:relative;overflow:hidden}

/* =============================================================================
   CASCA — topbar, main
   ============================================================================= */
.topo{background:var(--surface);border-bottom:1px solid var(--border);
      position:sticky;top:0;z-index:var(--z-sticky)}
.topo .dentro{max-width:var(--conteudo-max);margin:0 auto;
              padding:var(--space-3) var(--conteudo-pad);display:flex;align-items:center;
              gap:var(--space-3);flex-wrap:wrap;min-height:var(--topbar-h)}
.marca{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);
       font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);color:var(--ink);
       font-size:var(--text-md)}
.marca .mk{width:var(--marca-tam);height:var(--marca-tam);border-radius:var(--radius);
           background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
           font-family:var(--font-display);font-weight:700;font-size:14px;flex:none;
           transition:transform var(--dur-2) var(--ease)}
.marca:hover .mk{transform:scale(1.06)}
.trilha{color:var(--muted);font-size:var(--text-sm)}
.trilha a{position:relative;color:var(--accent)}
.trilha a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
                 background:currentColor;transform:scaleX(0);transform-origin:left;
                 transition:transform var(--dur-2) var(--ease)}
.trilha a:hover::after{transform:scaleX(1)}
.quem{margin-left:auto;text-align:right;line-height:1.25;font-size:var(--text-sm);
      color:var(--ink-2)}
.quem b{display:block;color:var(--ink);font-weight:var(--fw-semibold)}
.papel{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
       letter-spacing:var(--ls-wide);color:var(--muted)}
main{max-width:var(--conteudo-max);margin:0 auto;
     padding:var(--space-7) var(--conteudo-pad) var(--space-16)}

/* =============================================================================
   BOTÕES — sem brilho; peso, sombra e um passo de 1px ao pressionar
   ============================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
     font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);
     padding:var(--btn-pad);min-height:var(--btn-h);border-radius:var(--radius);
     cursor:pointer;border:1px solid var(--contorno);background:var(--surface);
     color:var(--ink);text-decoration:none;
     transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
                color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease)}
.btn:hover{background:var(--surface-2);border-color:var(--ink-2);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.btn.forte{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
           box-shadow:var(--sombra-1)}
.btn.forte:hover{background:var(--accent-hover);border-color:var(--accent-hover);
                 color:var(--accent-ink);box-shadow:var(--sombra-2)}
/* Destrutivo NUNCA é vermelho em repouso: "Fechar folha" é irreversível. */
.btn.grave:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-weak)}
.btn.mini{min-height:auto;padding:5px 10px;font-size:var(--text-xs)}
.btn[disabled],.btn.desligado{opacity:.5;cursor:not-allowed;pointer-events:none}
.acoes{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-5)}

/* =============================================================================
   CARTÕES E INDICADORES
   ============================================================================= */
.cartao{background:var(--surface);border:1px solid var(--border);
        border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--sombra-1)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--kpi-min),1fr));
       gap:var(--space-3);margin:var(--space-5) 0}

.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
     padding:var(--space-4);box-shadow:var(--sombra-1);position:relative;overflow:hidden;
     transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--border-strong)}
.kpi .v{font-family:var(--font-mono);font-size:var(--text-2xl);display:block;
        font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight);
        line-height:1.15;color:var(--dc,var(--ink))}
.kpi .r{font-size:var(--text-sm);color:var(--ink-2);margin-top:3px}
.kpi .n{display:block;font-size:9px;letter-spacing:var(--ls-wide);text-transform:uppercase;
        color:var(--muted);margin-top:3px;font-family:var(--font-mono)}
.kpi.bom{--dc:var(--success)} .kpi.ruim{--dc:var(--danger)} .kpi.aten{--dc:var(--warning)}

/* --- sparkline: cinza em repouso, cor sob o cursor ----------------------- */
.faisca{display:block;width:100%;height:var(--faisca-h);margin-top:var(--space-2);
        overflow:visible}
.faisca .ln{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;
            stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;
            animation:tracar var(--dur-5) var(--ease) .25s forwards;
            transition:stroke var(--dur-2) var(--ease)}
.faisca circle{fill:var(--muted);opacity:0;animation:aparecer .4s ease .95s forwards;
               transition:fill var(--dur-2) var(--ease)}
.kpi:hover .faisca .ln{stroke:var(--dc,var(--accent))}
.kpi:hover .faisca circle{fill:var(--dc,var(--accent))}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}

/* --- medidor -------------------------------------------------------------- */
.medidor{height:var(--medidor-h);border-radius:var(--radius-full);background:var(--surface-3);
         overflow:hidden;margin-top:var(--space-3)}
.medidor>i{display:block;height:100%;border-radius:var(--radius-full);width:0;
           background:var(--dc,var(--accent));
           animation:encher var(--dur-5) var(--ease) .3s forwards}
@keyframes encher{to{width:var(--v,0%)}}

/* --- anel de conferência -------------------------------------------------- */
.anel{width:var(--anel-tam);height:var(--anel-tam);flex:none}
.anel circle{fill:none;stroke-width:var(--anel-traco)}
.anel .base{stroke:var(--surface-3)}
.anel .val{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:170;
           stroke-dashoffset:170;transform:rotate(-90deg);transform-origin:50% 50%;
           animation:anelar var(--dur-6) var(--ease) .35s forwards}
@keyframes anelar{to{stroke-dashoffset:var(--off,170)}}
.anel-txt{font-family:var(--font-mono);font-size:13px;fill:var(--ink-2);
          text-anchor:middle;dominant-baseline:central}
.anel-cx{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);
         border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);
         box-shadow:var(--sombra-1);
         transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.anel-cx:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.anel-cx .gr{font-family:var(--font-mono);font-size:var(--text-lg);display:block;
             font-variant-numeric:tabular-nums;color:var(--ink)}
.anel-cx .r{font-size:var(--text-xs);color:var(--muted);line-height:1.35;display:block}

/* =============================================================================
   TABELA
   ============================================================================= */
.quadro{background:var(--surface);border:1px solid var(--border);
        border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra-1)}
.quadro .qhead{display:flex;align-items:center;gap:var(--space-3);
               padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.quadro .qhead .ct{color:var(--muted);font-size:var(--text-sm)}
.rolar{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
thead th{text-align:left;padding:9px 12px;font-family:var(--font-mono);font-size:9px;
         letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);
         font-weight:var(--fw-medium);border-bottom:1px solid var(--border);
         background:var(--surface-2);white-space:nowrap}
tbody td{padding:var(--celula-pad);border-bottom:1px solid var(--border);
         transition:background var(--dur-1) var(--ease)}
tbody tr:hover td{background:var(--surface-2)}
td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
       white-space:nowrap}
td.ruim{color:var(--danger)}
/* Linha de grupo (prestador). O colspan TEM de fechar todas as colunas do thead. */
tr.grupo td{background:var(--surface-2);font-weight:var(--fw-semibold);
            border-bottom:1px solid var(--border-strong)}
tr.grupo .esp{font-weight:var(--fw-regular);color:var(--ink-2)}
tr.total td{background:var(--surface-2);font-weight:var(--fw-semibold);
            border-top:1px solid var(--border-strong);border-bottom:none}
.pt{width:8px;padding-right:0}
.pt i{display:block;width:6px;height:6px;border-radius:var(--radius-sm);background:var(--warning)}
.pt.ruim i{background:var(--danger)}
/* Barra de margem: informa o sinal sem obrigar a ler o número. */
.barra{display:inline-block;width:38px;height:3px;border-radius:var(--radius-full);
       background:var(--surface-3);vertical-align:middle;margin-right:var(--space-2);
       overflow:hidden;position:relative}
.barra>i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--radius-full);
         background:var(--success);animation:encher var(--dur-5) var(--ease) .4s forwards}
.barra.ruim>i{background:var(--danger)}
/* Ação da linha: existe, mas só aparece sob o cursor. */
.acao{opacity:0;transform:translateX(-4px);color:var(--muted);font-size:var(--text-xs);
      transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
                 color var(--dur-1) var(--ease)}
tbody tr:hover .acao{opacity:1;transform:none}
.acao:hover{color:var(--danger)}

/* =============================================================================
   SELOS, AVISOS, VAZIO
   ============================================================================= */
.selo{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;
      padding:2px 9px;border-radius:var(--radius-full);text-transform:uppercase;
      letter-spacing:var(--ls-wide);border:1px solid var(--contorno);
      color:var(--ink-2);background:var(--surface-2)}
.selo.bom{color:var(--success);background:var(--success-weak);border-color:transparent}
.selo.aten{color:var(--warning);background:var(--warning-weak);border-color:var(--warning-borda)}
.selo.ruim{color:var(--danger);background:var(--danger-weak);border-color:transparent}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:var(--fw-semibold);
     padding:1px 9px;border-radius:var(--radius-full);line-height:1.7;border:1px solid transparent}
.tag.via{color:var(--accent-2);background:var(--accent-2-weak);border-color:var(--accent-2-borda)}
.tag.direto{color:var(--success);background:var(--success-weak)}

.aviso{display:flex;gap:var(--space-3);background:var(--warning-weak);
       border:1px solid var(--warning-borda);border-left-width:var(--rib-width);
       border-radius:var(--radius);padding:11px 15px;margin:0 0 var(--space-5);
       font-size:var(--text-sm)}
.aviso b{color:var(--warning)}
.aviso.grave{background:var(--danger-weak);border-color:var(--danger)}
.aviso.grave b{color:var(--danger)}
.erro{background:var(--danger-weak);border:1px solid var(--danger);color:var(--danger);
      padding:10px 13px;border-radius:var(--radius);font-size:var(--text-sm);
      margin-bottom:var(--space-5)}
.vazio{color:var(--muted);padding:var(--space-10);text-align:center;
       border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}

/* =============================================================================
   FORMULÁRIO
   ============================================================================= */
label{display:block;font-size:var(--text-sm);font-weight:var(--fw-medium);
      margin:0 0 6px;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=month],input[type=date],input[type=search],select,textarea,.entrada{
  width:100%;font:inherit;font-size:var(--text-base);padding:var(--campo-pad);
  min-height:var(--campo-h);border-radius:var(--radius);border:1px solid var(--contorno);
  background:var(--surface-3);color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus,.entrada:focus{outline:none;border-color:var(--accent);
  box-shadow:var(--anel-foco);background:var(--surface)}
.campo{margin-bottom:var(--space-4)}
.campo.curto{max-width:220px}
input[type=checkbox],input[type=radio]{width:15px;height:15px;min-height:auto;
  accent-color:var(--accent);margin:0;cursor:pointer}

/* --- senha com olhinho ---------------------------------------------------- */
.senha{position:relative}
.senha input{padding-right:44px}
.olho{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;
      display:grid;place-items:center;border:none;background:none;cursor:pointer;
      color:var(--muted);border-radius:var(--radius-sm);
      transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.olho:hover{color:var(--ink);background:var(--surface-2)}
.olho:focus-visible{outline:none;box-shadow:var(--anel-foco)}
.olho svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round}
.olho .risco{stroke-dasharray:26;stroke-dashoffset:26;
             transition:stroke-dashoffset 220ms var(--ease)}
.olho.ver .risco{stroke-dashoffset:0}
.dica{margin:6px 0 0;font-size:var(--text-xs);color:var(--muted)}
.dica b{color:var(--ink-2);font-weight:var(--fw-medium)}
.linha-aux{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
           margin:0 0 var(--space-5);font-size:var(--text-sm)}
.lembrar{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--ink-2);
         font-weight:var(--fw-regular);margin:0;
         transition:color var(--dur-2) var(--ease)}
.lembrar:hover{color:var(--ink)}
.elo{color:var(--accent);position:relative}
.elo::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
            background:currentColor;transform:scaleX(0);transform-origin:left;
            transition:transform var(--dur-2) var(--ease)}
.elo:hover::after{transform:scaleX(1)}

/* --- busca com sugestões (autocomplete) ---------------------------------- */
.busca{position:relative}
.sugestoes{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--z-dropdown);
           background:var(--surface);border:1px solid var(--border);
           border-radius:var(--radius);box-shadow:var(--sombra-2);max-height:260px;
           overflow-y:auto}
.sugestoes:empty{display:none}
.sugestoes>div{padding:8px 12px;cursor:pointer;font-size:var(--text-sm);
               transition:background var(--dur-1) var(--ease)}
.sugestoes>div:hover,.sugestoes>div.marcado{background:var(--surface-2)}
.sugestoes .det{color:var(--muted);font-size:var(--text-xs)}

/* =============================================================================
   SELETOR DE MODO (A · Grade / B · Compositor / C · Por prestador)
   ============================================================================= */
.modos{display:flex;gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap}
.modo{flex:1;min-width:180px;max-width:236px;text-align:left;padding:11px 15px;
      border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);
      cursor:pointer;position:relative;overflow:hidden;color:inherit;text-decoration:none;
      display:block;font:inherit;
      transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.modo:hover{border-color:var(--border-strong);background:var(--surface-2);text-decoration:none}
.modo b{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.modo i{font-style:normal;font-size:var(--text-xs);color:var(--muted)}
.modo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
             background:var(--accent);transform:scaleX(0);transform-origin:left;
             transition:transform 240ms var(--ease)}
.modo.ativo{border-color:var(--border-strong);background:var(--surface-2)}
.modo.ativo::after{transform:scaleX(1)}
.modo.ativo b{color:var(--accent)}

/* =============================================================================
   HUB — cartões de aplicativo
   ============================================================================= */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
      gap:var(--space-4);margin-top:var(--space-6)}
.app{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
     padding:var(--space-6);display:block;color:inherit;box-shadow:var(--sombra-1);
     transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease)}
.app:hover{border-color:var(--border-strong);transform:translateY(-2px);
           box-shadow:var(--sombra-2);text-decoration:none}
.app .ico{font-size:28px;line-height:1;margin-bottom:var(--space-3)}
.app .nome{font-family:var(--font-display);font-size:var(--text-lg);
           font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);margin-bottom:5px}
.app .desc{font-size:var(--text-sm);color:var(--ink-2);line-height:1.5}

/* =============================================================================
   TELA DE ENTRAR / TROCAR SENHA
   ============================================================================= */
body.entrar{display:grid;place-items:center;min-height:100vh;background:var(--surface-2)}
body.entrar main{width:100%;max-width:392px;padding:var(--space-6);margin:0}
.caixa{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
       padding:var(--space-8);box-shadow:var(--sombra-3);
       animation:surgir 450ms var(--ease) both}
.caixa .mk{width:40px;height:40px;border-radius:var(--radius);background:var(--accent);
           color:var(--accent-ink);display:grid;place-items:center;
           font-family:var(--font-display);font-weight:700;font-size:18px;
           margin-bottom:var(--space-5)}
.caixa h1{font-size:var(--text-xl);margin-bottom:4px}
.caixa .sub{font-size:var(--text-sm);margin-bottom:var(--space-6)}
.caixa .btn{width:100%;padding:12px;font-size:var(--text-base)}
.rodape{text-align:center;margin-top:var(--space-5);font-family:var(--font-mono);
        font-size:10px;letter-spacing:var(--ls-mono);color:var(--muted);text-transform:uppercase}
/* Lista de regras da senha. Sem o recuo padrão do navegador (40px) e com marca
   própria: o bullet do user-agent puxava o bloco para a direita e quebrava o
   alinhamento com os campos logo abaixo. */
.regras{list-style:none;font-size:var(--text-xs);color:var(--muted);
        margin:0 0 var(--space-5);padding:0}
.regras li{position:relative;padding-left:16px;margin-bottom:3px}
.regras li::before{content:"";position:absolute;left:3px;top:.55em;width:4px;height:4px;
                   border-radius:var(--radius-full);background:var(--border-strong)}

/* =============================================================================
   MOVIMENTO REDUZIDO — congela no VALOR FINAL, nunca em zero.
   (tokens.css zera as durações; aqui fixamos o estado terminal de cada
   elemento que "revela" valor, senão sparkline e medidor mentiriam.)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .faisca .ln{stroke-dashoffset:0}
  .faisca circle{opacity:1}
  .medidor>i,.barra>i{width:var(--v,0%)}
  .anel .val{stroke-dashoffset:var(--off,170)}
  .acao{opacity:1;transform:none}
  .sobe{animation:none;opacity:1;transform:none}
}