/* ABL TECH × ChatGuru
 * Disparo de templates.
 *
 * Esta folha segue o Conecta ABL Tech (abltech-conecta.netlify.app) como modelo:
 * as duas ferramentas são da mesma casa e precisam parecer irmãs. Os valores
 * abaixo não foram estimados a olho. Foram medidos no app dele:
 *
 *     fundo   rgb(6,13,22)      texto   rgb(232,238,247)
 *     botão   linear-gradient(135deg, #FF6B6B, #E63946), raio 10px,
 *             sombra rgba(230,57,70,.28) 0 8px 30px
 *     campo   fundo rgba(8,16,28,.7), borda rgba(120,150,190,.14), raio 10px
 *     rótulo  rgb(141,163,192), 12px, peso 400, caixa baixa
 *     fonte   Open Sans
 *
 * A marca é a do arquivo oficial, curva por curva: anel de raio 73.26 com traço
 * 10.84, os três nós de 13.01/8.67, o T e o degradê do TECH. O ChatGuru entra em
 * verde, com balão desenhado aqui (não é o logotipo oficial deles).
 *
 * Regras de movimento:
 *   · anima-se transform e opacity, nunca largura ou altura de conteúdo. O log
 *     recebe uma linha por segundo num disparo de 500 contatos;
 *   · em laço para sempre ficam apenas duas coisas pequenas, o halo do passo
 *     corrente e o ponto da conexão. A correia da barra corre somente enquanto
 *     o disparo acontece.
 *
 * Estrutura:
 *   1 tokens · 2 propriedades animáveis · 3 base e fundo · 4 marca e lockup
 *   5 ponteiro · 6 abertura · 7 login · 8 menu · 9 conteúdo · 10 cards e trilha
 *   11 campos · 12 botões · 13 templates · 14 tabelas · 15 placares · 16 avisos
 *   17 progresso · 18 histórico · 19 responsivo · 20 movimento reduzido
 */

/* ═══ 1 · Tokens ═══════════════════════════════════════════════════════ */
:root {
  /* ---- escuro (padrão) ---- */
  --fundo:        #060D16;
  --fundo-2:      #0A1420;
  --painel:       rgba(17, 27, 40, .78);
  --painel-cheio: #121C29;
  --painel-alto:  #172336;
  --painel-topo:  rgba(255, 255, 255, .045);
  --cova:         rgba(8, 16, 28, .70);

  --texto:   #E8EEF7;
  --texto-2: #B6C5D8;
  --texto-3: #8DA3C0;
  --texto-4: #61789A;

  --linha:   rgba(120, 150, 190, .14);
  --linha-2: rgba(120, 150, 190, .24);
  --linha-3: rgba(120, 150, 190, .40);

  /* rubi da marca (#E8443A) e o par do degradê usado no Conecta */
  --rubi:        #E8443A;
  --rubi-a:      #FF6B6B;
  --rubi-b:      #E63946;
  --rubi-claro:  #FF8A80;
  --rubi-escuro: #B4302A;
  --rubi-08: rgba(232, 68, 58, .08);
  --rubi-14: rgba(232, 68, 58, .14);
  --rubi-28: rgba(232, 68, 58, .28);
  --rubi-50: rgba(232, 68, 58, .50);

  /* verde do ChatGuru */
  --verde:       #25D366;
  --verde-claro: #5BE894;
  --verde-08: rgba(37, 211, 102, .08);
  --verde-18: rgba(37, 211, 102, .18);
  --verde-35: rgba(37, 211, 102, .35);

  --ok:     #2FD69B;  --ok-bg:     rgba(47, 214, 155, .11);  --ok-linha:     rgba(47, 214, 155, .32);
  --falha:  #FF6B6B;  --falha-bg:  rgba(255, 107, 107, .11); --falha-linha:  rgba(255, 107, 107, .32);
  --espera: #F5B93B;  --espera-bg: rgba(245, 185, 59, .11);  --espera-linha: rgba(245, 185, 59, .30);
  --info:   #5CC8F5;

  --tech-a: #FFFFFF;
  --tech-b: #E8443A;
  --marca-nucleo: #0A1420;

  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 4px rgba(0,0,0,.3), 0 16px 34px -22px rgba(0,0,0,.95);
  --sombra-3: 0 4px 10px rgba(0,0,0,.32), 0 36px 72px -34px rgba(0,0,0,1);
  --sombra-rubi: 0 8px 30px rgba(230, 57, 70, .28);
  --luz-topo: inset 0 1px 0 rgba(255,255,255,.06);
  --grade-cor: rgba(120,150,190,.06);
  --veu: transparent;

  --raio:   10px;
  --raio-g: 16px;
  --raio-p: 8px;

  --corpo: 'Open Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --dado:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --trilha-x: 42px;
  --menu-larg: 268px;
  --menu-larg-min: 78px;

  --mola:  cubic-bezier(.22, 1, .36, 1);
  --mola2: cubic-bezier(.34, 1.56, .64, 1);
}

:root[data-tema="claro"] {
  --fundo:        #EAEEF3;
  --fundo-2:      #F4F6F7;
  --painel:       rgba(255, 255, 255, .9);
  --painel-cheio: #FFFFFF;
  --painel-alto:  #FFFFFF;
  --painel-topo:  rgba(255, 255, 255, .95);
  --cova:         rgba(17, 39, 50, .045);

  --texto:   #112732;
  --texto-2: #40586A;
  --texto-3: #6B8394;
  --texto-4: #8CA2B2;

  --linha:   rgba(17, 39, 50, .11);
  --linha-2: rgba(17, 39, 50, .18);
  --linha-3: rgba(17, 39, 50, .32);

  --rubi-escuro: #C4352C;
  --rubi-08: rgba(232, 68, 58, .07);
  --rubi-14: rgba(232, 68, 58, .13);
  --rubi-28: rgba(232, 68, 58, .26);
  --rubi-50: rgba(232, 68, 58, .42);

  --verde:       #12A150;
  --verde-claro: #17C464;
  --verde-08: rgba(18, 161, 80, .07);
  --verde-18: rgba(18, 161, 80, .16);
  --verde-35: rgba(18, 161, 80, .32);

  --ok:     #0C9C68;  --ok-bg:     rgba(12, 156, 104, .10);  --ok-linha:     rgba(12, 156, 104, .30);
  --falha:  #D63B36;  --falha-bg:  rgba(214, 59, 54, .09);   --falha-linha:  rgba(214, 59, 54, .28);
  --espera: #A9720A;  --espera-bg: rgba(169, 114, 10, .10);  --espera-linha: rgba(169, 114, 10, .26);
  --info:   #0E7FBB;

  --tech-a: #0F2B3C;
  --tech-b: #E8443A;
  --marca-nucleo: #FFFFFF;

  --sombra-1: 0 1px 2px rgba(17,39,50,.07);
  --sombra-2: 0 1px 2px rgba(17,39,50,.06), 0 14px 30px -20px rgba(17,39,50,.3);
  --sombra-3: 0 2px 6px rgba(17,39,50,.07), 0 32px 64px -32px rgba(17,39,50,.38);
  --sombra-rubi: 0 8px 30px rgba(230, 57, 70, .26);
  --luz-topo: inset 0 1px 0 rgba(255,255,255,1);
  --grade-cor: rgba(17,39,50,.045);
  --veu: rgba(255,255,255,.4);
}

/* ═══ 3 · Base e fundo ═════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html { scrollbar-color: var(--linha-3) transparent; scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.6 var(--corpo);
  -webkit-font-smoothing: antialiased;
}

/* Troca de tema: as cores deslizam por meio segundo, e apenas nesse meio
   segundo, porque a classe é posta e retirada pelo ui.js. */
body.trocando-tema, body.trocando-tema *,
body.trocando-tema *::before, body.trocando-tema *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease,
              box-shadow .45s ease, fill .45s ease, stroke .45s ease !important;
}

.fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fundo); }

.fundo-grade {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(var(--grade-cor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade-cor) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 130% 95% at 50% 0%, #000 18%, transparent 76%);
          mask-image: radial-gradient(ellipse 130% 95% at 50% 0%, #000 18%, transparent 76%);
}
.fundo-veu { position: absolute; inset: 0; background: var(--veu); }

/* Sem filter: blur aqui. O degradê radial já nasce suave, e desfocar duas
   caixas de 800px a cada quadro era o efeito mais caro desta folha inteira.
   Também não animam: fundo que respira cobra repintura constante e ninguém
   olha para ele. */
.fundo-luz { position: absolute; border-radius: 50%; }
.luz-a {
  width: 900px; height: 620px; top: -320px; left: -220px;
  background: radial-gradient(closest-side, rgba(232,68,58,.30), transparent 72%);
}
.luz-b {
  width: 820px; height: 720px; bottom: -370px; right: -240px;
  background: radial-gradient(closest-side, rgba(37,211,102,.14), transparent 72%);
}
:root[data-tema="claro"] .luz-a { opacity: .45; }
:root[data-tema="claro"] .luz-b { opacity: .4; }

.oculto { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; display: block; }

::selection { background: var(--rubi-28); color: var(--texto); }
:focus-visible { outline: 2px solid var(--rubi); outline-offset: 3px; border-radius: 5px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linha-3); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rubi-50); background-clip: content-box; }

/* ═══ 4 · Marca e lockup ═══════════════════════════════════════════════ */
.marca { display: block; overflow: visible; flex: none; }
.anel-arco  { fill: none; stroke: var(--rubi); stroke-width: 10.84; stroke-linecap: butt; }
.anel-ponta { fill: var(--rubi); }
.anel-seta  { fill: var(--rubi); stroke: var(--rubi); stroke-width: 1.41; stroke-linejoin: round; }
.no-fundo   { fill: var(--marca-nucleo); }
.no-anel    { fill: none; stroke: var(--rubi); stroke-width: 5.2; }
.anel-t     { fill: var(--texto); }
.anel-giro  { transform-box: view-box; transform-origin: 119.26px 143.68px; }

.marca-p  { width: 26px; height: 26px; }
.marca-m  { width: 38px; height: 38px; }
.marca-gg { width: 54px; height: 54px; }
.marca-g  { width: 66px; height: 66px; }

.palavra  { display: block; color: var(--texto); }
.g-tech-a { stop-color: var(--tech-a); }
.g-tech-b { stop-color: var(--tech-b); }

/* marca do ChatGuru */
.guru-marca { display: block; color: var(--verde); flex: none; }
.guru-balao { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linejoin: round; }
.guru-pontos circle { fill: currentColor; }
.guru-pontos circle:nth-child(1) { animation: fala 1.6s ease-in-out infinite; }
.guru-pontos circle:nth-child(2) { animation: fala 1.6s ease-in-out .2s infinite; }
.guru-pontos circle:nth-child(3) { animation: fala 1.6s ease-in-out .4s infinite; }
@keyframes fala { 0%, 60%, 100% { opacity: .45; } 30% { opacity: 1; } }

/* O lockup inteiro escala pelo font-size: mudar um número muda tudo junto. */
.lockup { display: flex; align-items: center; gap: .95em; font-size: 18px; }
.lockup-g { font-size: 25px; }
.lockup-m { font-size: 19px; }

/* O ABL Tech aqui é o mesmo arquivo que o menu usa por dentro do sistema, para
   a marca não mudar de desenho entre a entrada e a aplicação. Sem halo atrás
   do anel: sobre o painel escuro ele lia como borrão. */
.lk-abl { display: flex; align-items: center; }
.lockup .logo-oficial { height: 2.75em; width: auto; }

/* O × é o elo entre as duas marcas: vermelho neon, brando, com o anel apenas
   insinuado. Não gira, porque animar borda cobra repintura a cada quadro e
   ninguém precisa de um separador chamando atenção. */
.lk-x {
  position: relative;
  display: grid; place-items: center;
  width: 2.15em; height: 2.15em; flex: none;
  font-size: .82em; font-weight: 600;
  color: var(--rubi-a);
  text-shadow: 0 0 7px rgba(232, 68, 58, .55), 0 0 18px rgba(232, 68, 58, .26);
}
.lk-x i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(232, 68, 58, .22);
  box-shadow: 0 0 12px rgba(232, 68, 58, .16), inset 0 0 10px rgba(232, 68, 58, .10);
}
:root[data-tema="claro"] .lk-x {
  color: var(--rubi);
  text-shadow: 0 0 8px rgba(232, 68, 58, .32);
}

.lk-guru { position: relative; display: flex; align-items: center; gap: .45em; }
.lk-guru::before {
  content: ''; position: absolute; left: -.4em; top: 50%;
  width: 2.9em; height: 2.9em; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--verde-18), transparent 62%);
  pointer-events: none;
}
.lk-guru .guru-marca { width: 1.85em; height: 1.85em; position: relative; }
.lk-guru b {
  font-size: 1.28em; font-weight: 800; letter-spacing: -.025em;
  background: linear-gradient(135deg, var(--verde-claro), var(--verde));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--verde);
}

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes desenhar { from { stroke-dashoffset: 380; } to { stroke-dashoffset: 0; } }
@keyframes surgir { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes subir-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.desenhando .anel-arco { stroke-dasharray: 380; animation: desenhar 1.25s var(--mola) both; }
.desenhando .anel-ponta,
.desenhando .anel-seta,
.desenhando .anel-nos circle { transform-box: fill-box; transform-origin: center; }
.desenhando .anel-ponta { animation: surgir .4s var(--mola2) .15s both; }
.desenhando .anel-seta  { animation: surgir .5s var(--mola2) .95s both; }
.desenhando .anel-nos circle:nth-child(-n+2)                { animation: surgir .45s var(--mola2) .45s both; }
.desenhando .anel-nos circle:nth-child(n+3):nth-child(-n+4) { animation: surgir .45s var(--mola2) .62s both; }
.desenhando .anel-nos circle:nth-child(n+5)                 { animation: surgir .45s var(--mola2) .79s both; }
.desenhando .anel-t { animation: surgir .6s var(--mola2) 1.05s both; transform-box: fill-box; transform-origin: center; }

.boot .lk-abl   { animation: subir-fade .6s var(--mola) both; }
.boot .lk-x     { animation: surgir .5s var(--mola2) .35s both; }
.boot .lk-guru  { animation: subir-fade .6s var(--mola) .5s both; }

/* enquanto o disparo corre o anel gira: dá para saber que está vivo pelo canto do olho */
body.disparando .menu-marca .anel-giro { animation: girar 8s linear infinite; }

/* ═══ 5 · Ponteiro ═════════════════════════════════════════════════════
   O cursor do sistema fica: some só o rastro. O que se acrescenta é o halo
   redondo vermelho, que segue o mouse com um instante de atraso. */
.ponteiro-halo {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1px solid var(--rubi-28);
  background: radial-gradient(circle, var(--rubi-14), transparent 68%);
  box-shadow: 0 0 22px var(--rubi-14);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: width .28s var(--mola), height .28s var(--mola), margin .28s var(--mola),
              border-color .28s, background .28s, opacity .25s;
}
body.ponteiro-visivel .ponteiro-halo { opacity: 1; }
body.ponteiro-acao .ponteiro-halo {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-color: var(--rubi-50);
  background: radial-gradient(circle, var(--rubi-28), transparent 70%);
  box-shadow: 0 0 30px var(--rubi-28);
}
body.ponteiro-pressionado .ponteiro-halo { width: 28px; height: 28px; margin: -14px 0 0 -14px; }

/* ═══ 6 · Abertura ═════════════════════════════════════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--fundo);
  transition: opacity .5s ease, visibility .5s;
}
.boot.saiu { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-centro { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 2rem; }
.boot-barra {
  width: 200px; height: 2px; border-radius: 99px; overflow: hidden;
  background: var(--linha-2);
  animation: subir-fade .5s var(--mola) .7s both;
}
.boot-barra i {
  display: block; height: 100%; width: 42%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--rubi-b), var(--rubi-a));
  animation: vaivem 1.3s ease-in-out infinite;
}
@keyframes vaivem { 0% { transform: translateX(-110%); } 100% { transform: translateX(255%); } }
.boot-msg {
  margin: 0; font-size: .82rem; color: var(--texto-3);
  animation: subir-fade .5s var(--mola) .85s both;
}
.boot-msg.ruim { color: var(--falha); }

/* ═══ 7 · Login ════════════════════════════════════════════════════════
   Um cartão só, centralizado, na mesma disposição do Conecta. */
.tela-login {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  animation: subir-fade .55s var(--mola) both;
}
.login-caixa {
  position: relative; overflow: hidden;
  width: 100%; max-width: 440px;
  background:
    linear-gradient(180deg, var(--painel-topo), transparent 42%),
    var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-3), var(--luz-topo);
  padding: 2.2rem 2rem 2rem;
  text-align: center;
  transition: box-shadow .3s ease;
}
.login-caixa:hover { box-shadow: var(--sombra-3), var(--luz-topo), 0 0 0 1px var(--rubi-14); }
/* o fio vermelho no topo do cartão, marca da casa */
.login-caixa::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rubi-a), var(--rubi-b));
  box-shadow: 0 0 18px var(--rubi-50);
}
.login-caixa .lockup { justify-content: center; margin-bottom: 1rem; }
.login-sub {
  margin: 0 0 1.7rem;
  font-size: .88rem; color: var(--texto-3);
}
.login-caixa .cabecalho { justify-content: center; margin-bottom: 1.4rem; }
.login-caixa .cabecalho h2 { flex: none; font-size: 1.05rem; }
.login-caixa label { text-align: left; }
.login-caixa .dica { text-align: center; }
.login-caixa .linha-fim { justify-content: center; margin-top: .9rem; }

.login-rodape {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center;
  margin: 0; font-size: .76rem; color: var(--texto-4);
  animation: subir-fade .6s var(--mola) .2s both;
}
.login-rodape i { width: 3px; height: 3px; border-radius: 50%; background: var(--linha-3); }

.aviso-login {
  display: flex; gap: .55rem; text-align: left;
  background: var(--falha-bg);
  border: 1px solid var(--falha-linha);
  border-left: 2px solid var(--falha);
  border-radius: var(--raio-p);
  padding: .8rem .95rem; margin: 1.15rem 0 0;
  font-size: .85rem; color: var(--falha);
  animation: subir-fade .35s var(--mola) both;
}
.aviso-login.sucesso {
  background: var(--ok-bg); border-color: var(--ok-linha);
  border-left-color: var(--ok); color: var(--ok);
}

.tema-solto { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }

/* ═══ 8 · Menu ═════════════════════════════════════════════════════════ */
.app { display: flex; min-height: 100vh; animation: subir-fade .5s var(--mola) both; }

.menu {
  position: sticky; top: 0;
  flex: none; width: var(--menu-larg); height: 100vh;
  display: flex; flex-direction: column;
  padding: 1.5rem 0 1.15rem;
  /* Sem backdrop-filter: ele obriga o navegador a redesenhar o menu inteiro a
     cada rolagem do conteúdo, e a translucidez sozinha já dá a profundidade. */
  background: var(--painel);
  border-right: 1px solid var(--linha);
  --marca-nucleo: var(--painel-cheio);
  z-index: 5;
  transition: width .38s var(--mola);
}
.menu::after {
  content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--rubi-28), transparent 40%);
}

.menu-topo { display: flex; align-items: center; gap: .7rem; padding: 0 1.1rem .85rem; }
/* O logotipo é o arquivo oficial inteiro (ABL-Tech-lockup-*.svg): anel, ABL
   TECH, fio vermelho e a linha TECNOLOGIA · INOVAÇÃO · ORGANIZAÇÃO. Os arquivos
   foram abertos para tirar o retângulo de fundo, que era o responsável por
   virar placa dentro do painel, e o viewBox foi recortado rente à arte, que
   tinha 20% de margem morta no topo. Assim o logotipo assenta no painel, sem moldura. */
.menu-marca { position: relative; display: flex; align-items: center; margin: 0; min-width: 0; }
/* Altura fixa e largura por proporção: é assim que logotipo se encaixa em barra
   de navegação: pequeno, alinhado com o resto, sem dominar a coluna. */
.logo-oficial {
  display: block; height: 40px; width: auto;
}

:root[data-tema="escuro"] .logo-claro,
:root[data-tema="claro"]  .logo-escuro { display: none; }
.so-recolhido { display: none; }



/* Fio vermelho + TECNOLOGIA · INOVAÇÃO · ORGANIZAÇÃO, fechando o logotipo.
   Escala com a largura, então a proporção do arquivo oficial é respeitada. */
.assinatura {
  display: block; width: calc(100% - 2rem); height: auto;
  margin: -.2rem 1rem 1.1rem;
  color: var(--texto);
  animation: subir-fade .5s var(--mola) both;
}
.assinatura-g { width: 300px; margin: .2rem 0 0; }
body.menu-recolhido .assinatura { display: none; }

.menu-guru {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 1.1rem 1.35rem; padding: 0 .1rem;
  font-size: .75rem; color: var(--texto-3); white-space: nowrap;
}
.menu-guru b { color: var(--verde); font-weight: 700; }
.guru-p { width: 15px; height: 15px; }
/* a 15px os três pontos ficam menores que um pixel: piscar ali é ruído, não
   informação, e a animação fica só no lockup grande */
.guru-p .guru-pontos circle { animation: none; opacity: 1; }

.recolher {
  margin-left: auto; flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid transparent; border-radius: var(--raio-p);
  background: transparent; color: var(--texto-4);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .35s var(--mola);
}
.recolher:hover { color: var(--texto); background: var(--linha); border-color: var(--linha-2); }
body.menu-recolhido .recolher { transform: rotate(180deg); }

.menu-itens { display: flex; flex-direction: column; gap: 3px; padding: 0 .65rem; }
.menu-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .75rem;
  width: 100%; text-align: left;
  padding: .68rem .8rem;
  border: 1px solid transparent; border-radius: var(--raio);
  background: transparent;
  color: var(--texto-3);
  font: inherit; font-size: .93rem; font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.menu-item span { white-space: nowrap; }
.menu-item .ico { transition: transform .3s var(--mola2); }
.menu-item:hover { color: var(--texto); background: var(--rubi-08); }
.menu-item:hover .ico { transform: translateX(2px); }
.menu-item.ativo {
  color: var(--texto);
  border-color: var(--linha-2);
  background: linear-gradient(90deg, var(--rubi-14), transparent 70%);
  box-shadow: var(--luz-topo);
}
.menu-item.ativo .ico { color: var(--rubi); }
.menu-item::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 58%; border-radius: 0 3px 3px 0;
  background: var(--rubi); box-shadow: 0 0 12px var(--rubi-50);
  transform: translateY(-50%) scaleY(0);
  transition: transform .32s var(--mola2);
}
.menu-item.ativo::before { transform: translateY(-50%) scaleY(1); }

.menu-rodape {
  margin-top: auto; padding: 1rem .9rem 0;
  border-top: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: .7rem; align-items: flex-start;
}
.conexao {
  display: flex; align-items: center; gap: .5rem; margin: 0; padding-left: .2rem;
  font-size: .74rem; color: var(--texto-3); white-space: nowrap;
}
.conexao i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--espera); box-shadow: 0 0 0 3px var(--espera-bg);
}
.conexao.no-ar i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); animation: respirar 2.8s ease-in-out infinite; }
.conexao.fora i  { background: var(--falha); box-shadow: 0 0 0 3px var(--falha-bg); }
@keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.quem {
  display: block; width: 100%; padding-left: .2rem;
  font-size: .74rem; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sair {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem;
  border: 1px solid var(--linha-2); border-radius: var(--raio-p);
  background: transparent; color: var(--texto-3);
  font: inherit; font-size: .8rem; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--mola);
}
.sair .ico { width: 15px; height: 15px; }
.sair:hover { color: var(--texto); border-color: var(--rubi-28); background: var(--rubi-08); transform: translateX(2px); }

/* menu recolhido: vira trilho de ícones, com etiqueta no hover */
body.menu-recolhido .menu { width: var(--menu-larg-min); }
body.menu-recolhido .logo-oficial,
body.menu-recolhido .menu-guru,
body.menu-recolhido .menu-item span,
body.menu-recolhido .quem,
body.menu-recolhido .conexao span,
body.menu-recolhido .sair span,
body.menu-recolhido .tema-trilho { display: none; }
body.menu-recolhido .menu-topo { padding: 0 0 1.2rem; flex-direction: column; gap: .9rem; }
body.menu-recolhido .recolher { margin: 0; }
body.menu-recolhido .menu-marca { display: flex; justify-content: center; flex: none; }
body.menu-recolhido .so-recolhido { display: block; }
body.menu-recolhido .recolher { margin: 0; }
body.menu-recolhido .menu-item,
body.menu-recolhido .sair,
body.menu-recolhido .tema { justify-content: center; padding-left: 0; padding-right: 0; }
body.menu-recolhido .menu-rodape { align-items: center; padding: 1rem .5rem 0; }
body.menu-recolhido .conexao { padding: 0; }

[data-dica] { position: relative; }
body.menu-recolhido [data-dica]:hover::after {
  content: attr(data-dica);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  padding: .35rem .6rem;
  border: 1px solid var(--linha-2); border-radius: var(--raio-p);
  background: var(--painel-alto); color: var(--texto);
  font-size: .78rem; white-space: nowrap;
  box-shadow: var(--sombra-2);
  z-index: 20;
  animation: subir-fade .18s ease both;
}

/* ═══ 9 · Conteúdo ═════════════════════════════════════════════════════ */
main {
  flex: 1; min-width: 0;
  width: 100%; max-width: 1040px; margin: 0 auto;
  padding: 2.6rem 2rem 6rem;
}
.view { display: flex; flex-direction: column; gap: 1.35rem; animation: subir-fade .45s var(--mola) both; }

.view-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linha);
  position: relative;
}
.view-cabecalho::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 62px; height: 2px;
  background: linear-gradient(90deg, var(--rubi-a), transparent);
  box-shadow: 0 0 14px var(--rubi-50);
}
.view-supra {
  margin: 0 0 .35rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--texto-4);
}
.view-supra i { font-style: normal; color: var(--verde); padding: 0 .1em; }
.view-cabecalho h2 {
  margin: 0;
  font-size: 1.72rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1;
}
.view-nota { margin: 0 0 .2rem; font-size: .84rem; color: var(--texto-3); }

/* ═══ 10 · Cards e trilha ══════════════════════════════════════════════ */
.trilha { display: flex; flex-direction: column; gap: 1.25rem; }

.card {
  position: relative;
  background:
    linear-gradient(180deg, var(--painel-topo), transparent 42%),
    var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-2), var(--luz-topo);
  padding: 1.5rem 1.7rem 1.7rem;
  animation: card-entra .5s var(--mola) both;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.card:hover { border-color: var(--linha-2); box-shadow: var(--sombra-3), var(--luz-topo); }
@keyframes card-entra {
  from { opacity: 0; transform: translateY(16px) scale(.992); }
  to   { opacity: 1; transform: none; }
}

/* fio que liga um passo ao seguinte: sobe pelo vão até o card de cima. Passo
   escondido não ocupa espaço, então o fio acerta o vão em qualquer combinação */
.trilha .card::after {
  content: ''; position: absolute; left: var(--trilha-x); top: -1.25rem;
  width: 2px; height: 1.25rem;
  background: linear-gradient(180deg, transparent, var(--linha-2));
}
#passo-template::after { display: none; }
.trilha .card.feito::after { background: var(--ok-linha); }

/* o passo corrente ganha um fio de luz correndo pela borda */
/* O passo corrente é o único card com a borda acesa. Antes havia um gradiente
   cônico girando ali, bonito e caro, porque recalculava o gradiente e a máscara
   do tamanho do card a cada quadro. Agora a borda apenas acende. */
.card.atual {
  border-color: var(--rubi-28);
  box-shadow: var(--sombra-3), var(--luz-topo), var(--sombra-rubi);
}
.card.atual::before {
  content: ''; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rubi-a), var(--rubi-b), transparent);
  pointer-events: none;
}

.cabecalho { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.35rem; }
.cabecalho h2 {
  margin: 0; flex: 1; min-width: 0;
  font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em;
}

.num {
  position: relative; flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-2); border-radius: 50%;
  background: var(--cova); color: var(--texto-3);
  font-family: var(--dado); font-size: .78rem; font-weight: 700;
  transition: color .35s, border-color .35s, background .35s, box-shadow .35s;
}
.card.atual .num {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--rubi-a), var(--rubi-b));
  box-shadow: 0 6px 18px -6px var(--rubi-50);
}
.card.atual .num::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--rubi-28);
  animation: halo 2.6s ease-out infinite;
}
@keyframes halo {
  0%   { transform: scale(.82); opacity: .95; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.card.feito .num { color: transparent; border-color: var(--ok-linha); background: var(--ok-bg); }
.card.feito .num::after {
  content: ''; position: absolute; inset: 0; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
  animation: surgir .4s var(--mola2) both;
}
.num-ico { color: var(--rubi); border-color: var(--rubi-28); background: var(--rubi-08); }
.num-ico .ico { width: 15px; height: 15px; }

/* painel que abre e fecha */
.dobra {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid transparent; border-radius: var(--raio-p);
  background: transparent; color: var(--texto-4);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .32s var(--mola);
}
.dobra:hover { color: var(--texto); background: var(--linha); border-color: var(--linha-2); }
.card.dobrado .dobra { transform: rotate(-90deg); }
.card.dobrado .corpo { display: none; }
.card.dobrado { padding-bottom: 1.5rem; }
.card.dobrado .cabecalho { margin-bottom: 0; }
.corpo { animation: abrir-corpo .42s var(--mola) both; }
@keyframes abrir-corpo { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ═══ 11 · Campos ══════════════════════════════════════════════════════ */
label {
  display: block; margin: 0 0 .45rem;
  font-size: .75rem; font-weight: 400;
  color: var(--texto-3);
  letter-spacing: .4px;
}

input, select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--cova);
  color: var(--texto);
  font: inherit; font-size: .88rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
input[type="number"] { -moz-appearance: textfield; }
input#link, input[type="tel"], select, input[type="number"] { font-family: var(--dado); font-size: .84rem; }
input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--linha-2); }
input:focus, select:focus {
  outline: none; border-color: var(--rubi);
  box-shadow: 0 0 0 4px var(--rubi-14);
}
input::placeholder { color: var(--texto-4); }

select {
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238DA3C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 15px;
}
select option { background: var(--painel-cheio); color: var(--texto); }

.campo { margin-bottom: 1.1rem; }
.linha { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.linha input { flex: 1; min-width: 12rem; }
.linha-fim { justify-content: space-between; margin-top: 1.2rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem; }

.dica { margin: .95rem 0 1.15rem; font-size: .85rem; color: var(--texto-3); line-height: 1.65; }
.dica code {
  font-family: var(--dado); font-size: .86em;
  background: var(--cova); color: var(--texto-2);
  padding: .14rem .4rem; border-radius: 5px; border: 1px solid var(--linha);
}
.ok {
  display: flex; align-items: center; gap: .5rem;
  color: var(--ok); font-weight: 600; margin: 0 0 1.15rem; font-size: .88rem;
  animation: subir-fade .35s var(--mola) both;
}
.ok::before {
  content: ''; width: 16px; height: 16px; flex: none; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* olho da senha: o app.js troca o texto do botão por emoji, então o glifo fica
   invisível e o ícone vem por máscara. O estado sai do type do input */
.com-olho { position: relative; }
.com-olho input { padding-right: 3rem; }
.olho {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border: 0; border-radius: var(--raio-p);
  background: transparent; font-size: 0; color: transparent; line-height: 0;
  cursor: pointer; transition: background .2s;
}
.olho::after {
  content: ''; width: 18px; height: 18px; background: var(--texto-3);
  transition: background .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 12S5.6 5.5 12 5.5 21.8 12 21.8 12 18.4 18.5 12 18.5 2.2 12 2.2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 12S5.6 5.5 12 5.5 21.8 12 21.8 12 18.4 18.5 12 18.5 2.2 12 2.2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.olho:hover { background: var(--linha); }
.olho:hover::after { background: var(--texto); }
@supports selector(:has(*)) {
  .com-olho:has(input[type="text"]) .olho::after {
    background: var(--rubi);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.7A9.9 9.9 0 0 1 12 6.6c6.4 0 9.8 6.5 9.8 6.5a17 17 0 0 1-3 3.9M6.2 7.9A17 17 0 0 0 2.2 13s3.4 6.5 9.8 6.5a9.6 9.6 0 0 0 4.1-.9'/%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M9.9 10.4a2.8 2.8 0 0 0 3.9 3.9'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.7A9.9 9.9 0 0 1 12 6.6c6.4 0 9.8 6.5 9.8 6.5a17 17 0 0 1-3 3.9M6.2 7.9A17 17 0 0 0 2.2 13s3.4 6.5 9.8 6.5a9.6 9.6 0 0 0 4.1-.9'/%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M9.9 10.4a2.8 2.8 0 0 0 3.9 3.9'/%3E%3C/svg%3E");
  }
}

/* campo com erro precisa ser distinguível de campo em foco, porque os dois
   são avermelhados. O que separa é o sinal dentro do campo */
input.invalido, input.invalido:hover, input.invalido:focus {
  border-color: var(--falha);
  background-color: var(--falha-bg);
  box-shadow: 0 0 0 4px var(--falha-bg);
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.6v5.2M12 16.2v.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 17px;
}
.erro-campo {
  display: flex; align-items: center; gap: .4rem;
  margin: .5rem 0 0; font-size: .8rem; font-weight: 600; color: var(--falha);
  animation: subir-fade .3s var(--mola) both;
}

/* ═══ 12 · Botões ══════════════════════════════════════════════════════ */
.btn {
  position: relative; overflow: hidden;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 14px 1.5rem;
  border: 0; border-radius: var(--raio);
  background: linear-gradient(135deg, var(--rubi-a) 0%, var(--rubi-b) 100%);
  color: #fff;
  font: inherit; font-weight: 700; font-size: .875rem; letter-spacing: .3px;
  cursor: pointer;
  box-shadow: var(--sombra-rubi);
  transition: transform .18s var(--mola), box-shadow .25s, filter .25s;
}
/* lâmina de luz que atravessa no hover */
.btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  transition: transform .65s var(--mola);
}
.btn:hover:not(:disabled)::before { transform: skewX(-18deg) translateX(360%); }
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 40px rgba(230, 57, 70, .38);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.btn:disabled {
  background: var(--cova); color: var(--texto-4);
  border: 1px solid var(--linha); box-shadow: none; cursor: not-allowed;
}
.btn:disabled::before { display: none; }
.btn-largo { width: 100%; }

.onda {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0); opacity: .7;
  animation: onda-cresce .6s ease-out forwards;
  pointer-events: none;
}
@keyframes onda-cresce { to { transform: scale(2.8); opacity: 0; } }

.btn.carregando { color: transparent; pointer-events: none; }
.btn.carregando::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
.btn:disabled.carregando::after { border-color: var(--linha-2); border-top-color: var(--texto-2); }

/* o botão de disparar fica travado até a palavra ser digitada */
.btn.perigo:disabled::before {
  display: block; position: static;
  content: ''; width: 15px; height: 15px; margin-right: .1rem;
  transform: none; background: var(--texto-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='10.4' width='15.6' height='10.4' rx='2.2'/%3E%3Cpath d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='10.4' width='15.6' height='10.4' rx='2.2'/%3E%3Cpath d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* O pulso do botão armado é um anel próprio que cresce e some, feito com
   transform e opacity em vez de box-shadow, para não repintar o botão a cada
   quadro. */
#btn-disparar:not(:disabled)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--rubi-a);
  animation: armado 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes armado {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

.link {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; background: none; padding: .4rem .1rem;
  color: var(--texto-3); font: inherit; font-size: .84rem;
  cursor: pointer; border-radius: 5px;
  transition: color .2s;
}
.link:hover { color: var(--rubi); }
.link-ico { padding: .45rem .8rem; border: 1px solid var(--linha-2); border-radius: var(--raio-p); }
.link-ico:hover { border-color: var(--rubi-28); background: var(--rubi-08); }
.link-ico::before {
  content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
  transition: transform .55s var(--mola);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M20.7 4.2v5h-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M20.7 4.2v5h-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.link-ico:hover::before { transform: rotate(180deg); }

/* alternador de tema */
.tema {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .58rem;
  border: 1px solid var(--linha-2); border-radius: 99px;
  background: var(--cova); color: var(--texto-3);
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.tema:hover { color: var(--texto); border-color: var(--rubi-28); }
.tema .ico { width: 15px; height: 15px; transition: opacity .3s, color .3s; }
.ico-lua { opacity: 1; color: var(--rubi); }
.ico-sol { opacity: .4; }
:root[data-tema="claro"] .ico-sol { opacity: 1; color: var(--rubi); }
:root[data-tema="claro"] .ico-lua { opacity: .4; color: inherit; }
.tema-trilho {
  position: relative; width: 34px; height: 18px; flex: none;
  border-radius: 99px; background: var(--linha-2);
  transition: background .3s;
}
.tema-bola {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rubi-a), var(--rubi-b));
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .4s var(--mola2);
}
:root[data-tema="claro"] .tema-bola { transform: translateX(16px); }

/* ═══ 13 · Templates ═══════════════════════════════════════════════════ */
.templates { display: flex; flex-direction: column; gap: .65rem; }
.template {
  position: relative; overflow: hidden;
  display: block; width: 100%; text-align: left;
  padding: 1rem 1.1rem 1rem 1.2rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background:
    var(--cova);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .2s ease, transform .2s var(--mola), box-shadow .2s ease;
}
.template::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--rubi-a), var(--rubi-b));
  box-shadow: 0 0 12px var(--rubi-50);
  transform: scaleY(0); transform-origin: center;
  transition: transform .3s var(--mola2);
}
.template:hover {
  border-color: var(--linha-3);
  transform: translateY(-2px); box-shadow: var(--sombra-2);
}
.template:hover::before { transform: scaleY(.45); }
.template.ativo {
  border-color: var(--rubi-28);
  box-shadow: var(--sombra-2), 0 0 0 1px var(--rubi-14);
  background: var(--rubi-08);
}
.template.ativo::before { transform: scaleY(1); }
.template.ativo::after {
  content: ''; position: absolute; right: 1.1rem; top: 1.1rem;
  width: 18px; height: 18px; background: var(--rubi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-4.9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-4.9'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: surgir .4s var(--mola2) both;
}
.template .t-titulo {
  display: block; padding-right: 2.2rem;
  font-weight: 700; font-size: .97rem; letter-spacing: -.01em;
}
.template .t-resumo {
  display: block; margin-top: .35rem;
  font-size: .845rem; color: var(--texto-3); line-height: 1.55;
}
.campos-extras { margin-top: 1.45rem; padding-top: 1.45rem; border-top: 1px solid var(--linha); }

.esqueleto {
  position: relative; overflow: hidden;
  height: 78px; border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--cova);
}
.esqueleto::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--linha), transparent);
  animation: esqueleto 1.4s ease-in-out infinite;
}
.esqueleto:nth-child(2)::after { animation-delay: .14s; }
.esqueleto:nth-child(3)::after { animation-delay: .28s; }
@keyframes esqueleto { to { transform: translate3d(350%, 0, 0); } }

/* ═══ 14 · Tabelas ═════════════════════════════════════════════════════ */
.tabela-wrap {
  overflow: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--cova);
  margin-bottom: 1.4rem;
  overscroll-behavior: contain;
}
.tabela-wrap.alta { max-height: min(52vh, 480px); }

table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .62rem .9rem; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th {
  background: var(--painel-cheio);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-3);
  position: sticky; top: 0; z-index: 1;
  box-shadow: 0 1px 0 var(--linha);
}
tbody tr { transition: background .18s; }
tbody tr:hover td { background: var(--rubi-08); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child, .e-linha {
  font-family: var(--dado); font-size: .79rem; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
td.vazio, .vazio { color: var(--texto-4); }

#tabela-log tbody tr { animation: linha-entra .32s var(--mola) both; }
@keyframes linha-entra {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.selo {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .18rem .6rem .18rem .5rem;
  border: 1px solid currentColor; border-radius: 99px;
  font-family: var(--dado); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  animation: surgir .3s var(--mola2) both;
}
.selo::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 7px currentColor;
}
.r-enviado .selo { color: var(--ok);      background: var(--ok-bg);    border-color: var(--ok-linha); }
.r-falha   .selo { color: var(--falha);   background: var(--falha-bg); border-color: var(--falha-linha); }
.r-pulado  .selo { color: var(--texto-3); background: var(--cova);     border-color: var(--linha-2); }
.via { display: block; margin-top: .28rem; font-size: .74rem; color: var(--texto-4); }

.linha-etapa td { border-bottom: 0; padding-top: .28rem; padding-bottom: .28rem; }
.linha-etapa .e-msg { color: var(--texto-3); font-size: .82rem; white-space: normal; }
.etapa-ajuste   .e-msg { color: var(--espera); }
.etapa-cadastro .e-msg { color: var(--info); }
.linha-final td { border-top: 1px solid var(--linha); }

@supports selector(:has(*)) {
  tbody tr:has(.r-enviado) td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
  tbody tr:has(.r-falha)   td:first-child { box-shadow: inset 3px 0 0 var(--falha); }
  tbody tr:has(.r-pulado)  td:first-child { box-shadow: inset 3px 0 0 var(--linha-3); }

  .tabela-wrap.so-enviado tbody tr:not(:has(.r-enviado)),
  .tabela-wrap.so-falha   tbody tr:not(:has(.r-falha)),
  .tabela-wrap.so-pulado  tbody tr:not(:has(.r-pulado)) { display: none; }
}

/* ═══ 15 · Placares ════════════════════════════════════════════════════ */
.placares { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.placar {
  position: relative; overflow: hidden;
  flex: 1; min-width: 134px;
  padding: .95rem 1.05rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background:
    linear-gradient(180deg, var(--painel-topo), transparent 60%),
    var(--cova);
  transition: border-color .2s ease, transform .2s var(--mola), box-shadow .2s ease;
}
.placar .valor {
  display: block;
  font-family: var(--dado); font-size: 1.9rem; font-weight: 700; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.placar .rotulo {
  display: block; margin-top: .45rem;
  font-size: .72rem; color: var(--texto-3);
  text-transform: uppercase; letter-spacing: .09em;
}
.placar.ok-cor   { border-color: var(--ok-linha); }
.placar.ok-cor   .valor { color: var(--ok); }
.placar.erro-cor { border-color: var(--falha-linha); }
.placar.erro-cor .valor { color: var(--falha); }

/* zero não é alarme: sem o que contar, o placar volta ao neutro */
.placar.ok-cor.zerado, .placar.erro-cor.zerado { border-color: var(--linha); }
.placar.ok-cor.zerado .valor, .placar.erro-cor.zerado .valor { color: var(--texto-3); }

.placar.mudou .valor { animation: numero-pula .5s var(--mola2); }
@keyframes numero-pula {
  0% { transform: none; } 30% { transform: translateY(-4px) scale(1.08); } 100% { transform: none; }
}

.placar.filtravel { cursor: pointer; }
.placar.filtravel:hover {
  border-color: var(--rubi-28); transform: translateY(-3px);
  box-shadow: var(--sombra-2);
}
.placar.filtravel::after {
  content: 'filtrar'; position: absolute; right: .8rem; top: .8rem;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); opacity: 0; transition: opacity .2s;
}
.placar.filtravel:hover::after { opacity: .8; }
.placar.marcado { border-color: var(--rubi); box-shadow: 0 0 0 1px var(--rubi-28); }
.placar.marcado::after { content: 'mostrando'; opacity: 1; color: var(--rubi); }

/* ═══ 16 · Resumo, avisos e interrupção ════════════════════════════════ */
.resumo-config {
  background: var(--cova);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.05rem 1.15rem; margin-bottom: 1.4rem;
  font-size: .85rem;
}
.resumo-config div { display: flex; gap: 1rem; padding: .28rem 0; align-items: baseline; }
.resumo-config div + div { border-top: 1px solid var(--linha); }
.resumo-config .r-rotulo {
  color: var(--texto-3); min-width: 118px; flex: none;
  text-transform: uppercase; font-size: .67rem; letter-spacing: .1em;
}
.resumo-config div > span:last-child { color: var(--texto); word-break: break-word; }

.aviso {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--espera-bg);
  border: 1px solid var(--espera-linha);
  border-left: 2px solid var(--espera);
  border-radius: var(--raio);
  padding: .95rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .86rem; color: var(--espera);
}
.aviso p { margin: 0; line-height: 1.6; }
.aviso .ico { color: var(--espera); margin-top: .12rem; }
.aviso strong {
  color: var(--texto); font-family: var(--dado); font-weight: 700;
  letter-spacing: .06em; font-size: .92em;
}

.linha-armar { gap: .85rem; }
#confirmacao {
  font-family: var(--dado); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  max-width: 16rem; flex: 1;
}
#confirmacao::placeholder { letter-spacing: .3em; color: var(--texto-4); }
@supports selector(:has(*)) {
  .linha-armar:has(#btn-disparar:not(:disabled)) #confirmacao {
    border-color: var(--rubi); color: var(--rubi);
    background: var(--rubi-08); box-shadow: 0 0 0 4px var(--rubi-14);
  }
}

.interrupcao {
  background: var(--falha-bg);
  border: 1px solid var(--falha-linha);
  border-left: 2px solid var(--falha);
  border-radius: var(--raio);
  padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
  animation: subir-fade .4s var(--mola) both;
}
.interrupcao .i-titulo {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem;
  font-weight: 700; font-size: 1rem; color: var(--falha);
}
.interrupcao .i-titulo::before {
  content: ''; width: 18px; height: 18px; flex: none; background: var(--falha);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.6v5.2M12 16.2v.1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.6v5.2M12 16.2v.1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.interrupcao .i-msg { margin: 0 0 .55rem; font-size: .9rem; color: var(--texto); }
.interrupcao .i-nota { margin: 0 0 1.15rem; font-size: .83rem; color: var(--texto-3); line-height: 1.65; }

.final {
  display: flex; align-items: center; gap: .65rem;
  margin: 0; padding: 1rem 1.15rem;
  background: var(--ok-bg);
  border: 1px solid var(--ok-linha);
  border-left: 2px solid var(--ok);
  border-radius: var(--raio);
  font-size: .89rem; color: var(--texto);
  animation: subir-fade .45s var(--mola) both;
}
.final::before {
  content: ''; width: 19px; height: 19px; flex: none; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-4.9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-4.9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.final.falhou { background: var(--espera-bg); border-color: var(--espera-linha); border-left-color: var(--espera); }
.final.falhou::before { background: var(--espera); }

.acoes-fim { margin-top: 1.4rem; display: flex; gap: .75rem; flex-wrap: wrap; }

.erro-caixa {
  display: flex; gap: .55rem;
  background: var(--falha-bg);
  border: 1px solid var(--falha-linha);
  border-left: 2px solid var(--falha);
  border-radius: var(--raio);
  padding: .85rem 1.05rem; margin-top: 1.2rem;
  font-size: .85rem; color: var(--falha);
  animation: subir-fade .35s var(--mola) both;
}

/* ═══ 17 · Progresso ═══════════════════════════════════════════════════ */
.barra-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.atual { margin: 0 0 .6rem; font-size: .91rem; min-height: 1.5rem; color: var(--texto-2); }
.pct {
  margin: 0; flex: none;
  font-family: var(--dado); font-size: 1.05rem; font-weight: 700;
  color: var(--texto); font-variant-numeric: tabular-nums;
}

.barra {
  position: relative;
  height: 9px; border-radius: 99px;
  background: var(--cova);
  border: 1px solid var(--linha);
  overflow: hidden;
  margin-bottom: .85rem;
}
.barra-int {
  position: relative;
  height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rubi-b), var(--rubi-a) 70%, #FFC9C4);
  box-shadow: 0 0 16px var(--rubi-50);
  overflow: hidden;
  transition: width .4s var(--mola);
}
/* A correia desliza por transform, e não por background-position. Assim ela
   sobe para o compositor e deixa de repintar a barra a cada quadro. */
body.disparando .barra-int::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: -48px;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 10px, transparent 10px 22px);
  animation: correia .9s linear infinite;
  will-change: transform;
}
@keyframes correia { to { transform: translate3d(44px, 0, 0); } }

.contador {
  margin: 0 0 1.4rem;
  font-family: var(--dado); font-size: .77rem; color: var(--texto-3);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

.pulso { display: none; }
body.disparando .pulso {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .24rem .65rem;
  border: 1px solid var(--rubi-28); border-radius: 99px;
  background: var(--rubi-08);
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--rubi);
}
.pulso i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rubi);
  box-shadow: 0 0 8px var(--rubi);
  animation: respirar 1.5s ease-in-out infinite;
}

/* ═══ 18 · Histórico ═══════════════════════════════════════════════════ */
.vazio-aviso {
  padding: 3.2rem 1.5rem; text-align: center;
  color: var(--texto-3); font-size: .9rem;
  background: var(--cova);
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio-g);
}
.ultimo {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, var(--painel-topo), transparent 42%),
    var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-2), var(--luz-topo);
  padding: 1.35rem 1.5rem;
  transition: box-shadow .25s ease;
}
.ultimo:hover { box-shadow: var(--sombra-3), var(--luz-topo); }
.ultimo::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rubi-a), var(--linha-3) 40%, transparent 78%);
}
.ultimo-titulo {
  margin: 0 0 .95rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texto-3);
}
.ultimo .resumo-config { margin-bottom: 0; background: transparent; border: 0; padding: 0; }

#tabela-historico th, #tabela-historico td { padding: .6rem .7rem; }
#tabela-historico td:nth-child(2),
#tabela-historico td:nth-child(4) { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
#tabela-historico td:nth-child(6), #tabela-historico td:nth-child(7),
#tabela-historico th:nth-child(6), #tabela-historico th:nth-child(7) { text-align: right; }
#tabela-historico td:nth-child(6),
#tabela-historico td:nth-child(7) { font-family: var(--dado); font-variant-numeric: tabular-nums; }

tr.clicavel { cursor: pointer; }
tr.clicavel:hover td:first-child { box-shadow: inset 3px 0 0 var(--rubi); }
.sit-concluido    { color: var(--ok); }
.sit-interrompido { color: var(--falha); }
.sit-andamento    { color: var(--espera); }

/* ═══ 19 · Responsivo ══════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .app { flex-direction: column; }
  .menu {
    width: auto !important; height: auto; position: sticky; top: 0;
    border-right: 0; border-bottom: 1px solid var(--linha);
    padding: .8rem .9rem;
    flex-direction: row; align-items: center; gap: .8rem;
  }
  .menu::after { display: none; }
  .menu-topo { padding: 0; }
  .recolher, .menu-guru { display: none; }
  .logo-oficial { height: 34px; }
  .menu-itens { flex-direction: row; padding: 0; margin-left: auto; }
  .menu-item { padding: .5rem .7rem; }
  .menu-item span { display: none; }
  .menu-item .ico { width: 20px; height: 20px; }
  .menu-item::before {
    left: 50%; top: auto; bottom: 0; width: 60%; height: 3px;
    transform: translateX(-50%) scaleX(0); border-radius: 3px 3px 0 0;
  }
  .menu-item.ativo::before { transform: translateX(-50%) scaleX(1); }
  .menu-rodape {
    margin: 0; padding: 0; border-top: 0;
    flex-direction: row; align-items: center; gap: .6rem;
  }
  .quem, .conexao span, .sair span, .tema-trilho { display: none; }
  .sair { padding: .45rem; }
  .tema { padding: .4rem; }

  main { padding: 1.5rem 1rem 4rem; }
  .card { padding: 1.3rem 1.15rem 1.35rem; border-radius: 14px; }
  :root { --trilha-x: 33px; }
  .view-cabecalho h2 { font-size: 1.4rem; }
  .placar { min-width: 100%; }
  .linha-armar { flex-direction: column; align-items: stretch; }
  #confirmacao { max-width: none; }
  .btn { width: 100%; }
  .lockup { font-size: 15px; }
  .tema-solto { top: .8rem; right: .8rem; }
}

@media (max-width: 430px) {
  .login-caixa { padding: 1.6rem 1.2rem 1.4rem; }
  th, td { padding: .55rem .6rem; }
  .lockup { font-size: 13px; }
}

/* aparelho sem mouse não recebe o halo */
@media (hover: none), (pointer: coarse) {
  .ponteiro-halo { display: none; }
}

/* ═══ 20 · Movimento reduzido ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .ponteiro-halo { display: none; }
}