/* Intranet Larafy — identidade oficial (Manual de Marca v1.0)
   Navy #002e43 estrutura · Cyan #00e5ff acento · Branco suporte
   Tipografia: Montserrat (título, apertada) + IBM Plex Sans (texto)
                + IBM Plex Mono (rótulo, hora, número)
   Inter saiu de proposito: e a fonte padrao de painel gerado por IA.
   Regras do pacote: Desktop/design_pack_larafy/PROMPT-PARA-IA.md

   REDESENHO 09/2026 — o que mudou e por que
   O --sec ja era #00e5ff aqui antes, e ja marcava o item ativo do menu: NAO e
   verdade que o cyan nao aparecia (foi o que eu escrevi antes; estava errado).
   O que estava achatado em navy era o --ciano (#002e43), outra variavel, usada
   so no .chip.c e no hover do seletor de humor — la o cyan virou cinza morto.
   Agora --ciano-esc e #00738f, que da 4,94:1 no chip (medido).
   O cyan segue como o manual manda: caneta marca-texto, no maximo 5% da tela e
   em no maximo 3 lugares. Nunca em texto — para texto e link, --sec-esc.

   DESVIO DELIBERADO DO MANUAL, para ninguem "corrigir" de volta:
   o manual pede #6e8794 como tinta fraca. Medido, ele da 3,55:1 sobre o fundo
   #f6f8f9 — REPROVA como texto. O --muted daqui e #54697a, que da 5,36:1. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  color-scheme:light;
  --bg:#f6f8f9; --card:#ffffff; --card2:#edf1f3;
  --linha:#d5dee2; --linha2:#e4eaed;
  --txt:#0f2731; --txt2:#3c5665; --muted:#54697a;
  /* ===== ESTRUTURA: a paleta escura DO SITE (18/09/2026) =====
     O site declara as proprias variaveis de marca, que eu so encontrei agora:
       --larafy-navy   #0d1d33   --larafy-dark  #0a1628
       --larafy-darker #061120   --border       #1e3a5f
     Eu usava #002e43 (lateral) e #00121b (banner), que vem do MANUAL ANTIGO,
     nao do site. Sao duas familias de azul diferentes — por isso a lateral e o
     banner, encostados um no outro, nao batiam. #002e43 puxa para o
     verde-petroleo; #0d1d33 e azul de verdade. */
  --navy:#0d1d33; --navy-esc:#061120; --navy-claro:#16304f;
  --fio-escuro:#1e3a5f;
  --marca:#0d1d33;
  --marca-suave:#e4f7fc;
  /* ACENTO = Cyan. --sec e a cor da marca (so em area pequena);
     --sec-esc e a versao com contraste, para texto e link. */
  --sec:#00e5ff; --sec-esc:#00738f; --sec-bg:#e4f7fc;
  --ciano:#00738f; --ciano-esc:#00738f; --ciano-bg:#e4f7fc;
  --acao:#0d1d33; --acao-esc:#061120;
  --verde:#0e7a52; --verde-bg:#e7f3ed;
  --amarelo:#9c6100; --amarelo-bg:#fbf2e3;
  --vermelho:#b03a2e; --vermelho-bg:#fbecea;
  --roxo:#4a3aa7; --roxo-bg:#eeebf7;
  /* AS FONTES DO SITE (09/2026) — medidas no CSS do larafy.com.br:
       --font-display : Space Grotesk   -> titulo
       --font-inter   : Inter           -> texto e interface (fica no <html>)
       --font-mono    : Geist Mono      -> rotulo, numero, hora, codigo

     ⚠️ O PROMPT-PARA-IA.md PROIBE Inter e Space Grotesk, com estas palavras:
     "Proibido Inter, Space Grotesk, Poppins e Fraunces" — a justificativa era
     que Inter e "a fonte padrao de painel gerado por IA". Só que o site da
     empresa, que e a cara publica da LaraFy, usa exatamente essas duas. A
     intranet estava com IBM Plex Sans + Montserrat, que o site NAO usa em
     lugar nenhum — era por isso que a tipografia nao batia com a referencia.
     Decisao do Kennedy: manda o site. Nao troque de volta sem falar com ele. */
  --fonte-tit:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --fonte-texto:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --fonte-mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --raio:6px; --raio-sm:4px; --raio-xs:3px;
  /* movimento: uma curva (sai rapido, chega devagar) e quatro tempos.
     O manual proibe enfeite (fade-in ao rolar, elemento que pula no hover);
     o que fica e movimento de ESTADO: o que abre, fecha, entra, atualiza. */
  --curva:cubic-bezier(.32,.72,0,1);
  --t-micro:90ms; --t:150ms; --t-painel:200ms; --t-sobre:220ms;
  /* grafico: 6 series em ordem fixa, validadas em daltonismo e contraste */
  --serie-1:#0090b3; --serie-2:#eb6834; --serie-3:#4a3aa7;
  --serie-4:#1baf7a; --serie-5:#eda100; --serie-6:#d93a63; --serie-outros:#9fb6c0;
  /* flat: sem sombra nos elementos de conteúdo; sombra só p/ overlays */
  --sombra:none;
  --sombra-sm:none;
  --sombra-lg:0 12px 34px -12px rgba(0,46,67,.22);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:var(--fonte-texto);
  background:var(--bg);color:var(--txt);line-height:1.55;-webkit-font-smoothing:antialiased;
  font-size:14.5px;
}
a{color:var(--navy);text-decoration:none;font-weight:600}
a:hover{color:var(--sec-esc);text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--fonte-tit);color:var(--navy);letter-spacing:-.025em}
/* numero em tabela, saldo e contador nao pode "dancar" quando muda:
   tabular-nums fixa a largura do digito. */
.mono,.saldo b,td.num,.num{font-variant-numeric:tabular-nums}
/* O foco visivel e definido UMA vez, mais abaixo neste arquivo: navy no
   corpo da pagina (13,39:1) e cyan dentro da lateral e no sino (8,91:1 sobre
   o navy). Cyan como anel em fundo claro da 1,50:1 — um terco do minimo —
   entao ele nao serve no conteudo. Nao redeclare :focus-visible aqui. */
/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- Layout ---------- */
.wrap{display:flex;min-height:100vh}
/* ⚠️ FIXA, nao sticky nem relative.
   Ela estava `position:relative` — e por um erro MEU: quando coloquei a
   aureola ciano de fundo (.side::before), precisei de um contexto de
   posicionamento e escrevi `.side{position:relative}` mais abaixo no arquivo,
   sobrescrevendo o `sticky` daqui. Resultado: a barra rolava junto e sumia,
   deixando um rasgo branco de 378px embaixo dela (medido em 600px de rolagem).
   `fixed` resolve de vez: ela ocupa a altura da janela sempre, independente do
   tamanho da pagina. O preco e que o conteudo precisa da margem — logo abaixo. */
.side{
  width:236px;background:var(--navy);border-right:1px solid var(--navy-esc);
  padding:14px 12px 18px;position:fixed;left:0;top:0;bottom:0;z-index:30;
  overflow:hidden;display:flex;flex-direction:column;
}
/* a lateral saiu do fluxo: o conteudo ganha a margem no lugar dela */
.main{margin-left:236px}
/* Quem rola e a LISTA, nao a barra inteira: com a rolagem no .side, o logo e o
   botao Buscar subiam junto e sumiam da tela quando o admin ia ate o fim do
   menu. min-height:0 e obrigatorio — sem ele um filho flex nao encolhe e a
   rolagem nunca aparece. */
.nav{overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;
  border-bottom:1px solid var(--fio-escuro);margin-bottom:2px}
.brand .logo{height:24px;width:auto}
/* o simbolo quadrado so aparece no TRILHO (>=900px). Na gaveta do celular,
   que tem 280px, o logotipo horizontal cabe e e mais legivel. */
.brand .simbolo{display:none}
.brand .brand-sub{font-size:9px;color:#7ea0b4;font-weight:500;letter-spacing:.18em;
  font-family:var(--fonte-mono)}

/* Gatilho da busca Ctrl+K — primeira coisa do menu, como no print.
   Mono no atalho: rotulo tecnico e papel do mono no manual. */
.k-atalho{
  display:flex;align-items:center;gap:9px;width:100%;margin:10px 0 4px;
  padding:8px 10px;border-radius:var(--raio-sm);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:#a9c4d3;font-family:inherit;font-size:13px;text-align:left;
  transition:background var(--t-micro) var(--curva),border-color var(--t-micro) var(--curva);
}
.k-atalho:hover{background:rgba(255,255,255,.09);border-color:rgba(7,224,255,.32);color:#fff}
.k-atalho .ic{width:15px;height:15px;flex:0 0 15px;stroke-width:1.75;color:#7ea0b4}
.k-atalho kbd{margin-left:auto;font-family:var(--fonte-mono);font-size:9.5px;
  color:#7ea0b4;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);
  border-radius:3px;padding:2px 5px;letter-spacing:.04em}

.nav{display:flex;flex-direction:column;gap:1px;flex:1}
.nav a{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--raio-sm);
  color:#a9c4d3;font-weight:400;margin:0;font-size:13.5px;
  position:relative;z-index:1;white-space:nowrap;
  transition:background var(--t-micro) var(--curva), color var(--t-micro) var(--curva);
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav a:hover .ic{color:#c9e4ef}
/* ITEM ATIVO — um dos tres lugares em que o cyan da marca aparece.
   Barra de 2px na borda do trilho + icone em cyan. Sem gradiente, sem brilho. */
.nav a.ativo{background:rgba(255,255,255,.09);color:#fff;font-weight:500}
/* left:0, DENTRO da lista. Estava em -12px, do lado de fora — e a .nav e a
   caixa que rola, entao ela corta o que fica fora. No computador o JS troca
   esta marca pela .luz e ninguem via; mas o JS desiste abaixo de 900px, e no
   CELULAR o item ativo ficava sem o ciano. Bonus: a .luz tambem fica em
   left:0, entao as duas marcas agora ocupam o mesmo lugar. */
.nav a.ativo::before{content:"";position:absolute;left:0;top:5px;bottom:5px;
  width:2px;background:var(--sec)}
.nav a.ativo .ic{color:var(--sec)}
.nav a .ic{width:17px;height:17px;flex:0 0 17px;stroke-width:1.75;color:#7ea0b4;
  transition:color var(--t-micro) var(--curva)}
.nav a svg.ic{color:#7ea0b4}
.nav a.ativo svg.ic{color:var(--sec)}
.nav a:hover svg.ic{color:#c9e4ef}
.nav a .badge{margin-left:auto}
/* contraste: .38 sobre o navy dava 3,3:1 (reprovado; o minimo e 4,5:1) */
.nav-bloq{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--raio-sm);
  font-size:13.5px;font-weight:400;color:rgba(255,255,255,.52);cursor:not-allowed;user-select:none}
.nav-bloq .ic{width:17px;height:17px;flex:0 0 17px;stroke-width:1.75}
/* sao os rotulos que organizam o menu inteiro: .42 dava 3,7:1 a 9,5px.
   #7ea0b4 da 5,15:1 sobre o navy — mesmo tom do Buscador. */
.nav .grupo{font-family:var(--fonte-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;
  color:#7ea0b4;font-weight:500;padding:16px 10px 5px;margin-top:2px}
.nav .grupo:first-child{margin-top:0;padding-top:4px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{
  display:flex;align-items:center;gap:12px;padding:0 30px;min-height:56px;
  border-bottom:1px solid var(--linha);
  background:var(--card);position:sticky;top:0;z-index:5;
}
.topo h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.025em;color:var(--navy)}
.topo .sp{flex:1}
.saldo{
  display:inline-flex;align-items:baseline;gap:5px;background:none;border:0;
  color:var(--txt2);font-weight:500;padding:4px 0;font-size:12.5px;
}
.saldo i{display:none}
.saldo b{font-family:var(--fonte-texto);font-size:14px;color:var(--navy);font-weight:600;
  font-variant-numeric:tabular-nums}
.saldo:hover{text-decoration:none;color:var(--navy)}
.eu{display:flex;align-items:center;gap:10px}
.av{
  width:32px;height:32px;border-radius:var(--raio-xs);background:var(--card2);
  display:grid;place-items:center;font-weight:700;color:var(--navy);font-size:13px;flex:0 0 auto;
  border:1px solid var(--linha);
}
.eu small{color:var(--muted);display:block;font-size:11.5px}
/* A coluna de conteúdo é centrada e a largura acompanha o tipo de página:
   formulário e leitura ficam estreitos; tabela, matriz e kanban usam .larga. */
/* ⚠️ O CONTEUDO ESTAVA CENTRALIZADO no espaco que sobra da lateral, com
   `margin:0 auto`. Em tela de 1920 isso dava 318px de vao de CADA lado: a
   coluna flutuava no meio da tela, descolada da barra lateral, e era isso que
   parecia "distancia estranha". Num sistema com lateral fixa, o conteudo
   encosta nela — quem centraliza e site de leitura, nao painel de trabalho.
   O max-width continua, para a linha de texto nao ficar longa demais. */
/* UMA largura para o produto inteiro. Antes eram tres, escolhidas tela a
   tela — a borda direita pulava ate 320px entre Inicio e Larastore, e quem
   usa o dia todo le isso como "a tela muda de tamanho sozinha".
   Linha de texto longa continua protegida por .leitura e .medio, que existem
   para isso: largura de leitura e problema do paragrafo, nao do container. */
.cont{padding:24px 32px;max-width:1560px;width:100%;margin:0}
.cont.larga,.cont.media{max-width:1560px}
@media(min-width:1900px){.cont{max-width:1720px}}

/* ---------- Cartões ---------- */
/* O card genérico virou seção: sem moldura, sem fundo, sem sombra.
   Quem precisa mesmo de caixa usa .card.unidade (ou uma classe própria). */
/* ⚠️ AQUI ESTAVA A "MA ESTRUTURA" DE VERDADE (18/09/2026).
   Eu transformei `.bloco` em painel e estilizei o cabecalho de `.card` junto —
   mas deixei o CORPO do .card sem fundo e sem borda. Resultado: o cabecalho
   ganhava a barra cinza de painel e o conteudo escapava para o fundo da
   pagina, com as curvas de nivel aparecendo por tras dos campos.
   E `.card` esta em 42 telas; `.bloco`, em 6. Ou seja: quase todo o sistema
   estava assim, e eu so tinha olhado as 6.
   Agora os dois sao painel. O cabecalho sangra ate a borda com margem
   negativa, em vez de eu enumerar cada tipo de filho — .card carrega conteudo
   variado demais (formulario, tabela, kanban, grafico) para uma lista fechada. */
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:2px 18px 16px;box-shadow:none;margin-bottom:18px}
.card:last-child{margin-bottom:0}
.card + .card{margin-top:0}
/* .unidade era o jeito antigo de pedir "este card e uma caixa de verdade".
   Agora todo card e, entao ela so ajusta o respiro. */
.card.unidade{padding:18px}
.card.unidade > h2{margin-top:-18px}
/* card que nao quer virar caixa (agrupamento solto dentro de outro painel) */
.card.solto{background:none;border:0;border-radius:0;padding:0;margin-bottom:26px}

/* ---------------------------------------------------------------------------
   AVISO EM DESTAQUE (.aviso-bloco)
   O `.card` foi esvaziado (sem fundo, sem borda, sem padding), mas varias telas
   antigas continuavam pedindo destaque por `style=` inline. Duas quebras:
     - `border:1px solid X` -> a borda aparecia e o texto ENCOSTAVA nela,
       porque o padding do .card e 0 (ex.: "Zona de perigo" no admin);
     - `border-color:X` sem border-width -> o .card zera a borda, entao o
       destaque simplesmente NAO aparecia (plus, inovacao, convidar).
   Aqui o destaque e um fio de 2px na lateral esquerda, com espaco proprio:
   funciona nos dois casos e nao vira caixa colorida.
--------------------------------------------------------------------------- */
.aviso-bloco{background:var(--card2);border:1px solid var(--linha);
  border-left:2px solid var(--muted);border-radius:var(--raio-sm);
  padding:16px 18px;margin-bottom:16px}
.aviso-bloco > :first-child{margin-top:0}
.aviso-bloco > :last-child{margin-bottom:0}
.aviso-bloco.aten{border-left-color:var(--amarelo);background:var(--amarelo-bg,var(--card2))}
.aviso-bloco.perigo{border-left-color:var(--vermelho);background:var(--vermelho-bg)}
.aviso-bloco.info{border-left-color:var(--sec)}
/* `>` de proposito: so o filho DIRETO da grade perde a margem. Com o seletor
   descendente, qualquer .card aninhado dentro de uma coluna tambem zerava — e
   as secoes empilhadas de colaborador.html, chamados_dados.html e admin.html
   ficavam coladas umas nas outras, sem espaco e sem fio separando. */
.grid > .card{margin-bottom:0}
.card h2, .bloco > h2{font-family:var(--fonte-tit);margin:0 0 12px;font-size:13.5px;font-weight:700;
  letter-spacing:.02em;color:var(--navy);display:flex;align-items:center;gap:9px;
  padding-bottom:7px;border-bottom:1px solid var(--linha)}
.card h2 .cont-dir, .bloco > h2 .cont-dir{margin-left:auto;font-weight:500;font-size:12px;color:var(--muted)}
.card .sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}.cont{padding:18px}}

/* ---------------------------------------------------------------------------
   MENU NO CELULAR (gaveta)
   A regra antiga era `.side{display:none}` abaixo de 920px — e NAO existia
   hamburguer, gaveta nem menu alternativo no base.html. Resultado: quem abria
   no celular e saia do Inicio nao tinha como navegar para lugar nenhum, so o
   botao voltar do navegador. Numa intranet em que feed e humor do dia sao
   justamente uso de celular, isso derrubava metade do produto.
   Agora a barra vira gaveta: continua fora do fluxo, mas o botao a traz.
--------------------------------------------------------------------------- */
.menu-btn{display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;background:none;border:1px solid var(--linha);
  border-radius:var(--raio-sm);color:var(--navy);cursor:pointer;padding:0}
.menu-btn .ic{width:20px;height:20px}
.menu-cortina{position:fixed;inset:0;background:rgba(0,26,38,.42);z-index:39;
  opacity:0;pointer-events:none;transition:opacity var(--t) var(--curva,ease)}
.menu-cortina.on{opacity:1;pointer-events:auto}
@media(max-width:900px){
  .menu-btn{display:inline-flex}
  /* gaveta: fica fora do fluxo e entra por cima, entao o conteudo NAO leva
     margem — senao sobraria uma faixa vazia de 280px com a gaveta fechada */
  .main{margin-left:0}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;width:280px;
    height:100%;transform:translateX(-100%);transition:transform var(--t-painel,.22s) var(--curva,ease)}
  .side.aberto{transform:translateX(0)}
  /* o atalho de busca vai junto para dentro da gaveta (antes sumia de vez) */
  .side .k-atalho{display:flex}
}
@media (prefers-reduced-motion: reduce){
  .side,.menu-cortina{transition:none}
}

/* era uma tarja amarela cheia; virou bloco quieto com fio na lateral —
   a informacao continua, o berrante sai (mesma regra do Buscador) */
.aviso{display:flex;align-items:center;gap:12px;background:var(--card2);
  border:0;border-left:2px solid var(--amarelo);border-radius:0;
  padding:12px 16px;margin-bottom:18px}
.aviso span{font-size:18px;opacity:.75}.aviso p{font-size:13.5px;color:var(--txt2)}
.aviso a{color:#8a5a00}   /* 5,27:1 no cinza do bloco (o #9c6100 dava 4,48) */

/* Campo de avisos no Início */
.aviso-box{padding:16px 18px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-sm);margin-bottom:16px}
.ab-cab{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--fonte-tit)}
.ab-cab i{width:18px;height:18px;color:var(--sec-esc)}
.ab-cab b{font-size:15px;color:var(--navy)}
.ab-item{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--linha2)}
.ab-item:first-of-type{border-top:0}
.ab-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:8px;flex:0 0 6px}
.ab-txt{font-size:14px;color:var(--txt);white-space:pre-wrap}

/* ---------- Botões ---------- */
/* Assinatura Larafy: ciano chapado, texto branco, flat (sem sombra) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--acao);color:#fff;
  border:1px solid var(--acao);border-radius:4px;padding:9px 16px;font-weight:500;font-size:13.5px;cursor:pointer;
  transition:background .12s;font-family:inherit;
}
.btn:hover{background:var(--acao-esc);text-decoration:none}
.btn.sec{background:var(--card);color:var(--navy);border:1px solid var(--linha)}
.btn.sec:hover{background:var(--card2);border-color:var(--navy)}
.btn.ok{background:var(--verde)}
.btn.ok:hover{background:#0ea472}
.btn.no{background:var(--card);border:1px solid #f3caca;color:var(--vermelho)}
.btn.no:hover{background:var(--vermelho-bg)}
.liberar-box{margin-top:12px;border-top:1px solid var(--linha2);padding-top:12px;display:flex;flex-direction:column;gap:7px}
.lb-tit{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.secao-pdi{font-family:var(--fonte-tit);font-size:14px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;
  margin:6px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--linha)}
.secao-pdi .ic{width:17px;height:17px;color:var(--acao)}
.secao-pdi small{font-weight:600;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:2px}
/* cabeçalho de seção padrão (reaproveitado no TI e afins) */
.secao{font-family:var(--fonte-tit);font-size:14px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--linha)}
.secao:first-child{margin-top:0}
.secao .ic{width:17px;height:17px;color:var(--acao)}
.secao small{font-weight:600;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0}
.toolbar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.form-sub{font-family:var(--fonte-tit);font-size:12.5px;font-weight:700;color:var(--navy);margin:20px 0 6px;display:flex;align-items:center;gap:7px}
.form-sub .ic{width:15px;height:15px;color:var(--acao)}
/* tabela ficha (chave/valor) — leve, sem cara de dump */
table.ficha td{padding:9px 0;border-bottom:1px solid var(--linha2);vertical-align:top}
table.ficha td:first-child{color:var(--muted);width:160px;font-size:12.5px;text-transform:none;letter-spacing:0}
table.ficha tr:last-child td{border-bottom:0}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.check-card{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio-sm);
  cursor:pointer;font-size:13.5px;background:var(--card);transition:.12s}
.check-card:hover{border-color:var(--acao)}
.check-card.on{border-color:var(--acao);background:var(--sec-bg)}
.check-card input{width:16px;height:16px;flex-shrink:0;accent-color:var(--acao)}
.check-card small{color:var(--muted)}
/* medidor de score horizontal (avaliador) — legível em card estreito */
.score-mini{display:flex;align-items:center;gap:14px;margin:12px 0 4px}
.score-mini .num{font-family:var(--fonte-tit);font-size:32px;font-weight:800;line-height:1;min-width:56px;text-align:center}
.score-mini .meta{flex:1;min-width:0}
.score-mini .faixa{font-family:var(--fonte-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:6px}
.score-bar{height:8px;border-radius:5px;background:var(--linha);overflow:hidden}
.score-bar > span{display:block;height:100%;border-radius:5px;transition:width .3s}
.score-mini .escala{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.3px;font-family:var(--fonte-mono);letter-spacing:.1em}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:4px}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}

/* ---------- Formulários ---------- */
label{display:block;font-size:12.5px;color:var(--txt2);margin:13px 0 6px;font-weight:600}
input,textarea,select{
  width:100%;background:var(--card);border:1px solid var(--linha);color:var(--txt);
  border-radius:4px;padding:11px 13px;font-size:14px;font-family:inherit;transition:.12s;
}
/* FOCO VISIVEL: o `outline:0` daqui vencia por especificidade a regra boa la
   embaixo, e sobrava so uma borda ciano (#00e5ff) sobre fundo branco —
   contraste 1,6:1, quando o minimo e 3:1 — mais um halo quase invisivel. Quem
   navega por Tab (por deficiencia ou por velocidade) nao sabia em que campo
   estava. O realce de cor fica; o contorno volta. */
input:focus,textarea:focus,select:focus{border-color:var(--sec);box-shadow:0 0 0 3px var(--sec-bg)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{resize:vertical;min-height:82px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1;min-width:150px}
.hr{border:0;border-top:1px solid var(--linha2);margin:18px 0}

/* ---------- Chips ---------- */
.chip{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11.5px;font-weight:500;background:var(--linha2);color:var(--txt2);border:1px solid var(--linha)}
.chip.v{background:var(--verde-bg);color:var(--verde)}
.chip.a{background:var(--amarelo-bg);color:var(--amarelo)}
.chip.r{background:var(--vermelho-bg);color:var(--vermelho)}
.chip.c{background:var(--ciano-bg);color:var(--ciano-esc)}
.chip.p{background:var(--roxo-bg);color:var(--roxo)}

/* ---------- Flash ---------- */
.flashes{position:fixed;top:18px;right:18px;z-index:50;display:flex;flex-direction:column;gap:10px;max-width:370px}
/* [hidden] PRECISA vencer o display:flex daqui de baixo. Sem esta linha o
   botao "x" nao fechava o aviso e o aviso de sucesso nunca sumia: o navegador
   tem [hidden]{display:none}, mas regra do autor (.flash) ganha da regra do
   navegador. No celular a faixa fica fixa no topo, largura toda, z-index 50 —
   ou seja, ficava por cima do botao do MENU e a pessoa nao conseguia navegar
   ate recarregar a pagina. */
[hidden]{display:none !important}
.flash{padding:13px 17px;border-radius:4px;font-weight:600;font-size:13.5px;box-shadow:var(--sombra);animation:cai .3s;border:1px solid;
  display:flex;align-items:flex-start;gap:12px}
.flash > span{flex:1}
/* botao de fechar com alvo de 24x24 (o minimo para dedo) */
.flash-x{background:none;border:0;cursor:pointer;color:inherit;opacity:.65;
  font-size:19px;line-height:1;padding:0;min-width:24px;min-height:24px;font-family:inherit}
.flash-x:hover{opacity:1}
.flash.ok{background:var(--verde-bg);border-color:#bce9d6;color:#0a7a54}
.flash.erro{background:var(--vermelho-bg);border-color:#f5c6c6;color:#c0392b}
@keyframes cai{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

/* ---------- Missões do dia (Início cockpit) ---------- */
.missao{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--linha2)}
.missao:first-of-type{border-top:0}
.ms-ic{color:var(--muted);display:flex}
.ms-ic i{width:22px;height:22px}
.missao.ok .ms-ic{color:var(--verde)}
.ms-txt{flex:1;font-weight:600;font-size:14px;color:var(--navy);display:flex;align-items:center;gap:8px}
.missao.ok .ms-txt{color:var(--muted);text-decoration:line-through}
.ms-pts{font-family:var(--fonte-texto);font-size:11.5px;font-weight:600;color:var(--txt2);
  font-variant-numeric:tabular-nums;background:var(--linha2);padding:1px 7px;border-radius:3px;margin-left:8px}
.ms-humor{display:flex;gap:4px}
.ms-humor .hm-btn{width:34px;height:34px;font-size:18px;border-radius:4px}

/* ---------- Humor compacto (Início) ---------- */
.humor-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;flex-wrap:wrap}
.hc-q{display:flex;flex-direction:column;line-height:1.3}
.hc-q b{font-family:var(--fonte-tit);font-size:15px;color:var(--navy)}
.hc-q span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.humor-mini{display:flex;gap:6px}
.hm-btn{width:42px;height:42px;border-radius:4px;border:1.5px solid var(--linha);background:var(--card);
  font-size:22px;cursor:pointer;transition:.14s;line-height:1;display:grid;place-items:center;padding:0}
.hm-btn:hover{border-color:var(--navy);background:var(--card2)}
/* Humor médio (padrão) — carinha + rótulo */
.humor-mid{display:flex;gap:9px}
.hmd-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;
  border-radius:6px;border:1.5px solid var(--linha);background:var(--card);cursor:pointer;
  transition:.14s;font-family:inherit}
.hmd-btn .e{font-size:28px;line-height:1;transition:.14s}
.hmd-btn .l{font-size:11px;color:var(--txt2);font-weight:600}
.hmd-btn:hover{border-color:var(--sec);background:var(--sec-bg)}
.hmd-btn:hover .e{transform:scale(1.12)}

/* ---------- Humor seletor ---------- */
.humor-op{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.humor-op label{
  flex:1;min-width:88px;text-align:center;background:var(--card2);border:2px solid var(--linha);
  border-radius:6px;padding:14px 8px;cursor:pointer;margin:0;transition:.15s;
}
.humor-op label:hover{border-color:var(--ciano);background:var(--ciano-bg)}
.humor-op input{display:none}
.humor-op label:has(input:checked){border-color:var(--navy);background:var(--ciano-bg);box-shadow:none}
.humor-op .emo{display:block;line-height:0;color:var(--txt2);margin-bottom:6px}
.humor-op .emo svg{width:26px;height:26px;stroke-width:1.6}
.humor-op label:has(input:checked) .emo{color:var(--navy)}
/* icone de humor no meio do texto */
.ic-humor{width:16px;height:16px;stroke-width:1.75;vertical-align:-3px}
.hm-btn svg{width:20px;height:20px;stroke-width:1.6}
.humor-op .lb{font-size:11.5px;color:var(--txt2);margin-top:5px;display:block;font-weight:600}

/* ---------- Post do feed ---------- */
/* POST = CARTAO  (18/09/2026, no formato do Facebook)
   Antes era so um fio separando um post do outro. Dois posts seguidos sem
   foto viravam um bloco unico de texto: nao dava para ver onde um acabava e
   o outro comecava. Agora cada um e um retangulo branco com 12px de folga.
   A barra de acoes e os comentarios estao no FIM deste arquivo — veja la o
   porque. */
.post{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px;margin:0 0 12px;box-shadow:none}
.post:first-of-type{border-top:1px solid var(--linha);padding-top:16px}
.post .cab{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.post .cab b{font-size:14.5px}
.post .cab small{color:var(--muted);font-size:12px}
.post .txt{font-size:14.5px;white-space:pre-wrap;color:var(--txt)}
.post .acoes{display:flex;gap:6px;margin-top:13px;padding-top:11px;border-top:1px solid var(--linha2)}
.post .acoes button{background:none;border:0;color:var(--txt2);cursor:pointer;font-weight:600;font-size:13px;padding:6px 11px;border-radius:4px;font-family:inherit;transition:.12s}
.post .acoes button:hover{background:var(--card2);color:var(--ciano-esc)}
.coment{display:flex;gap:9px;margin-top:11px;font-size:13.5px}
.coment .balao{background:var(--card2);border-radius:4px;padding:9px 13px;flex:1}
.coment .balao b{font-size:13px}

/* ---------- Kanban / mini cards ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:920px){.kanban{grid-template-columns:1fr}}
.col{background:var(--card2);border:1px solid var(--linha);border-radius:6px;padding:12px;min-height:120px}
.col h3{font-size:12.5px;margin:0 0 10px;color:var(--txt2);font-weight:700}
.mini{background:var(--card);border:1px solid var(--linha);border-radius:4px;padding:12px;margin-bottom:8px;font-size:13px;box-shadow:var(--sombra-sm)}
.mini b{display:block;font-size:13.5px;margin-bottom:2px}

/* ---------- Tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:13.8px}
/* Tabela do kit: cabecalho miudo em mono, fio claro entre linhas.
   Antes o cabecalho era Plex Sans peso 700 — a coluna de numero nao alinhava. */
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--linha2)}
th:first-child,td:first-child{padding-left:2px}
th{font-family:var(--fonte-mono);color:var(--muted);font-size:9.5px;
   text-transform:uppercase;letter-spacing:.13em;font-weight:500;
   padding-bottom:8px;border-bottom:1px solid var(--linha)}
td{color:var(--txt2)}
td:first-child{color:var(--txt)}
tbody tr:last-child td,table tr:last-child td{border-bottom:0}
tr:hover td{background:var(--card2)}

/* ---------- Ranking ---------- */
.rk{display:flex;align-items:center;gap:14px;padding:11px 2px;border-radius:0;margin:0;
  background:none;border:0;border-top:1px solid var(--linha2);box-shadow:none}
.rk:first-of-type{border-top:0}
.rk .pos{font-size:17px;font-weight:800;width:40px;text-align:center;color:var(--muted)}
.rk.top1 .pos{color:#B07E12;font-weight:700}
.rk.top2{border-color:#d3dae3}
.rk.top3{border-color:#e8b98a}
.rk.eu{background:var(--card2);box-shadow:inset 2px 0 0 var(--navy)}
.rk .nm{flex:1}.rk .nm small{color:var(--muted);display:block;font-size:12px}
.rk .pt{font-weight:800;color:var(--ciano-esc);font-size:16px}

/* ---------- Loja ---------- */
.premio{position:relative;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:22px;display:flex;flex-direction:column;height:100%;box-shadow:var(--sombra-sm);transition:.16s}
.premio:hover{border-color:var(--navy)}
.premio-ic{width:26px;height:26px;background:none;color:var(--muted);display:grid;
  place-items:center;margin-bottom:10px}
.premio-ic i{width:26px;height:26px;stroke-width:1.8}
.premio h3{margin:0 0 5px;font-size:15.5px}
.premio .ds{color:var(--muted);font-size:12.5px;flex:1;margin-bottom:16px;line-height:1.45}
.premio .custo{display:inline-flex;align-items:center;gap:6px;font-family:var(--fonte-tit);font-weight:800;color:var(--navy);font-size:20px;margin-bottom:14px}
.premio .custo i{color:var(--sec-esc)}
.premio-plus{border-color:#bfeff8;background:#f4fdff}
.premio-plus .premio-ic{background:var(--sec);color:var(--navy)}
.tag-plus{position:absolute;top:14px;right:14px;background:var(--sec);color:var(--navy);font-family:var(--fonte-tit);font-weight:800;font-size:10px;letter-spacing:1px;padding:3px 9px;border-radius:3px}
/* Prêmio bloqueado (Larastore trancada): cinza claro, sem hover, 100% não-clicável */
.premio.indisponivel{background:var(--card2);border-color:var(--linha2);opacity:.6;filter:grayscale(1);
  pointer-events:none;cursor:not-allowed;user-select:none;box-shadow:none}
.premio.indisponivel *{pointer-events:none !important;cursor:not-allowed !important}
.premio.indisponivel:hover{transform:none;box-shadow:none;border-color:var(--linha2)}
.premio.indisponivel .premio-ic{background:var(--linha2);color:var(--muted)}
.premio.indisponivel h3,.premio.indisponivel .custo,.premio.indisponivel .custo i{color:var(--muted)}
.premio.indisponivel .tag-plus{background:var(--muted)}
.premio.indisponivel .btn{background:transparent;box-shadow:none;border:1px dashed var(--linha);color:var(--muted)}

/* REGRA DE NUMERO (09/2026), depois de medir o site:
     numero de DESTAQUE  -> --fonte-tit  (Space Grotesk), com tabular-nums
     numero no meio do texto -> --fonte-texto (Inter), com tabular-nums
     monoespacada (Geist Mono) -> SO rotulo, atalho de teclado e cabecalho de
       tabela. O site NAO usa mono em numero, e era isso que fazia a intranet
       parecer outra coisa. tabular-nums e o que fixa a largura do digito para
       o valor nao "dancar" quando muda — mono nao e necessario para isso. */

/* ---------- Stats (redesenho 09/2026) ----------
   O manual da marca proibe, com estas palavras: "Nada de quatro cartoes iguais
   em grade", "Numero grande sem caixa em volta" e, na lista de clichês,
   "icone dentro de bolinha colorida". O .stat era exatamente as tres coisas —
   caixa com borda e 20px de padding, numero dentro, e no .stat-ic um quadrado
   de 46px em ciano com o icone no meio. Era o sinal numero um de "cara de IA"
   que sobrava na tela, em 5 telas.

   Agora: sem caixa. Um fio de 1px separa um numero do outro, e a linha toda
   tem um fio embaixo. Separa igual e ocupa 1px.

   O numero saiu da MONO: mono e para dado tecnico (CNPJ, chave de nota,
   codigo, atalho de teclado), nao para KPI. Numero e IBM Plex Sans 600 com
   tabular-nums, que ja fixa a largura do digito — assim o valor nao "danca"
   quando muda. Montserrat continua so em titulo. */
.stat{background:none;border:0;border-left:1px solid var(--linha2);border-radius:0;
  padding:2px 0 2px 20px;box-shadow:none}
/* Fio so ENTRE os numeros, nunca abrindo fileira. :first-child sozinho nao
   resolve: ele pega o primeiro de TODOS, e numa grade de 3 com 6 itens o 4o
   comeca fileira nova e ficava com um risco solto na margem esquerda. Como as
   colunas sao declaradas na classe (.c2/.c3/.c4), da para mirar o primeiro de
   cada fileira pelo nth-child. */
.grid > .stat:first-child,.grid > a.stat:first-child,
.grid.c2 > .stat:nth-child(2n+1),.grid.c2 > a.stat:nth-child(2n+1),
.grid.c3 > .stat:nth-child(3n+1),.grid.c3 > a.stat:nth-child(3n+1),
.grid.c4 > .stat:nth-child(4n+1),.grid.c4 > a.stat:nth-child(4n+1){
  padding-left:0;border-left:0}
.stat .n{font-family:var(--fonte-tit);
  font-size:28px;font-weight:600;color:var(--navy);line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--fonte-mono);font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-top:6px}
/* icone sem bolinha: traco solto, do tamanho do texto, na cor da tinta fraca */
.stat-ic{display:flex;align-items:center;gap:12px}
.stat-ic .n{margin:0}.stat-ic .l{margin-top:2px}
.stat-ic .si{width:auto;height:auto;flex:0 0 auto;border-radius:0;background:none;
  color:var(--muted);display:grid;place-items:center}
.stat-ic .si i,.stat-ic .si svg{width:20px;height:20px;stroke-width:1.75}
a.stat-ic{transition:color var(--t-micro) var(--curva)}
a.stat-ic:hover{border-color:var(--linha2)}
a.stat-ic:hover .n{color:var(--sec-esc)}
a.stat-ic:hover .si{color:var(--sec-esc)}
@media(max-width:760px){
  /* empilhado no celular o fio da esquerda nao separa nada: vira fio em cima */
  .stat{border-left:0;padding-left:0;border-top:1px solid var(--linha2);padding-top:14px}
  .grid > .stat:first-child{border-top:0;padding-top:2px}
}
.vazio{text-align:left;color:var(--muted);padding:14px 0;font-size:13.5px}
.vazio b{display:block;color:var(--txt);font-weight:600;font-size:14px;margin-bottom:2px}
.vazio .em{display:none}

ul,ol{padding-left:20px}ul li,ol li{margin:5px 0}

/* ---------- Avaliação: critérios e notas ---------- */
.criterio{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--linha2)}
.notas{display:flex;gap:6px}
.notas label{margin:0;cursor:pointer}
.notas input{display:none}
.notas span{display:grid;place-items:center;width:38px;height:38px;border-radius:4px;border:1.5px solid var(--linha);font-weight:700;color:var(--txt2);transition:.12s;font-size:14px}
.notas label:hover span{border-color:var(--ciano)}
.notas label:has(input:checked) span{background:var(--ciano);border-color:var(--ciano);color:#fff}
.notas.pot span{width:auto;padding:0 16px}

/* ---------- Avaliação 1-10 (soft/hard + validação) ---------- */
.cat-titulo{font-family:var(--fonte-tit);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--sec-esc);margin:16px 0 6px;padding-bottom:6px;border-bottom:2px solid var(--sec-bg)}
.aval-item{padding:12px 0;border-top:1px solid var(--linha2)}
.aval-item:first-of-type{border-top:0}
.ai-top{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.ai-top b{flex:1}
.ai-num{width:24px;height:24px;flex:0 0 24px;border-radius:6px;background:var(--marca-suave);color:var(--navy);
  display:grid;place-items:center;font-weight:800;font-size:12px}
.nota10{width:92px;flex:0 0 92px;font-weight:700;color:var(--navy)}
.aval-tab td,.aval-tab th{vertical-align:middle}
.aval-tab .nota10{width:80px}
.nota-auto{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:4px;
  background:var(--sec-bg);border:1px solid #cdeef5;font-weight:800;color:var(--sec-esc);font-size:13px}
.resp-pessoa{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:12.5px;color:var(--txt2)}
.resp-pessoa > span:last-child{font-style:italic}

/* ---------- Nine Box ---------- */
.ninebox-wrap{position:relative;padding-left:26px;padding-bottom:26px}
.eixo-y{position:absolute;left:0;top:0;bottom:26px;writing-mode:vertical-rl;transform:rotate(180deg);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}
.eixo-x{position:absolute;left:26px;right:0;bottom:0;text-align:center;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}
.ninebox{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);
  border:1px solid var(--linha)}
.nb-cell{border-radius:0;padding:14px;min-height:150px;border:0;background:var(--card)}
.nb-cell.cor-v{background:var(--verde-bg);border-color:#bce9d6}
.nb-cell.cor-c{background:var(--ciano-bg);border-color:#cdeef5}
.nb-cell.cor-a{background:var(--amarelo-bg);border-color:#f7e4bd}
.nb-cell.cor-r{background:var(--vermelho-bg);border-color:#f5c6c6}
.nb-head b{font-size:13.5px;display:block}
.nb-head small{font-size:11px;color:var(--txt2)}
.nb-people{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.nb-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--linha);
  border-radius:3px;padding:3px 10px 3px 3px;font-size:12px;font-weight:600;color:var(--txt)}
.nb-vazio{color:var(--muted);font-size:12px}

/* ---------- Barra / progresso ---------- */
.barra{height:8px;background:var(--linha2);border-radius:3px;overflow:hidden;margin-top:6px}
.barra > span{display:block;height:100%;background:var(--serie-1)}

/* ---------- Login ---------- */
/* O CSS do login antigo (.login-box, .login-card, .gbtn, .sep) saiu daqui:
   as quatro telas de acesso vivem no acesso_base.html desde o redesenho de
   09/2026 e nenhuma usava mais estas regras. Uma delas era pior que morta —
   `body.login-page{background:var(--marca)}` mandava o fundo do login ser
   NAVY, e so nao valia porque o <style> da tela vem depois no documento:
   duas instrucoes brigando pela mesma coisa, com a certa dependendo da
   ordem em que o navegador le. */
code{background:var(--card2);border:1px solid var(--linha);border-radius:6px;padding:1px 6px;font-size:12.5px}
details summary{list-style:none}details summary::-webkit-details-marker{display:none}
.saldo i{stroke-width:2.5}

/* ---------- Abas (feedback) ---------- */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--linha);padding-bottom:0}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--txt2);font-weight:600;
  font-size:14px;padding:10px 14px;cursor:pointer;font-family:inherit;margin-bottom:-1px}
.tab:hover{color:var(--txt)}
.tab.ativa{color:var(--ciano-esc);border-bottom-color:var(--ciano)}

/* ---------- Tipos de feedback ---------- */
.tipo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:8px 0}
@media(max-width:600px){.tipo-grid{grid-template-columns:1fr}}
.tipo-op{margin:0;cursor:pointer}
.tipo-op input{display:none}
.tipo-op > div{border:1.5px solid var(--linha);border-radius:4px;padding:12px;transition:.12s;height:100%}
.tipo-op > div b{font-size:13.5px;display:block}
.tipo-op > div small{font-size:11.5px;color:var(--muted)}
.tipo-op:hover > div{border-color:var(--ciano)}
.tipo-op:has(input:checked) > div{border-color:var(--ciano);background:var(--ciano-bg)}
.check{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--txt2);margin-top:12px}
.check input{width:auto}

/* ---------- Card de feedback ---------- */
.fb-card{background:none;border:0;border-top:1px solid var(--linha2);border-radius:0;
  padding:15px 0;margin:0;box-shadow:none}
.fb-card:first-of-type{border-top:0}
.fb-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px}
.fb-top b{font-size:14px}
.fb-top .chip{margin:6px 6px 0 0}
.fb-msg{font-size:14.5px;color:var(--txt);white-space:pre-wrap;padding-left:49px}
@media(max-width:600px){.fb-msg{padding-left:0}}

/* ================= FEED estilo Facebook/Feedz ================= */
.feed-wrap{max-width:640px;margin:0 auto}
.mencao{color:var(--ciano-esc);font-weight:600;background:var(--ciano-bg);padding:0 3px;border-radius:4px}

/* Compositor */
/* A caixa de publicar e um cartao igual aos posts. Solta, com os posts
   em cartao embaixo, ela ficava boiando na pagina. */
.composer{padding:14px 16px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);margin-bottom:12px}
/* flex-wrap:wrap — as tres abas (Publicar / Conquista / Aviso) somam
   360px e nao quebravam. Era ELAS que seguravam a coluna inteira do
   feed em 360px: num telefone de 360 a pagina vazava 16px para o lado
   (medido, escondendo uma por uma). Vem de antes do cartao; o cartao
   so deixou o vazamento visivel. */
.comp-tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.ct{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--txt2);font-weight:600;
  font-size:13.5px;padding:8px 12px;border-radius:4px;cursor:pointer;font-family:inherit}
.ct i{width:16px;height:16px}
.ct:hover{background:var(--card2)}
.ct.ativa{background:var(--ciano-bg);color:var(--ciano-esc)}
.composer textarea{border:1px solid var(--linha);background:var(--card);border-radius:3px;
  padding:11px 13px;min-height:48px;resize:none}
.composer textarea:focus{box-shadow:0 0 0 2px var(--ciano-bg)}
.comp-bar{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;border-top:1px solid var(--linha2);padding-top:12px}
.comp-act{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--txt2);font-weight:600;
  font-size:13px;padding:8px 12px;border-radius:4px;cursor:pointer;font-family:inherit;margin:0}
.comp-act i{width:17px;height:17px;color:var(--ciano-esc)}
.comp-act:hover{background:var(--card2)}
.comp-sel{max-width:220px}
.post-midia{max-width:100%;width:auto;height:auto;max-height:85vh;border-radius:6px;margin:12px auto 0;object-fit:contain;display:block;border:1px solid var(--linha2)}
#preview-midia .post-midia{max-height:300px}

/* Post */
.post{position:relative}
.post-flag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--amarelo);
  background:var(--amarelo-bg);padding:4px 10px;border-radius:3px;margin-bottom:12px}
.post-flag i{width:14px;height:14px}
.post-flag.conq{color:var(--verde);background:var(--verde-bg)}
.post-aviso{border-color:#f7e4bd;background:#fffdf7}
.post-conquista{border-color:#bce9d6}
.react-sum{display:flex;align-items:center;gap:2px;font-size:12.5px;color:var(--muted);margin-top:12px;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.react-sum span{font-size:15px}
.react-sum:hover{color:var(--txt2)}

/* ===================== MENU DE REACOES — 09/2026 =====================
   Reescrito porque "estava ruim de reagir a publicacoes". Cinco coisas
   somadas atrapalhavam:

   1) O EMOJI ERA DESENHADO EM 13px. Esta era a principal, e a mais dificil
      de enxergar: `.post .acoes button{font-size:13px}` tem DUAS classes e
      ganha de `.react-pop button`, que tem UMA — nao importa quem vem depois
      no arquivo. A caixa de toque era grande, mas o desenho dentro dela era
      minusculo, e gente mira no que enxerga, nao na caixa invisivel. Por isso
      as regras daqui de baixo comecam com `.post .acoes` (tres classes): so
      assim elas valem de verdade. NAO troque por !important.
   2) Abria no HOVER e tambem no clique. No celular o toque vira hover
      sintetico e o menu piscava: abria e fechava sozinho. Agora e so clique.
   3) O `margin-bottom` criava um VAO entre o botao e o menu: ao subir o mouse
      ate os emojis o ponteiro atravessava esse buraco e o menu fechava na
      cara da pessoa. O espaco virou padding do proprio menu.
   4) O alvo de cada emoji tinha ~30x26px, menos da metade do minimo para
      dedo. Agora 44x44 no celular.
   5) O emoji CRESCIA 15% no hover, ou seja, o alvo fugia na hora de clicar.
      Virou mudanca de fundo, que nao mexe no alvo.
   ==================================================================== */
.acoes{position:relative}
.react-btn{position:relative;display:inline-block}
.post .acoes .react-btn > button{font-size:13px;padding:8px 12px;min-height:40px}
/* "Reagiu" precisa ser VISIVELMENTE diferente de "Reagir". So mudar a cor do
   texto nao servia: --ciano-esc hoje e navy quase preto e ficava igual ao
   estado de hover, entao passar o mouse num post parecia "ja reagi". Agora o
   estado ligado tem fundo proprio, igual ao sino de notificacao. */
.post .acoes .react-btn > button.on{background:var(--sec-bg);color:var(--sec-esc)}
.post .acoes .react-btn > button:hover,
.post .acoes .react-btn.aberto > button{background:var(--card2)}
@media(max-width:600px){.post .acoes .react-btn > button{min-height:44px}}

.react-pop{position:absolute;bottom:100%;left:0;margin:0;padding:6px 8px 12px;
  background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:var(--sombra-lg);display:none;gap:2px;z-index:6;
  /* com fonte do sistema aumentada os emojis crescem junto. Sem isto o menu
     estourava a largura da tela e, como o celular tem overflow-x:hidden, os
     ultimos emojis eram CORTADOS e ficavam impossiveis de tocar. Agora quebra
     em duas fileiras. */
  max-width:calc(100vw - 24px);flex-wrap:wrap}
.react-btn.aberto .react-pop{display:flex}
.react-pop form{margin:0}
.post .acoes .react-pop button{background:none;border:0;font-size:24px;cursor:pointer;
  padding:6px 8px;border-radius:var(--raio-sm);line-height:1;
  min-width:40px;min-height:40px;
  transition:background var(--t-micro) var(--curva)}
.post .acoes .react-pop button:hover,
.post .acoes .react-pop button:focus-visible{background:var(--card2)}
@media(max-width:600px){
  .react-pop{left:-8px;padding:8px 10px 14px}
  .post .acoes .react-pop button{min-width:44px;min-height:44px;font-size:26px}
}
.shared{border:1px solid var(--linha);border-radius:6px;padding:12px;margin-top:12px;background:var(--card2)}

/* ---------- Topo: busca + sino ---------- */
.busca{display:flex;align-items:center;gap:7px;background:none;border:0;
  border-bottom:1px solid var(--linha);border-radius:0;padding:5px 2px;color:var(--muted);
  font-size:13px;width:180px}
.busca:focus-within{border-bottom-color:var(--navy)}
/* o campo do topo agora e um gatilho da busca Ctrl+K (readonly), entao o
   cursor precisa dizer "clicavel" e nao "digite aqui" */
.busca input{border:0;background:none;padding:0;font-size:13.5px;cursor:pointer}
.busca input:focus{box-shadow:none}
.sino{position:relative;width:40px;height:40px;border-radius:4px;background:var(--card2);border:1px solid var(--linha);
  display:grid;place-items:center;color:var(--txt2);cursor:pointer}
.sino:hover{background:var(--sec-bg);color:var(--sec-esc)}
.sino .pip{position:absolute;top:-4px;right:-4px;background:var(--vermelho);color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:3px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--card)}
.sino-wrap{position:relative}
.notif-drop{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:var(--card);border:1px solid var(--linha);
  border-radius:6px;box-shadow:var(--sombra-lg);z-index:20;display:none;overflow:hidden}
.notif-drop.aberto{display:block}
.nd-cab{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--linha2)}
.nd-cab b{font-size:15px}.nd-cab a{font-size:12px}
.nd-item{display:flex;gap:11px;padding:12px 16px;align-items:flex-start;color:var(--txt);border-bottom:1px solid var(--linha2)}
.nd-item:hover{background:var(--card2);text-decoration:none}
.nd-item.nova{background:var(--marca-suave)}
.nd-item div div{font-size:13.5px;line-height:1.35}
.nd-item small{color:var(--muted);font-size:11.5px}
.nd-ic{width:32px;height:32px;border-radius:4px;background:var(--ciano-bg);color:var(--ciano-esc);display:grid;place-items:center;flex:0 0 32px}
.nd-vazio{padding:26px;text-align:center;color:var(--muted);font-size:13px}
.nd-ver{display:block;text-align:center;padding:11px;font-size:13px;font-weight:600}

/* ---------- Organograma (Equipes) ---------- */
.tree{padding:10px 0;min-width:max-content}
.tree ul{position:relative;padding-top:26px;display:flex;justify-content:center;gap:6px;list-style:none;margin:0}
.tree li{position:relative;padding:26px 10px 0;text-align:center}
/* linhas conectoras */
.tree li::before,.tree li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid var(--linha);width:50%;height:26px}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--linha)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--linha);border-radius:0 6px 0 0}
.tree li:first-child::after{border-radius:6px 0 0 0}
.tree ul ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid var(--linha);width:0;height:26px}
.org-node{display:inline-flex;flex-direction:column;align-items:center;gap:4px;position:relative;
  background:var(--card);border:1px solid var(--linha);border-radius:6px;padding:14px 16px 12px;
  min-width:150px;box-shadow:var(--sombra-sm)}
.org-node .av{margin-bottom:2px}
.org-nome{font-family:var(--fonte-tit);font-weight:700;font-size:13.5px;color:var(--navy);line-height:1.2}
.org-cargo{font-size:11.5px;color:var(--muted)}
.org-tag{margin-top:4px;font-size:10px;font-weight:700;padding:2px 9px;border-radius:3px;text-transform:uppercase;letter-spacing:.4px}
.org-tag.adm{background:var(--roxo-bg);color:var(--roxo)}
.org-tag.ges{background:var(--sec-bg);color:var(--sec-esc)}
.papel-lider .org-node,.org-node.papel-lider{border-color:#cdeef5}
.papel-admin .org-node,.org-node.papel-admin{border-color:var(--roxo-bg)}
.org-empresa{background:var(--marca);border:0;color:#fff;min-width:170px}
.org-empresa .org-cargo{color:rgba(255,255,255,.8);letter-spacing:2px;text-transform:uppercase;font-size:10px;font-weight:700}
.org-logo{height:24px;filter:brightness(0) invert(1)}

/* ---------- PDI: tarefas / subtarefas + anexo ---------- */
.pdi-tarefas{margin-top:12px;border-top:1px solid var(--linha2);padding-top:10px}
.tarefa{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--linha2)}
.tarefa.sub{margin-left:30px;border-bottom:0;padding:6px 0}
.tarefa.sub .tk-titulo{font-size:13.5px;color:var(--txt2)}
.tk-ic{color:var(--muted);display:flex;margin-top:1px}
.tk-ic i{width:20px;height:20px}
.tarefa.ok .tk-ic{color:var(--verde)}
.tk-body{flex:1;min-width:0}
.tk-titulo{font-weight:600;font-size:14px;color:var(--navy)}
.tarefa.ok .tk-titulo{color:var(--muted);text-decoration:line-through}
.tk-prova{display:flex;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap}
.tk-concluir{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.anexo-btn{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--sec-esc);background:var(--sec-bg);padding:6px 12px;border-radius:4px;border:1px solid #cdeef5}
.anexo-btn:hover{filter:brightness(.97)}
.add-sub{display:flex;gap:6px;margin:4px 0 8px 30px}
.add-sub input{font-size:13px;padding:7px 10px}
/* alvo minimo de 24x24: este e o botao de REMOVER avaliador (um "x") e o de
   limpar filtro. Com padding 0 e fonte 12px o alvo tinha ~16px de altura —
   botao destrutivo desse tamanho no celular e erro esperando acontecer. */
.linkbtn{background:none;border:0;color:var(--vermelho);cursor:pointer;font-size:12px;font-weight:600;
  padding:4px 6px;min-width:24px;min-height:24px;font-family:inherit}
.linkbtn:hover{text-decoration:underline}

/* ---------- Gestão: score Serasa + cards de pessoa ---------- */
:root{--g-r:#f2495b;--g-a:#f59e0b;--g-v:#10b981;--g-cinza:#b6c2cc}
.gauge{position:relative;width:100%;max-width:200px;margin:2px auto 4px}
.gauge svg{width:100%;display:block}
.gauge-val{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.gv-n{font-family:var(--fonte-tit);font-size:30px;font-weight:800;line-height:1}
.gv-f{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.pessoa-card{padding:18px}
.pessoa-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px;border-top:1px solid var(--linha2);padding-top:12px}
.pessoa-metrics > div{display:flex;flex-direction:column}
.pm-l{font-family:var(--fonte-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.pm-v{font-size:15px;font-weight:700;color:var(--navy)}

/* ---------- Perfil ---------- */
.perfil-cap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.perfil-foto{width:96px;height:96px;border-radius:6px;object-fit:cover;border:1px solid var(--linha);background:var(--ciano-bg)}
.perfil-foto.ph{display:grid;place-items:center;font-size:38px;font-weight:800;color:var(--ciano-esc)}

/* ================= MOVIMENTO (micro-interações premium) ================= */
:root{--ease:cubic-bezier(.22,.61,.36,1)}

/* troca de página com cross-fade suave (View Transitions) */
@view-transition{ navigation: auto; }
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}

/* Aqui havia cinco regras de `animation-delay` SEM animação nenhuma — sobra
   de 08/2026, quando o pacote de marca removeu o fade-in de entrada e deixou
   os atrasos para trás. A revelação atual está mais abaixo, em .cont > *. */

/* botões: sobem no hover, afundam no clique */
/* o botao nao pula no hover: so troca de tom */
.btn{transition:background .12s,border-color .12s,color .12s}

/* tiles clicaveis: so a borda reage, nada flutua */
a.stat,a.stat-ic{transition:border-color .14s,background .14s}
a.stat:hover,a.stat-ic:hover{border-color:var(--navy)}

/* barra de progresso preenche animada */
.barra > span{transition:width .9s var(--ease)}

/* respeita quem pediu menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn:active,a.stat:hover,a.stat-ic:hover{transform:none}
  .barra > span{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* lista de opções (checkbox) — leve e natural, sem "caixões" */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;margin-top:8px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opts label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--txt);cursor:pointer;padding:6px 0}
.opts input[type=checkbox]{width:17px;height:17px;accent-color:var(--acao);flex:0 0 auto;margin:0}

/* ---------- Termômetro de humor (home) ---------- */
.termo{margin:8px 0 2px}
/* ⚠️ ISTO ERA UM SEMÁFORO EM GRADIENTE (vermelho→laranja→verde) com uma bola
   branca de 20px e sombra cinza em cima. Três clichês de uma vez, todos na
   lista do manual: "gradiente em barra", "sem gradiente em lugar nenhum" e
   "sem sombra em conteúdo". E dizia a coisa errada: pintar 4,0 de verde e 2,0
   de vermelho julga o humor do time numa escala de trânsito.

   Agora é um trilho fino com a barra da marca até o valor, e um traço vertical
   marcando onde está. A mesma informação, na linguagem do site. */
/* ⚠️ AQUI VAZOU UMA BARRA CIANO POR CIMA DA PÁGINA INTEIRA (18/09/2026).
   Eu preenchia a barra com `box-shadow:-2000px 0 0 1998px` no marcador e
   tentava conter com `clip-path:inset(... -2000px)`. Inset NEGATIVO não corta:
   ele EXPANDE a área de recorte. Ou seja, eu mandava a sombra de 2000px
   aparecer, em vez de escondê-la — e ela atravessava a tela.
   Agora quem corta é o pai, com overflow:hidden, que é o certo. O marcador
   perdeu a haste (ela precisaria escapar do corte) e virou um ponto. */
.termo-bar{position:relative;height:6px;border-radius:3px;background:var(--card2);
  overflow:hidden}
.termo-mark{position:absolute;top:0;bottom:0;width:10px;border-radius:3px;
  background:var(--sec);transform:translateX(-100%);
  box-shadow:-600px 0 0 0 var(--sec),0 0 12px #00e5ff99;
  transition:left .6s var(--curva-site)}
.termo-faces{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted)}
.termo-faces svg{width:18px;height:18px;stroke-width:1.75}
.termo-val{font-size:14px;color:var(--txt2);margin-top:12px}
.termo-val b{font-family:var(--fonte-tit);font-size:20px;color:var(--navy)}
.termo-val small{color:var(--muted);font-size:12px;display:block;margin-top:2px}
.termo-eu{margin-top:14px;border-top:1px solid var(--linha2);padding-top:13px}
.termo-ask{font-size:13.5px;color:var(--txt2);margin-bottom:9px;font-weight:600}
.termo-btns{display:flex;gap:8px}

/* ---------- Pop-up de chamado novo (TI) ---------- */
.ti-pop{position:fixed;right:20px;bottom:20px;z-index:60;width:300px;max-width:calc(100vw - 40px);
  text-decoration:none;color:#eaf7fb;background:var(--navy);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:14px 16px;
  box-shadow:0 18px 44px -16px rgba(0,46,67,.6);transform:translateY(140%);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease)}
.ti-pop.in{transform:translateY(0);opacity:1}
.ti-pop .cap{font-family:var(--fonte-mono);font-weight:500;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#9fc7d4}
.ti-pop .tit{font-weight:700;font-size:15px;margin:6px 0 3px;color:#fff}
.ti-pop .meta{font-size:12px;color:#a9cdda}
.ti-pop .pchip{display:inline-block;font-size:10px;font-weight:700;padding:1px 8px;border-radius:6px;margin-left:5px}
.ti-pop .hint{font-size:11px;color:#7fa7b7;margin-top:8px}


/* ============================================================
   COMPOSIÇÃO SEM CAIXA
   Card é exceção, não regra. Um card só existe quando o conteúdo
   é uma unidade independente que precisa se separar do resto.
   Para agrupar, use: bloco (título + regra), lista (linhas com
   divisor), faixa (tira horizontal) e destaque (área pontual).
   ============================================================ */

/* bloco: um trecho de conteúdo com título, sem moldura */
.bloco{margin:0 0 26px}
.bloco:last-child{margin-bottom:0}
.bloco > .desc{color:var(--txt2);font-size:13.5px;margin:-6px 0 12px;max-width:70ch}

/* lista: linhas separadas por fio — substitui pilha de cards */
.lista{display:flex;flex-direction:column}
.lista > .item{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--linha2)}
.lista > .item:first-child{border-top:0}
.lista > .item .txt{flex:1;min-width:0}
.lista > .item .txt b{display:block;font-weight:600;font-size:14px;color:var(--navy)}
.lista > .item .txt small{color:var(--muted);font-size:12.5px}
.lista > .item .dir{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.lista.densa > .item{padding:8px 0}

/* faixa: tira horizontal de informação, sem virar cartão */
.faixa{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.faixa + .faixa{border-top:0}
.faixa .rot{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* destaque: área pontual (aviso, resultado, chamada) — sem borda arredondada */
.destaque{background:var(--card2);border-left:2px solid var(--navy);padding:13px 16px;
  font-size:13.5px;color:var(--txt2)}
.destaque b{color:var(--navy)}
.destaque.aten{background:var(--amarelo-bg);border-left-color:var(--amarelo)}

/* duo: duas colunas com proporção intencional (não 1fr 1fr) */
.duo{display:grid;grid-template-columns:1.7fr 1fr;gap:34px;align-items:start}
.duo.inverso{grid-template-columns:1fr 1.7fr}
@media(max-width:980px){.duo,.duo.inverso{grid-template-columns:1fr;gap:26px}}

/* largura de leitura: páginas de texto/feed não devem esticar até o fim */
.leitura{max-width:660px}
.medio{max-width:900px}

/* estado vazio: compacto e com o próximo passo, não um card branco gigante */
.nada{padding:14px 0;color:var(--muted);font-size:13.5px;border-top:1px solid var(--linha2)}
.nada b{display:block;color:var(--txt);font-weight:600;font-size:14px;margin-bottom:2px}
.nada a{font-weight:600}
.lista .nada{border-top:1px solid var(--linha2)}

/* ação terciária: texto, sem caixa */
.btn.link{background:none;border:0;color:var(--navy);padding:6px 2px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.btn.link:hover{background:none;color:var(--sec-esc)}

/* rótulo miúdo em maiúscula (data, meta, contexto) */
/* rotulo maiusculo = mono (kit). Era Plex Sans peso 600. */
.rotulo{font-family:var(--fonte-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}


/* ---------- Início: visão do dia ---------- */
.abertura{font-size:15px;color:var(--txt2);margin:0 0 20px}
.abertura b{color:var(--navy)}
.checkin{gap:16px}
.ck-q{display:flex;flex-direction:column;line-height:1.35}
.ck-q b{font-family:var(--fonte-tit);font-size:14.5px;color:var(--navy)}
.ck-q span{font-size:12.5px;color:var(--muted)}
.ck-op{display:flex;gap:4px;margin-left:auto}
.ck-op button{width:38px;height:38px;font-size:19px;line-height:1;border:1px solid var(--linha);
  background:var(--card);border-radius:3px;cursor:pointer;padding:0;transition:.12s}
.ck-op button:hover{border-color:var(--navy);background:var(--card2)}
.lista > .item.feito .txt b{color:var(--muted);text-decoration:line-through}
.ms-marca{width:16px;flex:0 0 16px;color:var(--verde);display:flex}
.ms-marca i{width:16px;height:16px}
.clima{display:flex;align-items:baseline;gap:9px}
.clima .n{font-family:var(--fonte-tit);font-size:32px;font-weight:600;color:var(--navy);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.clima .de{font-size:13px;color:var(--txt2)}


/* ---------- peças das páginas redesenhadas ---------- */

/* fita do humor: 30 dias em uma tira, sem virar gráfico de dashboard */
.humor-fita{display:flex;align-items:flex-end;gap:3px;height:78px;
  border-bottom:1px solid var(--linha)}
.humor-fita span{flex:1;min-width:4px;background:var(--serie-1);opacity:.6;border-radius:2px 2px 0 0}
.humor-fita span:last-child{opacity:1}
.hm-emo{font-size:19px;line-height:1;width:24px;flex:0 0 24px;text-align:center}

/* tabela de gestão (pesquisas e afins) */
table.gestao-tab{width:100%;border-collapse:collapse;font-size:13.5px}
table.gestao-tab th{text-align:left;font-family:var(--fonte-mono);font-weight:500;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:0 12px 8px 0;border-bottom:1px solid var(--linha)}
table.gestao-tab td{padding:11px 12px 11px 0;border-bottom:1px solid var(--linha2);vertical-align:middle}
table.gestao-tab tr:last-child td{border-bottom:0}
table.gestao-tab .n{text-align:right;font-variant-numeric:tabular-nums}
table.gestao-tab .acoes-tab{display:flex;gap:10px;align-items:center;justify-content:flex-end}
table.gestao-tab .acoes-tab form{margin:0}
.est{font-family:var(--fonte-mono);font-size:11px}
.est.ok{color:var(--verde)} .est.al{color:var(--amarelo)} .est.mal{color:var(--vermelho)}

/* reconhecimento: fluxo principal em coluna de leitura */
.rec-sec{margin-top:30px}
.filtro-linha{display:flex;gap:18px;align-items:center;border-bottom:1px solid var(--linha);
  padding-bottom:8px;margin-bottom:4px;flex-wrap:wrap}
.filtro-linha button{background:none;border:0;padding:4px 0;font-family:inherit;font-size:13.5px;
  color:var(--muted);cursor:pointer;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-10px}
.filtro-linha button.ativa{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}
.pedir-abre{margin-top:26px;border-top:1px solid var(--linha2);padding-top:16px}
.pedir-abre summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:13.5px;list-style:none}
.pedir-abre summary::-webkit-details-marker{display:none}
.pedir-abre summary::before{content:"+ ";color:var(--muted)}
.pedir-abre[open] summary::before{content:"– "}

/* opções de tipo (elogio / reconhecimento / melhoria) mais leves */
.tipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
@media(max-width:700px){.tipo-grid{grid-template-columns:1fr}}

/* meu avatar: editor de verdade */
.av-cats{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--linha);margin-bottom:14px}
.av-cats button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:8px 12px;font-family:inherit;font-size:13px;color:var(--muted);cursor:pointer;font-weight:500}
.av-cats button.on{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}
.av-painel{display:none}
.av-painel.on{display:block}


/* ============================================================
   ACESSIBILIDADE E CELULAR
   ============================================================ */

/* foco visível em tudo que recebe teclado — no menu escuro, em ciano */
/* sem border-radius aqui: esta regra pega TUDO que recebe foco e estava
   deformando o canto de botoes, linhas de tabela e cards ao chegar por Tab */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.side :focus-visible,.topo .sino:focus-visible{outline-color:var(--sec)}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

@media (max-width:760px){
  /* trava: nenhuma tela empurra a página para o lado no celular.
     A tabela larga continua rolando dentro da própria seção. */
  html,body{max-width:100%;overflow-x:hidden}
  .wrap,.main{min-width:0;max-width:100%}
  .cont{padding:18px 16px}
  .topo{padding:10px 16px;gap:9px;flex-wrap:wrap}
  .topo .busca{display:none}          /* a busca volta no menu, não some da função */
  .duo,.duo.inverso,.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr;gap:22px}
  .tipo-grid{grid-template-columns:1fr}
  .row > *{min-width:0}
  .leitura,.medio{max-width:100%}
  /* tabela larga rola dentro da própria seção, sem empurrar a página */
  /* A rolagem lateral ja existia e e a solucao certa. O que faltava era a
     PISTA de que a tabela continua: o gestor abria "Visao do time" (10 colunas)
     no celular, via 3 e concluia que faltavam dados. A sombra na borda direita
     aparece so enquanto ha conteudo escondido — e a tecnica de background-
     attachment:local, sem JavaScript. */
  table{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;
    background:
      linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  var(--card) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(0,46,67,.18), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(0,46,67,.18), rgba(0,0,0,0)) right center;
    background-repeat:no-repeat;
    background-size:34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll}
  /* a matriz do Nine Box empilha por linha, mantendo a leitura de cima para baixo */
  .ninebox{grid-template-columns:1fr}
  .ninebox-wrap{padding-left:0;padding-bottom:0}
  .eixo-y,.eixo-x{display:none}
  .humor-op label{flex:1;min-width:88px}
  .ck-op{margin-left:0;width:100%}
  .ck-op button{flex:1}
  .filtro-linha{gap:14px;overflow-x:auto}
  .av-wrap{grid-template-columns:1fr}
  .av-preview{position:static}
  .flashes{left:12px;right:12px;max-width:none}
}


/* ---------- Gestão do time: tabela em vez de cartão por pessoa ---------- */
table.time-tab td{vertical-align:middle}
table.time-tab .pes{display:flex;align-items:center;gap:9px}
table.time-tab .pes b{display:block;font-size:13.5px;color:var(--navy);white-space:nowrap}
table.time-tab .pes small{color:var(--muted);font-size:11.5px}
table.time-tab .score{font-family:var(--fonte-tit);font-size:16px;font-weight:600;
  font-variant-numeric:tabular-nums}
table.time-tab tr.liberar-linha td{border-bottom:1px solid var(--linha);padding:0 0 12px}
table.time-tab .lib-linha{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
table.time-tab .lib-linha form{margin:0}
table.time-tab tr.liberar-linha .rotulo{margin-right:2px}

/* ==========================================================================
   MOVIMENTO — o mesmo vocabulário do Buscador (medido nas referências).
   Uma curva só (sai rápido, chega devagar) e quatro tempos.
   Anima só transform e opacity. Nada pisca em laço.
   ========================================================================== */
.nav{position:relative}
.nav .luz{
  position:absolute; left:0; width:2px; background:var(--sec);
  border-radius:1px; opacity:0; pointer-events:none;
  transition:transform var(--t-painel) var(--curva),
             height var(--t-painel) var(--curva),
             opacity var(--t-micro) var(--curva);
}
/* Com o JS ligado quem desenha a marca do item ativo e a .luz (que desliza).
   Esta regra apaga a marca estatica para nao aparecerem DUAS barras ciano.
   Ela apagava `box-shadow`, que era como a marca era feita antes; a marca
   virou ::before no redesenho 09/2026 e a regra precisou acompanhar. */
.nav.tem-luz a.ativo::before{display:none}

/* linha que abre: altura animada sem medir nada em JavaScript */
.gaveta{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t-painel) var(--curva)}
.gaveta.aberta{grid-template-rows:1fr}
.gaveta > .dentro{overflow:hidden; min-height:0}
.seta{display:inline-block; color:var(--muted); font-size:15px; line-height:1;
  transition:transform var(--t-painel) var(--curva)}
.seta.aberta{transform:rotate(90deg)}
tr.abre{cursor:pointer}
tr.abre:hover td{background:var(--card2)}

/* ==========================================================================
   PEÇAS DO KIT que ainda não existiam aqui
   ========================================================================== */

/* número a direita em tabela, e a régua dupla do total (livro-razão) */
th.n, td.n{text-align:right; font-variant-numeric:tabular-nums}
tr.total td{border-top:1px solid var(--txt); border-bottom:3px double var(--txt);
  font-weight:600; color:var(--txt)}

/* ==========================================================================
   BUSCA RÁPIDA (Ctrl+K) — vai direto pra pessoa ou pra tela
   ========================================================================== */
.k-atalho{
  display:flex; align-items:center; gap:8px; width:100%; margin:0 0 10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.74); padding:7px 10px; border-radius:var(--raio-sm);
  font-size:12.5px; font-family:inherit; cursor:pointer; text-align:left;
  transition:background var(--t-micro) var(--curva)}
.k-atalho:hover{background:rgba(255,255,255,.11); color:#fff}
.k-atalho .ic{width:15px; height:15px; flex:0 0 15px; opacity:.8}
.k-atalho kbd{margin-left:auto; font-family:var(--fonte-mono); font-size:10.5px;
  background:rgba(255,255,255,.09); border-radius:3px; padding:1px 5px}

.k-cortina{position:fixed; inset:0; background:rgba(0,26,38,.42); z-index:200;
  opacity:0; pointer-events:none; transition:opacity var(--t-sobre) var(--curva)}
.k-cortina.on{opacity:1; pointer-events:auto}
.k-caixa{position:fixed; top:14vh; left:50%; width:min(560px,92vw); z-index:201;
  background:var(--card); border:1px solid var(--linha); border-radius:6px;
  box-shadow:0 24px 60px -20px rgba(0,46,67,.34); overflow:hidden;
  transform:translate(-50%,-8px) scale(.985); opacity:0; pointer-events:none;
  transition:transform var(--t-sobre) var(--curva), opacity var(--t-sobre) var(--curva)}
.k-caixa.on{transform:translate(-50%,0) scale(1); opacity:1; pointer-events:auto}
.k-topo{display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--linha)}
.k-topo svg{width:17px; height:17px; color:var(--muted); flex:0 0 17px;
  stroke-width:1.8; fill:none; stroke:currentColor}
.k-topo input{border:0; padding:0; font-size:15px; background:none; width:100%;
  color:var(--txt); font-family:inherit}
.k-topo input:focus{outline:none; box-shadow:none; border:0}
.k-res{max-height:min(52vh,420px); overflow-y:auto; padding:6px}
.k-gr{font-family:var(--fonte-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:10px 10px 5px}
.k-op{display:flex; align-items:center; gap:11px; padding:9px 10px;
  border-radius:var(--raio-sm); cursor:pointer; color:var(--txt)}
.k-op.sel{background:var(--card2)}
.k-op svg{width:16px; height:16px; color:var(--muted); flex:0 0 16px;
  stroke-width:1.8; fill:none; stroke:currentColor}
.k-op b{font-weight:500; font-size:13.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.k-op small{color:var(--muted); font-size:12px; margin-left:auto; flex:0 0 auto;
  font-family:var(--fonte-mono)}
.k-rodape{display:flex; gap:16px; padding:9px 14px; border-top:1px solid var(--linha);
  background:var(--card2); font-size:11.5px; color:var(--muted)}
.k-rodape kbd{font-family:var(--fonte-mono); font-size:10.5px; background:var(--card);
  border:1px solid var(--linha); border-radius:3px; padding:1px 5px; margin-right:3px}
@media(max-width:900px){ .k-atalho{display:none} .k-caixa{top:8vh} }

/* aviso de "você está vendo como": a informação continua, o berrante sai */
.modo-aviso{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card2); border-left:2px solid var(--amarelo);
  color:var(--txt2); font-size:13px; padding:10px 30px}
.modo-aviso b{color:var(--txt)}
.modo-aviso .ic{width:15px; height:15px; color:var(--amarelo)}
.modo-aviso a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;
  font-weight:500}

/* ---------------------------------------------------------------------------
   BOTOES QUE SUBSTITUIRAM LINKS (GET que alterava estado -> POST)
   /sair, /ver-como e /notificacoes/ler mudam estado e eram links GET: uma
   imagem escondida em outro site (<img src=".../sair">) deslogava a pessoa ou
   zerava o sino dela sem nenhum clique. Viraram formularios POST — e estas
   regras fazem o botao continuar com a MESMA cara do link que era.
--------------------------------------------------------------------------- */
.nav-form{margin:0}
.nav-form button{
  display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:3px;
  color:rgba(255,255,255,.74);font-weight:400;margin:0;font-size:13.5px;
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:inherit;
  transition:background var(--t-micro) var(--curva), color var(--t-micro) var(--curva);
}
.nav-form button:hover{background:rgba(255,255,255,.08);color:#fff}

.nd-form{margin:0}
.nd-form button{
  display:flex;gap:11px;padding:12px 16px;align-items:flex-start;color:var(--txt);
  border:0;border-bottom:1px solid var(--linha2);background:none;width:100%;
  text-align:left;cursor:pointer;font-family:inherit;font-size:inherit;
}
.nd-form button:hover{background:var(--card2)}
.nd-form button.nova{background:var(--marca-suave)}
.nd-form button div div{font-size:13.5px;line-height:1.35}
.nd-form button small{color:var(--muted);font-size:11.5px}

/* ---------------------------------------------------------------------------
   SELO "NO TOPO DO FEED" (aviso / conquista com prazo)
   Antes o post fixado so mostrava "· fixado", que nao dizia nada: nem por quanto
   tempo ficaria, nem como tirar. Agora a faixa diz ate quando fica e traz o
   botao de tirar para quem pode (autor e admin). Fio na lateral, sem caixa
   colorida: e informacao de estado, nao alerta.
--------------------------------------------------------------------------- */
.post-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--txt2);background:var(--card2);
  border-left:2px solid var(--muted);border-radius:var(--raio-sm);
  padding:7px 11px;margin-bottom:12px}
.post-topo i{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
.post-topo form{margin:0}
.post-topo .btn.link{font-size:12px;padding:0}

/* ==========================================================================
   INÍCIO — resumo do dia (redesenho 09/2026)
   Substitui a saudação "Bom dia, Kennedy". O manual da marca proíbe saudação
   e manda "resumo antes do detalhe" e "número grande SEM CAIXA em volta" —
   por isso aqui não há cartão nenhum: um fio de 1px em cima e outro embaixo
   separam tão bem quanto uma moldura, e ocupam 1px.
   ========================================================================== */
.resumo{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding:4px 0 18px;margin-bottom:22px;border-bottom:1px solid var(--linha)}
.resumo-txt{font-size:15px;color:var(--txt2);max-width:44ch}
.resumo-txt b{font-family:var(--fonte-tit);color:var(--navy);font-size:17px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.resumo-num{display:flex;gap:0;flex-wrap:wrap}
/* cada número é separado do vizinho por um fio, não por uma caixa */
.rn{display:flex;flex-direction:column;gap:2px;padding:0 20px;
  border-left:1px solid var(--linha2)}
.rn:first-child{padding-left:0;border-left:0}
.rn:last-child{padding-right:0}
/* Plex Sans 600, igual ao .stat .n. Nasceu em Montserrat 700 no mesmo commit
   que tirou o KPI da Montserrat — dois tratamentos para a mesma coisa.
   Montserrat e so titulo; numero e texto 600 com tabular-nums. */
.rn .n{font-family:var(--fonte-tit);font-size:24px;font-weight:600;color:var(--navy);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* o denominador ("de 5", "/12") entra menor e mais claro: é contexto, não o dado */
.rn .n i{font-style:normal;font-size:14px;font-weight:500;color:var(--muted);
  letter-spacing:0}
.rn .l{font-family:var(--fonte-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);font-weight:500}
@media(max-width:760px){
  .resumo{gap:16px}
  .resumo-num{width:100%}
  .rn{padding:0 14px}
}

/* Humor: ícone de traço no lugar do emoji (regra do pacote visual).
   O .ck-op button tinha font-size:19px, medida de emoji — sem estas duas
   linhas o ícone entrava no tamanho padrão do Lucide (24px) e estourava a
   caixa de 38px. */
.ck-op button svg{width:19px;height:19px;stroke-width:1.75}
.ck-op button{color:var(--txt2)}
.ck-op button:hover{color:var(--navy)}
.hm-atual{display:inline-flex;align-items:center;gap:6px}
.hm-atual svg{width:16px;height:16px;stroke-width:1.75;color:var(--navy)}
.ms-humor .hm-btn svg{width:18px;height:18px;stroke-width:1.75}

/* ==========================================================================
   CURSOR DA LARAFY — a "bolinha" do larafy.com.br
   Copiado do CSS do proprio site (www.larafy.com.br), classes .cursor-dot e
   .cursor-ring. Valores dele, nao meus:
     .cursor-dot  { background:#00e5ff; width:6px; height:6px }
     .cursor-ring { width:34px; height:34px; border:1.5px solid #00e5ff99 }
     transicao    .3s
   Sao dois elementos: a BOLINHA gruda no ponteiro e o ANEL vem atras com
   atraso. O atraso e o que da a sensacao de peso — sem ele vira so um
   ponteiro colorido.
   ========================================================================== */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:9999px;will-change:transform;
  opacity:0;visibility:hidden;
  /* translate3d promove a camada: sem isso o navegador repinta a tela inteira
     a cada movimento do mouse e a bolinha fica travando */
  transform:translate3d(-100px,-100px,0)
}
.cursor-dot{width:6px;height:6px;background:var(--sec);margin:-3px 0 0 -3px}
.cursor-ring{width:34px;height:34px;border:1.5px solid #00e5ff99;margin:-17px 0 0 -17px;
  transition:width .3s var(--curva),height .3s var(--curva),
             margin .3s var(--curva),background-color .3s var(--curva),
             border-color .3s var(--curva)}
/* so aparecem depois do primeiro movimento do mouse: senao, em quem abre a
   tela e nao mexe no mouse, nascem as duas no canto superior esquerdo */
body.tem-cursor .cursor-dot,body.tem-cursor .cursor-ring{opacity:1;visibility:visible}

/* sobre algo clicavel o anel CRESCE e se enche de leve — e o sinal de "da pra
   clicar aqui" que substitui a mãozinha do sistema */
body.cursor-ativo .cursor-ring{width:52px;height:52px;margin:-26px 0 0 -26px;
  background:#00e5ff1a;border-color:#00e5ffcc}
/* ao apertar, encolhe: resposta tatil */
body.cursor-clicando .cursor-ring{width:26px;height:26px;margin:-13px 0 0 -13px}

/* o ponteiro do sistema some — mas SO onde nao atrapalha.
   ⚠️ NAO tirar em campo de texto: sem a barrinha do cursor a pessoa nao
   enxerga onde esta digitando, e esta intranet e cheia de formulario. Ali o
   ponteiro do sistema continua, e a bolinha some para nao ficarem os dois. */
body.tem-cursor{cursor:none}
body.tem-cursor a,body.tem-cursor button,body.tem-cursor summary,
body.tem-cursor [role=button],body.tem-cursor label{cursor:none}
body.tem-cursor input,body.tem-cursor textarea,body.tem-cursor select,
body.tem-cursor [contenteditable]{cursor:auto}
body.cursor-texto .cursor-dot,body.cursor-texto .cursor-ring{opacity:0}

/* Sem mouse (celular, tablet) nao existe ponteiro para seguir: a bolinha
   ficaria parada num canto da tela para sempre. E quem pediu menos movimento
   no sistema tambem nao quer um enfeite perseguindo o ponteiro. */
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring{display:none !important}
  body.tem-cursor,body.tem-cursor a,body.tem-cursor button{cursor:auto}
}

/* ==========================================================================
   LINGUAGEM DO SITE — larafy.com.br aplicada à intranet (09/2026)

   Construído a partir dos PRINTS que o dono mandou do site + do CSS real dele
   (125 KB baixados de /_next/static/chunks/). Os valores abaixo são do site,
   não escolhas minhas — onde eu tive que decidir algo, está comentado.

   O que o site faz, e que está reproduzido aqui:
     · rótulo ciano em maiúscula com muito espaçamento, acima do título
     · título em MAIÚSCULA misturando itálico leve + negrito
     · marca-texto ciano atrás da palavra que importa
     · número gigante VAZADO (só contorno):  -webkit-text-stroke:1.3px #00e5ff80
     · botão ciano chapado, texto escuro, maiúscula
     · cartão escuro com ícone ciano no topo e brilho ao passar o mouse
     · fundo com curvas de nível (topografia) muito fracas
     · a sombra é sempre LUZ CIANO, nunca sombra cinza
     · revelação subindo 40px em .8s cubic-bezier(.16,1,.3,1)

   ⚠️ Isto contraria o PROMPT-PARA-IA.md do pacote de marca, que proíbe
   gradiente, brilho e fade-in. Decisão do Kennedy, tomada depois de ver as
   duas coisas lado a lado: entre o documento e o site que está no ar, manda o
   site. Não "corrija" de volta sem falar com ele.
   ========================================================================== */

:root{
  --curva-site:cubic-bezier(.16,1,.3,1);
  --t-revela:.8s;
  --luz:0 0 20px #00e5ff4d;
  --luz-forte:0 0 40px #00e5ff99;
  --luz-fraca:0 0 12px #00e5ff40;
  --anel:0 0 0 4px #00e5ff2e;
  /* fundo escuro e cartão sobre ele — valores do site, não mais do manual */
  --escuro:#0a1628;          /* --larafy-dark  */
  --escuro-2:#0d1d33;        /* --larafy-navy, o cartão sobre o escuro */
  --escuro-fio:#1e3a5f;      /* --border do site */
  /* degraus de ciano que o site usa como fundo de cartão escuro */
  --cyan-5:#00e5ff0d; --cyan-10:#00e5ff1a; --cyan-15:#00e5ff26; --cyan-20:#00e5ff33;
}

/* ---------------- movimento: os keyframes do site ---------------- */
@keyframes lfy-sobe   {from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none}}
@keyframes lfy-conta  {from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none}}
@keyframes lfy-escala {from{opacity:0;transform:scale(.9)}        to{opacity:1;transform:scale(1)}}
@keyframes lfy-flutua {0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
@keyframes lfy-brilha {0%,100%{box-shadow:var(--luz)} 50%{box-shadow:var(--luz-forte)}}
@keyframes lfy-pulsa  {50%{opacity:.5}}
@keyframes lfy-risca  {to{transform:scaleX(1)}}

/* A TELA SE MONTA: cada bloco sobe 40px, escalonado. É a revelação do site.
   Em página de marketing acontece ao rolar; num sistema, ao abrir — rolar de
   novo a cada visita irritaria quem usa o dia inteiro. */
.cont > *{animation:lfy-sobe var(--t-revela) var(--curva-site) both}
.cont > *:nth-child(1){animation-delay:0ms}
.cont > *:nth-child(2){animation-delay:70ms}
.cont > *:nth-child(3){animation-delay:140ms}
.cont > *:nth-child(4){animation-delay:210ms}
.cont > *:nth-child(5){animation-delay:280ms}
.cont > *:nth-child(6){animation-delay:350ms}
.cont > *:nth-child(n+7){animation-delay:420ms}

/* ---------------- 1. RÓTULO CIANO (o "olho" acima do título) ----------------
   Print 4: "PLANEJAMENTO TRIBUTÁRIO ESTRATÉGICO" — pequeno, maiúsculo, ciano,
   com muito espaço entre as letras. É o que anuncia a seção no site. */
.lfy-olho{display:block;font-family:var(--fonte-mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;color:var(--sec-esc);margin-bottom:10px}
.lfy-escuro .lfy-olho{color:var(--sec)}

/* ---------------- 2. TÍTULO NO ESTILO DO SITE ----------------
   Prints 1 e 2: maiúscula, misturando itálico leve com negrito.
   "A TECNOLOGIA **ACELERA.**" / "A LARAFY **NÃO VENDE** CONSULTORIA."
   O <i> carrega o peso leve em itálico; o <b>, o negrito. */
.lfy-titulo{font-family:var(--fonte-tit);text-transform:uppercase;
  font-size:clamp(26px,3.4vw,44px);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 16px;color:var(--navy);font-weight:800;text-wrap:balance}
/* Space Grotesk nao tem italico desenhado: o navegador inclinaria a reta
   e sairia torto. A parte leve do titulo usa Inter, que tem italico real. */
.lfy-titulo i{font-family:var(--fonte-texto);font-style:italic;font-weight:300}
.lfy-titulo b{font-weight:800}
.lfy-escuro .lfy-titulo{color:#fff}
/* marca-texto ciano ATRÁS da palavra — print 1 ("TRANSFORMA.") e print 4
   ("dinheiro"). No claro é um tint; no escuro, um brilho. */
.lfy-marca{background:linear-gradient(transparent 58%, #00e5ff3d 58%);padding:0 .08em}
.lfy-escuro .lfy-marca{background:none;text-shadow:0 0 24px #00e5ffb3;color:var(--sec)}

/* ---------------- 3. NÚMERO VAZADO ----------------
   Print 2: o 1 2 3 4 gigante, só contorno ciano. Valor exato do site:
   -webkit-text-stroke:1.3px rgba(7,224,255,.5) */
.lfy-num{font-family:var(--fonte-tit);font-weight:800;font-size:clamp(54px,7vw,104px);
  line-height:.9;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.3px #00e5ff80;display:block;
  transition:-webkit-text-stroke-color .3s var(--curva-site),
             text-shadow .3s var(--curva-site)}
.lfy-num-g:hover .lfy-num{-webkit-text-stroke-color:#00e5ff;text-shadow:0 0 30px #00e5ff5c}

/* ---------------- 4. BOTÃO CIANO (a chamada do site) ----------------
   Print 2 e 4: ciano chapado, texto NAVY (não branco — em ciano claro o
   branco some), maiúscula, negrito, canto 6px. */
.btn.cta,.btn-cta{background:var(--sec);color:var(--navy-esc);border:0;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;
  padding:13px 22px;border-radius:var(--raio);cursor:pointer;font-family:var(--fonte-texto);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:box-shadow .3s var(--curva-site),transform var(--t-micro) var(--curva-site),
             background .3s var(--curva-site)}
.btn.cta:hover,.btn-cta:hover{background:#3ae8ff;box-shadow:var(--luz-forte);color:var(--navy-esc)}
.btn.cta:active,.btn-cta:active{transform:translateY(1px)}

/* ---------------- 5. CARTÃO DO SITE ----------------
   Print 2: cartão escuro, fio fraco, ícone ciano centralizado no topo, título
   em maiúscula negrito, texto cinza-azulado. Acende ao passar o mouse. */
.lfy-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.lfy-card{background:var(--card);border:1px solid var(--linha);border-radius:8px;
  padding:26px 20px;text-align:center;
  transition:transform .3s var(--curva-site),box-shadow .3s var(--curva-site),
             border-color .3s var(--curva-site)}
.lfy-card:hover{transform:translateY(-4px);box-shadow:var(--luz-fraca);
  border-color:#00e5ff66}
.lfy-card .ic-topo{display:grid;place-items:center;margin:0 auto 14px;color:var(--sec-esc)}
.lfy-card .ic-topo svg{width:26px;height:26px;stroke-width:1.6}
.lfy-card h3{font-family:var(--fonte-texto);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--navy);margin:0 0 9px}
.lfy-card p{font-size:13px;line-height:1.6;color:var(--txt2);margin:0}
/* sobre fundo escuro o cartão inverte */
.lfy-escuro .lfy-card{background:var(--escuro-2);border-color:var(--escuro-fio)}
.lfy-escuro .lfy-card h3{color:#fff}
.lfy-escuro .lfy-card p{color:#9fc0cf}
.lfy-escuro .lfy-card .ic-topo{color:var(--sec)}

/* ---------------- 6. SEÇÃO ESCURA ----------------
   Prints 2 e 3: fundo quase preto com auréola ciano e curvas de nível.
   As curvas são um SVG embutido — nenhum arquivo extra para carregar. */
.lfy-escuro{position:relative;background:var(--escuro);color:#c9dbe4;
  border-radius:10px;padding:34px 30px;overflow:hidden;margin-bottom:22px}
.lfy-escuro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 220px at 88% 10%,#00e5ff24,transparent 70%),
             radial-gradient(800px 600px at 12% 100%,#0090ad1a,transparent 70%)}
/* curvas de nível, muito fracas — a textura de fundo do site */
.lfy-escuro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%2300e5ff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-20 60 Q 90 20 200 56 T 440 40'/%3E%3Cpath d='M-20 92 Q 90 52 200 88 T 440 72'/%3E%3Cpath d='M-20 124 Q 90 84 200 120 T 440 104'/%3E%3Cpath d='M-20 164 Q 110 128 210 162 T 440 150'/%3E%3Cpath d='M-20 200 Q 110 164 210 198 T 440 186'/%3E%3Cpath d='M-20 236 Q 110 200 210 234 T 440 222'/%3E%3C/g%3E%3C/svg%3E")}
.lfy-escuro > *{position:relative;z-index:1}
.lfy-escuro a{color:var(--sec)}
.lfy-escuro .rotulo,.lfy-escuro small{color:#7ea0b4}

/* ---------------- 7. LUZ CIANO NO LUGAR DE SOMBRA ----------------
   No site não existe sombra cinza: toda box-shadow é #00e5ff. */
.nav a.ativo::before,.nav .luz{box-shadow:0 0 12px #00e5ff99}
.brand .simbolo{animation:lfy-flutua 6s ease-in-out infinite}
:focus-visible{box-shadow:var(--anel)}
input:focus,textarea:focus,select:focus{box-shadow:var(--anel)}
.btn{transition:background var(--t) var(--curva-site),box-shadow .3s var(--curva-site),
     transform var(--t-micro) var(--curva-site)}
.btn:hover{box-shadow:var(--luz-fraca)}
.btn:active{transform:translateY(1px)}
.premio,.stat-ic{transition:transform .3s var(--curva-site),box-shadow .3s var(--curva-site),
  border-color .3s var(--curva-site)}
.premio:hover,.stat-ic:hover{transform:translateY(-3px);box-shadow:var(--luz-fraca);
  border-color:#00e5ff66}
.sino .pip{animation:lfy-pulsa 2.4s ease-in-out infinite}

/* linha de lista: o ciano entra pela esquerda ao passar o mouse */
.lista > .item{position:relative;transition:background var(--t) var(--curva-site)}
.lista > .item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--sec);transform:scaleY(0);transition:transform .3s var(--curva-site)}
.lista > .item:hover{background:var(--card2)}
.lista > .item:hover::after{transform:scaleY(1)}

/* a lateral deixa de ser azul chapado: ganha a auréola do site.
   ⚠️ NAO declarar `position` aqui: foi exatamente isso que sobrescreveu o
   posicionamento fixo la de cima e fez a barra rolar junto com a pagina.
   `position:fixed` ja e contexto de posicionamento para o ::before. */
.side::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px 260px at 50% 0%,#00e5ff1f,transparent 70%),
             radial-gradient(360px 300px at 50% 100%,#0090ad1a,transparent 70%)}
.side > *{position:relative;z-index:1}

/* ---------------- 8. CABEÇALHO DA PÁGINA ----------------
   O topo branco vira a abertura do site: rótulo ciano, título grande, e um
   fio ciano que RISCA embaixo ao abrir a tela. */
.topo{position:relative}
.topo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--sec),transparent 60%);
  transform:scaleX(0);transform-origin:left;
  animation:lfy-risca .9s var(--curva-site) .15s forwards}

/* ---------------- quem pediu menos movimento recebe menos ---------------- */
@media (prefers-reduced-motion:reduce){
  .cont > *,.rn,.faixa-n > div,.stat{animation:none !important;opacity:1 !important;
    transform:none !important}
  .brand .simbolo,.sino .pip,.topo::after{animation:none !important}
  .topo::after{transform:scaleX(1)}
  .premio:hover,.stat-ic:hover,.lfy-card:hover{transform:none}
}

/* os números vazados em fileira — print 2 do site (o 1 2 3 4 gigante) */
.lfy-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;border-top:1px solid var(--fio-escuro);padding-top:24px}
.lfy-num-g{display:flex;flex-direction:column;gap:8px;cursor:default}
.lfy-num-r{font-family:var(--fonte-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7ea0b4}
/* entram um a um, como o countUp do site */
.lfy-num-g{animation:lfy-conta .7s var(--curva-site) both}
.lfy-num-g:nth-child(1){animation-delay:.25s}
.lfy-num-g:nth-child(2){animation-delay:.35s}
.lfy-num-g:nth-child(3){animation-delay:.45s}
.lfy-num-g:nth-child(4){animation-delay:.55s}
@media (prefers-reduced-motion:reduce){.lfy-num-g{animation:none;opacity:1}}

/* subtítulo da abertura escura — o parágrafo abaixo do título nos prints */
.lfy-escuro .lfy-sub{max-width:58ch;color:#9fc0cf;font-size:14.5px;line-height:1.6;margin:0}
.lfy-escuro .lfy-sub b{color:#fff;font-weight:600}
/* a abertura é o primeiro filho: ela já tem respiro próprio */
.cont > .lfy-escuro:first-child{margin-top:4px}

/* ==========================================================================
   MENU LATERAL MODERNO — trilho (09/2026)
   Pedido do dono, com print: barra estreita e escura, ICONE EM CIMA e NOME
   EMBAIXO, item ativo com risco ciano. E a lateral do Buscador de Notas.

   Por que nome embaixo e nao so icone: esta escrito no proprio Buscador — a
   versao so-de-icones ficou ilegivel na pratica, "19 quadradinhos iguais, e
   saber o que cada um era dependia de passar o mouse".

   ATENCAO ao 900.02px: abaixo de 900 a lateral vira GAVETA de 280px (regra
   la em cima). Com `min-width:900px` a faixa 900,01–900,99 — que acontece de
   verdade com zoom do navegador e tela de densidade fracionada — ficaria sem
   dono nenhum, e a lateral cairia num TERCEIRO layout que ninguem testa.
   ========================================================================== */
@media (min-width:900.02px){
  .side{width:104px;padding:12px 8px 14px}
  .main{margin-left:104px}

  /* o logotipo e horizontal 3:1: em 88px uteis sairia com 29px de altura e
     ficaria maior que os proprios itens. Entra o simbolo quadrado. */
  .brand{flex-direction:column;gap:0;padding:2px 0 10px;justify-content:center}
  .brand .logo,.brand .brand-sub{display:none}
  .brand .simbolo{display:block;height:22px;width:auto}

  /* a busca segue o mesmo desenho dos itens */
  .k-atalho{flex-direction:column;gap:4px;padding:7px 4px 6px;margin:6px 0;
    line-height:1.25;text-align:center}
  .k-atalho .ic{width:19px;height:19px;flex:0 0 19px}
  .k-atalho .rot{font-size:10.5px}
  /* o "Ctrl K" sai: empilhado viraria uma TERCEIRA linha dentro do botao e a
     busca ficaria mais alta que os itens. O atalho continua funcionando. */
  .k-atalho kbd{display:none}

  /* o titulo do grupo vira um FIO. Com nome em todo item ele pesa menos, mas
     fica: os grupos sao a unica pista de "onde eu estou" numa lista de 30. */
  .nav .grupo{height:1px;padding:0;margin:8px 10px;background:var(--fio-escuro);
    font-size:0;color:transparent;overflow:hidden}
  /* o fio do PRIMEIRO grupo nao separa nada — apareceria como um traco solto
     logo abaixo da busca. */
  .nav .grupo:first-child{display:none}

  /* ---- o item do trilho: coluna, centrado ---- */
  .nav a,.nav-bloq{flex-direction:column;justify-content:flex-start;align-items:center;
    gap:4px;padding:7px 4px 6px;text-align:center;white-space:normal;line-height:1.2}
  .nav a .ic,.nav-bloq .ic{width:22px;height:22px;flex:0 0 22px}
  /* overflow-wrap:anywhere impede "Reconhecimento" de estourar os 88px quando
     o navegador esta com tamanho minimo de fonte ligado (10.5px vira 12px+) */
  /* `anywhere` cortava no meio da palavra: "Reconheciment/o". `break-word`
   só quebra quando a palavra inteira não cabe, e a hifenização avisa. */
.nav a .rot,.nav-bloq .rot{font-size:10.5px;letter-spacing:.005em;
  overflow-wrap:break-word;hyphens:auto}
  /* o contador (chamados na fila, pedidos de feedback) vira selo no canto */
  .nav a .badge{position:absolute;top:3px;right:8px;margin:0}

  /* o risco ciano encosta na borda do item, nao na do trilho */
  .nav a.ativo::before{left:-2px;top:3px;bottom:3px}

  /* ---- desbotado nas pontas: diz que a lista continua ---- */
  .nav{--fade-topo:0px;--fade-pe:0px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-topo),
      #000 calc(100% - var(--fade-pe)),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-topo),
      #000 calc(100% - var(--fade-pe)),transparent 100%);
    /* andando de Tab o navegador rola o MINIMO — e o minimo para o item colado
       na borda, que e onde a mascara apaga: o anel de foco sairia meio
       transparente. `padding` nao resolve, a mascara mede da borda. */
    scroll-padding-block:30px}

  /* o rodape do menu: quem esta logado e a saida */
  .nav-form{margin-top:2px}
  .nav-form button{width:100%;flex-direction:column;gap:3px;padding:6px 4px;
    font-size:10px;line-height:1.2}
}

/* ==========================================================================
   PACOTE DE ANIMAÇÃO — larafy.com.br (09/2026)
   Segunda rodada: o dono pediu "mais animações, vídeos e tal".

   O que o site faz e que EU AINDA NÃO TINHA TRAZIDO:
     · revelação AO ROLAR (não só ao abrir) — é o IntersectionObserver
     · vídeo de fundo:  <video autoPlay muted loop playsInline object-cover>
       (o site carrega /11887095-hd_1920_1080_25fps.mp4 e /inicio-pre-diag.mp4)
     · esteira infinita: @keyframes lfy-marquee, 32s linear infinite
     · número que conta até o valor
     · traço de SVG que se desenha
   ========================================================================== */

/* ---------------- 1. REVELAÇÃO AO ROLAR ----------------
   O site revela cada bloco quando ele entra na tela. Antes eu só revelava ao
   abrir a página: quem rolava para baixo via tudo já montado, e por isso
   "não tinha animação" depois da primeira dobra.
   O JS põe .revelar em quem ainda não apareceu e .visivel quando aparece. */
.revelar{opacity:0;transform:translateY(40px);
  transition:opacity .8s var(--curva-site),transform .8s var(--curva-site)}
/* REDE DE SEGURANÇA: conteúdo invisível é MUITO pior que conteúdo sem
   animação. Se o JavaScript não marcar `.visivel` (erro acima no script,
   navegador sem IntersectionObserver, impressão da página inteira), esta
   animação traz o bloco de volta em 1,2s de qualquer jeito. */
.revelar{animation:lfy-garantia 1ms linear 1.2s forwards}
@keyframes lfy-garantia{to{opacity:1;transform:none}}
.revelar.visivel{animation:none}
.revelar.visivel{opacity:1;transform:none}
/* variantes: o site entra dos dois lados também (fadeInLeft / fadeInRight) */
.revelar.da-esq{transform:translateX(-40px)}
.revelar.da-dir{transform:translateX(40px)}
.revelar.cresce{transform:scale(.94)}
.revelar.visivel.da-esq,.revelar.visivel.da-dir,.revelar.visivel.cresce{transform:none}

/* ---------------- 2. VÍDEO DE FUNDO ----------------
   Igual ao site: o vídeo cobre a área, o conteúdo fica por cima, e um véu
   escuro garante que o texto continue legível por cima de qualquer quadro.
   Uso: <section class="lfy-escuro com-video">
          <video class="lfy-video" autoplay muted loop playsinline
                 src="{{ url_for('static', filename='fundo.mp4') }}"></video>
          ... conteúdo ...
        </section>
   Sem arquivo de vídeo, a seção continua funcionando: o fundo animado abaixo
   (item 3) cobre o caso de não haver vídeo nenhum. */
/* ⚠️ BUG QUE ESTOUROU A ABERTURA (18/09/2026): a regra `.com-video > *`
   abaixo põe position:relative em TODO filho direto — e o vídeo é um filho
   direto. Mesma especificidade, e ela vem depois: ganhava, o vídeo saía do
   absoluto e ENTRAVA NO FLUXO, empurrando o texto para baixo dele. Virava
   uma foto de fábrica de 700px com a saudação embaixo.
   Por isso o `:not(.lfy-video)` — e o !important no vídeo, como cinto e
   suspensório para quem mexer aqui depois. */
/* ⚠️ SEM width/height:100%. Para um elemento absoluto, `inset:0` sozinho ja
   estica ate as quatro bordas do pai — e nao depende da altura dele. Com
   `height:100%` num pai de altura AUTO, o navegador nao tem contra o que medir
   e cai para a altura NATURAL do arquivo (1272x720 escalado = ~715px): o
   banner inchava de 250 para 856px. `object-fit:cover` cuida do recorte. */
.lfy-video{position:absolute !important;inset:0;object-fit:cover;
  z-index:0;opacity:.20;pointer-events:none}
.com-video::before{z-index:1}
.com-video::after{z-index:1}
.com-video > *:not(.lfy-video){position:relative;z-index:2}
/* a abertura com vídeo não pode crescer com ele: altura de faixa, não de foto */
.lfy-escuro.com-video{min-height:300px;display:flex;flex-direction:column;
  justify-content:center}

/* ---------------- 3. FUNDO ANIMADO SEM ARQUIVO ----------------
   Constelação: pontos ciano ligados por linhas, derivando devagar. É o eco do
   diagrama de ecossistema do print 3, e não depende de nenhum arquivo — então
   funciona hoje, sem ninguém subir vídeo. Dois planos em velocidades
   diferentes dão profundidade. */
.lfy-escuro .constelacao{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.55;overflow:hidden}
.lfy-escuro .constelacao svg{position:absolute;width:150%;height:150%;left:-25%;top:-25%}
.lfy-escuro .constelacao .p1{animation:lfy-deriva-a 20s ease-in-out infinite}
.lfy-escuro .constelacao .p2{animation:lfy-deriva-b 27s ease-in-out infinite}
@keyframes lfy-deriva-a{0%,100%{transform:translate(0,0)}50%{transform:translate(-62px,-40px)}}
@keyframes lfy-deriva-b{0%,100%{transform:translate(0,0)}50%{transform:translate(54px,32px)}}
/* os nós piscam fora de sincronia: é o que faz parecer vivo, e não um desenho */
.lfy-escuro .constelacao circle{animation:lfy-no 2.2s ease-in-out infinite}
@keyframes lfy-no{0%,100%{opacity:.22}50%{opacity:1}}

/* ---------------- 4. TRAÇO QUE SE DESENHA ----------------
   Para linha de ligação e contorno: o traço nasce apagado e é "desenhado".
   stroke-dasharray + dashoffset é a técnica; anima na placa de vídeo. */
.lfy-traco{stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:lfy-desenha 2.4s var(--curva-site) forwards}
@keyframes lfy-desenha{to{stroke-dashoffset:0}}

/* ---------------- 5. ESTEIRA INFINITA ----------------
   O @keyframes lfy-marquee do site, com o mesmo tempo (32s linear infinite).
   O conteúdo tem que estar DUPLICADO dentro: a animação anda -50% e volta ao
   começo sem salto visível. */
.lfy-esteira{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lfy-esteira > div{display:flex;gap:34px;width:max-content;
  animation:lfy-esteira-anda 32s linear infinite;will-change:transform}
.lfy-esteira:hover > div{animation-play-state:paused}
@keyframes lfy-esteira-anda{to{transform:translateX(-50%)}}
.lfy-esteira .item-e{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13px;color:#9fc0cf}
.lfy-esteira .item-e b{color:#fff;font-weight:600}
.lfy-esteira .item-e .pt{width:4px;height:4px;background:var(--sec);flex:0 0 4px;
  border-radius:50%}

/* ---------------- 6. BARRA QUE PREENCHE ----------------
   Barra de progresso animando do zero até o valor quando entra na tela. */
.barra-anim > i{display:block;height:100%;width:0;background:var(--sec);
  transition:width 1.1s var(--curva-site)}
.barra-anim.visivel > i{width:var(--ate,0%)}

/* ---------------- 7. O ÍCONE DO CARTÃO GANHA VIDA ---------------- */
.lfy-card:hover .ic-topo svg{animation:lfy-flutua 1.6s ease-in-out infinite}

/* ---------------- menos movimento: desliga tudo ---------------- */
@media (prefers-reduced-motion:reduce){
  .revelar{opacity:1 !important;transform:none !important;transition:none !important}
  .lfy-escuro .constelacao,.lfy-video{display:none}
  .lfy-esteira > div{animation:none}
  .lfy-traco{stroke-dashoffset:0;animation:none}
  .barra-anim > i{transition:none;width:var(--ate,0%)}
  .lfy-card:hover .ic-topo svg{animation:none}
}

/* ==========================================================================
   FUNDO DA TELA — curvas de nível (18/09/2026)
   O larafy.com.br tem uma textura de topografia por baixo das seções claras
   (dá para ver nos prints 1 e 4). O fundo da intranet era cinza chapado.

   É um SVG embutido no próprio CSS: nenhum arquivo extra para baixar, e
   escala sem serrilhar em qualquer tela. A opacidade é baixa de propósito —
   textura de fundo que se nota é textura errada.
   ========================================================================== */
body{
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='520' viewBox='0 0 760 520'%3E%3Cg fill='none' stroke='%230d1d33' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M-40 96 Q 150 30 340 92 T 800 62'/%3E%3Cpath d='M-40 140 Q 150 74 340 136 T 800 106'/%3E%3Cpath d='M-40 184 Q 150 118 340 180 T 800 150'/%3E%3Cpath d='M-40 236 Q 170 176 360 238 T 800 208'/%3E%3Cpath d='M-40 288 Q 170 228 360 290 T 800 260'/%3E%3Cpath d='M-40 348 Q 190 292 380 350 T 800 322'/%3E%3Cpath d='M-40 404 Q 190 348 380 406 T 800 378'/%3E%3Cpath d='M-40 462 Q 210 410 400 466 T 800 440'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-attachment:fixed;
}
/* no celular o fundo fixo custa caro em rolagem (o navegador repinta a cada
   quadro): lá ele rola junto com a página */
@media(max-width:900px){body{background-attachment:scroll}}

/* o vídeo e a constelação não convivem: onde há vídeo, a constelação sai */
.lfy-escuro.com-video .constelacao{display:none}
/* véu sobre o vídeo — sem ele o texto branco some em cima dos quadros claros */
.lfy-escuro.com-video::before{
  background:linear-gradient(90deg,#0a1628fa 0%,#0a1628f0 52%,#0a1628cc 100%),
             radial-gradient(560px 220px at 88% 10%,#00e5ff1f,transparent 70%)}

/* ==========================================================================
   BANNER ANIMADO (18/09/2026)
   O banner tinha ~180px nas telas internas: a constelação existia mas não
   tinha espaço para ser vista, e o resultado lia como imagem parada.
   Agora tem altura de faixa, e três camadas de movimento em velocidades
   diferentes — é a diferença entre "tem uma animação" e "a coisa é viva".
   ========================================================================== */
/* ⚠️ ISTO ERA UM CARTAZ DE 300px EM 23 TELAS OPERACIONAIS.
   Com min-height:216px + padding:34px, o topo de Larastore, Ranking, Carteira
   e mais 20 telas era ocupado por uma frase de marketing sem nenhum dado
   ("TROQUE LARACOIN POR COISA DE VERDADE"). Isso e cartaz dentro de
   ferramenta — e era o que mais puxava a intranet para "cara de IA", mais que
   qualquer cor.
   Agora o PADRAO e o cabecalho compacto: 96px, com os numeros reais daquela
   tela a direita. Quem quer o banner alto pede: .lfy-escuro.alto (so o Inicio,
   que e a abertura do dia e tem funcao). */
.lfy-escuro{min-height:0;padding:18px 26px;display:flex;align-items:center;
  gap:26px;flex-wrap:wrap;border-radius:8px}
.lfy-escuro > .lfy-cab{flex:1;min-width:260px}
.lfy-escuro .lfy-titulo{font-size:clamp(20px,2vw,27px);margin:0}
.lfy-escuro .lfy-olho{margin-bottom:5px}
.lfy-escuro .lfy-sub{font-size:13px;margin-top:6px}
/* os numeros do cabecalho compacto, a direita */
.lfy-cab-n{display:flex;gap:26px;flex-wrap:wrap}
.lfy-cab-n > div{display:flex;flex-direction:column-reverse;gap:4px}
.lfy-cab-n .n{font-family:var(--fonte-tit);font-weight:700;font-size:40px;
  line-height:.95;letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1.3px #00e5ffb3;font-variant-numeric:tabular-nums}
.lfy-cab-n .r{font-family:var(--fonte-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#7ea0b4;white-space:nowrap}

/* o banner ALTO — so o Inicio */
/* ⚠️ ALTURA DEFINIDA, nao so min-height. O video e `position:absolute` com
   `height:100%` — e 100% de um pai de altura AUTO nao resolve: o navegador
   cai para a altura natural do arquivo (1272x720 escalado = ~715px) e o banner
   inchava para 856px, com um vazio enorme embaixo dos numeros. Com altura
   definida aqui, o 100% do video passa a ter contra o que medir. */
/* ⚠️ flex-wrap:nowrap e obrigatorio. A regra base do .lfy-escuro tem
   `flex-wrap:wrap` (para o cabecalho compacto quebrar no celular). Num flex de
   COLUNA com altura limitada, wrap faz o conteudo enrolar em varias COLUNAS:
   os numeros foram parar na direita do titulo e o rotulo cortou no topo. */
.lfy-escuro.alto{min-height:300px;padding:30px;display:flex;flex-wrap:nowrap;
  flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;border-radius:10px;overflow:hidden}
.lfy-escuro.alto .lfy-numeros{margin-top:22px}
/* o numero nao estica para a altura da fileira */
.lfy-numeros > *{align-self:start}
.lfy-escuro.alto .lfy-titulo{font-size:clamp(26px,3.4vw,44px);margin:0 0 16px}
.lfy-escuro.alto .lfy-sub{font-size:14.5px}
@media(max-width:760px){
  .lfy-escuro{padding:16px 18px;gap:16px}
  .lfy-cab-n{gap:18px}
  .lfy-cab-n .n{font-size:30px}
}
.lfy-escuro .constelacao{opacity:1}

/* --- camada 1: VARREDURA. Uma faixa de luz ciano atravessa o banner de
       tempos em tempos, como o sinal passando por um cabo. É o movimento que
       o olho pega de canto, sem precisar olhar. --- */
.lfy-escuro::before{
  background:radial-gradient(560px 220px at 88% 10%,#00e5ff24,transparent 70%),
             radial-gradient(800px 600px at 12% 100%,#0090ad1a,transparent 70%),
             linear-gradient(105deg,transparent 38%,#00e5ff38 50%,transparent 62%);
  background-size:auto,auto,260% 100%;
  background-repeat:no-repeat;
  animation:lfy-varre 5s var(--curva-site) infinite}
@keyframes lfy-varre{
  0%,100%{background-position:0 0,0 0,140% 0}
  55%    {background-position:0 0,0 0,-40% 0}
}

/* --- camada 2: as curvas de nível respiram devagar --- */
.lfy-escuro::after{animation:lfy-mare 13s ease-in-out infinite}
@keyframes lfy-mare{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-38px,-22px,0) scale(1.08)}
}

/* --- camada 3: o título ganha um brilho que pulsa na palavra marcada --- */
.lfy-escuro .lfy-marca{animation:lfy-acende 4.5s ease-in-out infinite}
@keyframes lfy-acende{
  0%,100%{text-shadow:0 0 24px #00e5ffb3}
  50%    {text-shadow:0 0 38px #00e5ffe6,0 0 8px #00e5ff80}
}

/* --- o fio que separa o título dos números se desenha ao abrir --- */
.lfy-numeros{position:relative}
.lfy-numeros::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,#00e5ff,#ffffff14 40%,#ffffff14);
  transform:scaleX(0);transform-origin:left;
  animation:lfy-risca 1.1s var(--curva-site) .2s forwards}

/* --- o rótulo ciano do topo entra letra a letra (aparece deslizando) --- */
.lfy-olho{overflow:hidden}
.lfy-escuro .lfy-olho{animation:lfy-entra-rot .7s var(--curva-site) both}
@keyframes lfy-entra-rot{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .lfy-escuro{min-height:180px;padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .lfy-escuro::before,.lfy-escuro::after,.lfy-escuro .lfy-marca,
  .lfy-escuro .lfy-olho,.lfy-numeros::before{animation:none !important}
  .lfy-numeros::before{transform:scaleX(1)}
}

/* ---------- FEED EM DUAS COLUNAS (18/09/2026) ----------
   O feed ocupava uma faixa de 640px com o resto da tela em branco. A coluna
   da direita mostra quem foi reconhecido e quem reconheceu no mês — é o que
   faz a pessoa querer participar, e não só passar o olho. */
.feed-duo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.feed-lado{position:sticky;top:76px}
.feed-lado .bloco{margin-bottom:20px}
/* o contador de reconhecimentos: número em destaque, sem virar medalha */
.cont-n{font-family:var(--fonte-tit);font-weight:600;font-size:15px;color:var(--navy);
  font-variant-numeric:tabular-nums;min-width:22px;text-align:right;display:inline-block}
@media(max-width:1100px){
  /* minmax(0,1fr) e nao 1fr: "1fr" e minmax(AUTO,1fr), e esse auto
     impede a coluna de encolher abaixo do conteudo mais largo de
     dentro. Em 360px a trilha ficava 360,2px num grid de 328px e a
     pagina vazava 16px para o lado. */
  .feed-duo{grid-template-columns:minmax(0,1fr)}
  .feed-lado{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
}

/* ==========================================================================
   PAINÉIS — estrutura de verdade (18/09/2026)

   O que estava errado: cada seção era um rótulo seguido de um fio e uma pilha
   de linhas, solta no fundo da página. Sem moldura, sem agrupamento e sem
   coluna alinhada, a tela lia como um monte de pedaço flutuando — foi isso
   que o dono chamou de "muito mal estruturado".

   ⚠️ O manual da marca prefere fio a moldura ("um fio de 1px separa tão bem
   quanto uma moldura e ocupa 1px"). Na prática, com 6 seções empilhadas numa
   tela de 1440px, o fio não agrupa nada: ele separa linha de linha, não bloco
   de bloco. Painel com borda de 1px e canto de 6px resolve e continua dentro
   do resto das regras (sem sombra em conteúdo, sem gradiente, canto ≤6px).
   Decisão do Kennedy, depois de ver a tela.
   ========================================================================== */
/* IGUAL ao .card: padding no painel, margem negativa so no cabecalho.
   Antes o .bloco nao tinha padding e o cabecalho saia 18px para fora do corpo
   — degrau visivel entre o titulo e o conteudo dele. E a versao por filho era
   fragil: dependia de eu listar cada tipo de elemento que pode entrar. */
.bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:2px 18px 16px;margin:0 0 18px}
/* cabeçalho do painel: dentro dele, com fio embaixo e fundo levemente rebaixado */
.card > h2,.bloco > h2{display:flex;align-items:center;gap:10px;
  margin:0 -18px 14px;padding:12px 18px;
  background:var(--card2);border-bottom:1px solid var(--linha);
  font-family:var(--fonte-texto);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--navy)}
.card > h2 .cont-dir,.bloco > h2 .cont-dir{margin-left:auto;font-family:var(--fonte-mono);
  font-weight:500;font-size:10px;letter-spacing:.09em;text-transform:none;color:var(--muted)}
/* o conteúdo respira dentro do painel */
/* As margens por filho sairam: agora o recuo vem do padding do proprio
   painel, entao vale para QUALQUER conteudo — inclusive tabela, que a lista
   antiga esquecia. */
.bloco > .lista{margin-top:2px;margin-bottom:6px}
.bloco > .clima{margin-top:12px}
.bloco > small:last-child{display:block}

/* as linhas do painel: a primeira não leva fio (o cabeçalho já separou) */
.bloco > .lista > .item:first-child{border-top:0}

/* ---------- linha de missão: COLUNAS ALINHADAS ----------
   Antes o lado direito tinha 5 ícones numa linha, um botão na outra e a
   palavra FEITO na terceira, cada um começando num lugar. Agora a pontuação e
   a ação têm largura fixa, então as quatro linhas formam duas colunas. */
/* ⚠️ `min-width:210px` aqui era GLOBAL e comia a coluna de 300px do feed:
   sobravam ZERO pixels para o nome, e todos quebravam em duas linhas
   ("Ana / Souza", "Bruno / Lima"). A largura fixa so faz sentido onde ha
   varias linhas com acoes de tamanhos diferentes — ou seja, nas missoes. */
.lista > .item .dir{min-width:0;justify-content:flex-end}
.ms-pts{min-width:44px;text-align:right}
/* so na lista de missoes a coluna de acao vira encaixe de largura fixa */
.bloco-missoes .lista > .item .dir{gap:12px}
.bloco-missoes .ms-pts{flex:0 0 44px}
.bloco-missoes .lista > .item .dir > :last-child{flex:0 0 96px;display:flex;
  justify-content:flex-end;text-align:right}
@media(max-width:760px){
  .lista > .item .dir{min-width:0}
  .lista > .item .dir .rotulo,.lista > .item .dir .est{min-width:0}
}

/* ---------- o check-in de humor vira painel também ----------
   Ele era uma faixa solta entre dois fios, e os cinco ícones ficavam jogados
   na borda direita da tela, a meio metro da pergunta. */
/* ⚠️ MEDIDO: havia 592px de nada entre "leva cinco segundos..." e o primeiro
   botao de resposta. O comentario antigo aqui dizia que isso tinha sido
   corrigido — nao tinha: eu botei moldura na faixa e mantive o
   `margin-left:auto`, que continuava jogando os botoes na borda de uma faixa
   de 1180px. Pergunta e resposta precisam caber no mesmo olhar. */
.faixa.checkin{background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);padding:14px 16px;gap:16px;justify-content:flex-start}
/* 8, nao 24: a .faixa ja tem gap:16px, entao 24 aqui somava 40 — o dobro do
   alvo. Medido no navegador depois de corrigir: 24px. */
.ck-op{margin-left:8px}
.faixa.checkin .btn.link{margin-left:auto}

/* ---------- a lateral: nome que não cabe ----------
   "Reconhecimento" e "Marketing @LFY" quebravam feio no trilho de 88px. */
@media (min-width:900.02px){
  .nav a .rot,.nav-bloq .rot{font-size:10px;line-height:1.15;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;hyphens:auto}
}

/* ---------- PULSO QUE VIAJA PELA LINHA ----------
   O que faltava para o banner "ter animação" de verdade: um ponto de luz que
   PERCORRE as ligações da constelação, como dado trafegando no cabo. Isso o
   olho pega de longe — as derivas e o brilho são ambiente, isto é evento.
   O caminho de cada pulso é desenhado pelo JS em cima de uma das ligações. */
.lfy-escuro .pulso{fill:#00e5ff;filter:drop-shadow(0 0 6px #00e5ff)}
@media (prefers-reduced-motion:reduce){
  .lfy-escuro .pulso{display:none}
}

/* ---------- NEON NA LATERAL AO PASSAR O MOUSE (18/09/2026) ----------
   Pedido do dono. É o único lugar do sistema onde o ciano pode acender forte:
   fundo navy, área pequena, e só enquanto o mouse está em cima. */
.nav a{transition:background var(--t-micro) var(--curva-site),
       color var(--t-micro) var(--curva-site),
       box-shadow var(--t) var(--curva-site),
       text-shadow var(--t) var(--curva-site)}
.nav a:hover{background:rgba(7,224,255,.10);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(7,224,255,.45), 0 0 18px -2px rgba(7,224,255,.55);
  text-shadow:0 0 10px rgba(7,224,255,.65)}
.nav a:hover .ic,.nav a:hover svg.ic{color:var(--sec);
  filter:drop-shadow(0 0 6px rgba(7,224,255,.9))}
/* o item ATIVO já acende sozinho; no hover ele acende mais */
.nav a.ativo:hover{box-shadow:inset 0 0 0 1px rgba(7,224,255,.6),
  0 0 24px -2px rgba(7,224,255,.7)}
.nav a.ativo::before{transition:box-shadow var(--t) var(--curva-site)}
.nav a.ativo:hover::before{box-shadow:0 0 16px #00e5ff}
/* o atalho de busca segue a mesma regra */
.k-atalho:hover{background:rgba(7,224,255,.10);border-color:rgba(7,224,255,.45);
  box-shadow:0 0 18px -2px rgba(7,224,255,.5);color:#fff}
.k-atalho:hover .ic{color:var(--sec);filter:drop-shadow(0 0 6px rgba(7,224,255,.9))}
@media (prefers-reduced-motion:reduce){
  .nav a,.nav a.ativo::before,.k-atalho{transition:none}
}

/* ---------- BOTÃO PRINCIPAL: o ciano do site (18/09/2026) ----------
   Estava navy aqui e ciano ali (as missões do Início já usavam .btn.cta):
   dois visuais para "a ação principal desta tela", na mesma sessão de uso.
   O site tem UM botão de chamada e ele é ciano chapado com texto escuro —
   texto branco sobre ciano claro some (2,1:1; o navy dá 11,4:1).
   `.btn.sec`, `.btn.no` e `.btn.link` seguem como estavam: secundário,
   destrutivo e link não são chamada principal. */
.btn{background:var(--sec);border-color:var(--sec);color:var(--navy-esc);
  font-weight:700;letter-spacing:.02em}
.btn:hover{background:#3ae8ff;border-color:#3ae8ff;color:var(--navy-esc);
  box-shadow:var(--luz)}
.btn:disabled,.btn[disabled]{background:var(--card2);border-color:var(--linha);
  color:var(--muted);box-shadow:none}
/* o botão dentro do painel escuro precisa continuar legível */
.lfy-escuro .btn{background:var(--sec);color:var(--navy-esc)}

/* ==========================================================================
   ESCALA DE ESPACAMENTO (18/09/2026, parecer do ui-ux-designer)
   Havia 14 valores distintos para 4 papeis {2,8,10,11,12,14,16,18,20,22,24,
   26,30,34}. Dez deles fora de qualquer degrau. Pior: o espaco entre dois
   blocos dependia de QUEM estava em cima — .lfy-escuro empurrava 22,
   .faixa.checkin 18, .aviso-bloco 16, .card 32. A mesma quebra de assunto
   media 16, 18, 22 ou 32 conforme a tela. Era isso que o olho lia como
   bagunca, mais do que os valores soltos.
   Agora: 12 (linha) · 16 (dentro do painel) · 24 (entre blocos) · 32 (colunas)
   ========================================================================== */
.cont > * + *{margin-top:24px}
.cont > .bloco,.cont > .card,.cont > .faixa,.cont > .lfy-escuro,
.cont > .aviso-bloco,.cont > .duo,.cont > .feed-duo{margin-bottom:0}
.duo,.feed-duo{gap:32px}
/* 18px, nao 16: o CORPO do painel recua 18 (margin-left das regras acima e
   padding do .card). Com 16 no cabecalho sobrava um degrau de 2px entre o
   titulo e o conteudo dele — pequeno, mas o olho pega porque a coluna e
   vertical e longa. Os dois tem que bater. */
.bloco > h2,.card > h2{padding:9px 18px;line-height:1.2;margin:0 -18px 14px}

/* O .cont-dir servia para duas coisas opostas: status ("1 de 4 · vale
   Laracoins") e LINK ("abrir o feed"). Os dois saiam em mono 10px cinza, sem
   sublinhado — e o link era a unica saida daquele painel. A regra do
   cabecalho (0-2-1) ainda vencia o `a{color:var(--navy)}` (0-0-1), entao nem
   a cor de link sobrava. */
.bloco > h2 a.cont-dir,.card > h2 a.cont-dir{font-family:var(--fonte-texto);
  font-size:12px;font-weight:600;color:var(--navy);text-transform:none;
  letter-spacing:0}
.bloco > h2 a.cont-dir:hover,.card > h2 a.cont-dir:hover{color:var(--sec-esc);
  text-decoration:underline;text-underline-offset:3px}

/* Traco do numero vazado: #00e5ff80 sobre #00121b da 3,72:1 — passa o minimo
   de texto grande, mas a regra pressupoe traco cheio, nao um fio de 1,3px. No
   print o "1" e o "5" ficavam visivelmente mais fracos que o "38". */
.lfy-num{-webkit-text-stroke:1.3px #00e5ffb3}

/* Fio bege atravessando o ranking entre o 2o e o 3o lugar: sobra de quando
   .rk era cartao com borda inteira. Hoje o unico fio e o de cima. */
.rk.top2,.rk.top3{border-color:var(--linha2)}

/* Post com fundo colorido tinha o texto encostado no fundo, sem respiro —
   o mesmo defeito que este arquivo ja documentava para o .card. */
.post-aviso,.post-conquista{padding-left:16px;padding-right:16px}

/* A revelacao demorava ate 1,22s para a tela ficar inteira (420ms de atraso +
   800ms). Em ferramenta de trabalho isso e espera, nao encanto. */
.cont > *{animation-duration:.42s}
.cont > *:nth-child(2){animation-delay:40ms}
.cont > *:nth-child(3){animation-delay:80ms}
.cont > *:nth-child(4){animation-delay:120ms}
.cont > *:nth-child(5){animation-delay:160ms}
.cont > *:nth-child(6){animation-delay:200ms}
.cont > *:nth-child(n+7){animation-delay:240ms}

/* movimento pesado so no banner alto: em 96px a varredura nao tem onde
   acontecer e a constelacao vira poeira. O compacto fica com a aureola. */
.lfy-escuro:not(.alto)::before{animation:none}
.lfy-escuro:not(.alto)::after{animation:none;opacity:.3}
.lfy-escuro:not(.alto) .constelacao{display:none}

/* ---------- CABECALHO DE PAINEL: volta a ser frase ----------
   Eram ONZE cabecalhos em caixa-alta espacada, identicos, em duas telas. No
   site a caixa-alta espacada e o OLHO — o rotulo pequeno que anuncia a secao,
   uma vez por secao. Aqui ela virou a fonte de todo cabecalho de painel: o
   recurso mais caracteristico da marca virou ruido. Quando tudo e rotulo,
   nada e rotulo. A caixa-alta fica so no .lfy-olho e no .rotulo. */
.card > h2,.bloco > h2{font-family:var(--fonte-texto);font-size:14px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--navy);
  background:none;border-bottom:1px solid var(--linha);padding:12px 18px 10px}

/* hover de linha DENTRO do escuro: --card2 e cinza-claro e virava um flash
   branco no meio do preto */
.lfy-escuro .lista > .item:hover{background:#00e5ff0d}

/* o subtítulo do cabeçalho compacto é UMA linha: a segunda empurra o conteúdo
   para baixo sem dizer nada que o número ao lado já não diga */
.lfy-escuro:not(.alto) .lfy-sub{max-width:none;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   RODÍZIO DE NOTÍCIAS no banner do Início (18/09/2026)
   Pedido do dono: "os avisos, últimas do feed, recados, pontos ficar rodando
   aqui no início, com news".
   Uma linha só, dentro do banner, que troca de assunto a cada 6s. Cada item
   diz de onde veio (AVISO, FEED, PONTOS, ANIVERSÁRIO) num rótulo ciano, e o
   texto ao lado. Pausa quando o mouse está em cima — senão a pessoa não
   consegue terminar de ler o que chamou a atenção dela.
   ========================================================================== */
.lfy-news{position:relative;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--fio-escuro);min-height:52px;overflow:hidden}
.lfy-news-i{position:absolute;left:0;right:0;top:14px;display:flex;align-items:baseline;
  gap:12px;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--curva-site),transform .5s var(--curva-site);
  pointer-events:none}
.lfy-news-i.ativo{opacity:1;transform:none;pointer-events:auto}
.lfy-news-i .de{font-family:var(--fonte-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sec);flex:0 0 auto;
  border:1px solid #00e5ff33;padding:3px 7px;border-radius:3px;background:#00e5ff1a}
.lfy-news-i .tx{color:#c9dbe4;font-size:13.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lfy-news-i .tx b{color:#fff;font-weight:600}
.lfy-news-i .qd{margin-left:auto;font-family:var(--fonte-mono);font-size:10px;
  color:#7ea0b4;white-space:nowrap;flex:0 0 auto}
/* os pontinhos que mostram em qual item está */
.lfy-news-pt{position:absolute;right:0;bottom:2px;display:flex;gap:5px}
.lfy-news-pt span{width:5px;height:5px;border-radius:50%;background:#ffffff2e;
  transition:background .3s var(--curva-site)}
.lfy-news-pt span.on{background:var(--sec)}
@media(max-width:760px){
  .lfy-news-i .qd,.lfy-news-pt{display:none}
  .lfy-news-i .tx{-webkit-line-clamp:3}
}
@media (prefers-reduced-motion:reduce){
  .lfy-news-i{transition:none}
}


/* ======================================================================
   FEED NO FORMATO DO FACEBOOK  (18/09/2026)
   ======================================================================
   POR QUE ISTO ESTA NO FIM DO ARQUIVO, e nao junto do .post la em cima:
   a linha 768 tem ".post .acoes .react-btn > button{padding:8px 12px}", que
   tem a MESMA forca das regras daqui. Com forca igual quem ganha e a ultima
   do arquivo. Escrito la em cima, o botao de reagir ficaria com a largura
   antiga e a barra sairia torta. Este arquivo ja teve dois defeitos assim
   (a lateral e o painel do avatar): regra certa, lugar errado.

   BARRA DE ACOES: tres partes iguais, com um fio em cima. Antes eram tres
   botoes encostados a esquerda, cada um com uma largura. */
.post .acoes{display:flex;gap:0;margin-top:12px;padding-top:4px;
  border-top:1px solid var(--linha2)}
.post .acoes > button,
.post .acoes > .react-btn{flex:1 1 0;min-width:0}
/* o seletor e ">" de proposito: sem ele, os emojis do menu de reagir (que
   tambem sao <button> dentro de .acoes) virariam barras de largura inteira */
.post .acoes > button,
.post .acoes > .react-btn > button{width:100%;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;font-size:13px}
/* O min-height NAO entra na regra de cima de proposito. A linha 785 tem
   "@media(max-width:600px){.post .acoes .react-btn > button{min-height:44px}}"
   com a MESMA forca; media query nao soma forca, entao a regra de cima, por
   estar depois no arquivo, desfazia os 44px de alvo de dedo em silencio. */
.post .acoes > button{min-height:40px}
/* O padding horizontal dos filhos DIRETOS e zero de proposito. Com
   box-sizing:border-box, "flex-basis:0" zera so o conteudo e soma o padding
   por fora: o botao de reagir (que nao tem padding proprio, quem tem e o
   botao de dentro) ficava 12px mais estreito que os vizinhos. A barra saia
   194 / 206 / 206 em vez de 202 / 202 / 202 — medido no Chrome. */
.post .acoes > button{padding:9px 0}
.post .acoes > .react-btn > button{padding:9px 6px}

/* RESUMO: reacoes a esquerda, "N comentarios" a direita. O espaco de cima
   fica nos filhos — assim a linha vazia (post sem reacao e sem comentario)
   nao deixa um buraco antes da barra. */
.post-resumo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.post-resumo .react-sum{margin-top:12px}
/* margin-left:auto, e nao so o space-between do pai: quando ninguem reagiu o
   .react-sum sai com [hidden] e deixa de ser item do flex; com um item so, o
   space-between encosta ele a ESQUERDA e a contagem pulava de lado a cada
   post (medido: 538px com reacao, 17px sem). */
.coment-n{margin-top:12px;margin-left:auto;font-size:12.5px;color:var(--muted)}

/* COMENTARIOS */
.coment-mais{background:none;border:0;padding:10px 0 0;margin:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--txt2)}
.coment-mais:hover{color:var(--ciano-esc);text-decoration:underline}
/* O balao abraca o texto, como no Facebook — nao estica ate a borda.
   A linha 495 deste arquivo tem ".coment .balao{flex:1}", que tem a mesma
   forca desta regra; por isso o "flex" precisa estar escrito aqui tambem,
   senao o valor antigo continua valendo. */
.coment{align-items:flex-start}
.coment .balao{background:var(--card2);border-radius:var(--raio);padding:9px 13px;
  flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
/* .coment-oculto vem DEPOIS de .coment de proposito: as duas tem a mesma
   forca, e antes ele estava acima — funcionava por sorte. */
.coment-oculto{display:none}

/* o campo de escrever: fica SEMPRE visivel, com a sua foto do lado. E o que
   faz a tela parecer conversa em vez de mural. */
.coment-novo{display:flex;align-items:center;gap:9px;margin-top:12px}
.coment-novo input{flex:1;min-width:0;border:1px solid var(--linha);
  background:var(--card2);border-radius:var(--raio);padding:9px 13px;
  font-family:inherit;font-size:16px;color:var(--txt)}
/* 16px e o minimo: abaixo disso o iPhone da zoom sozinho quando a pessoa
   toca no campo, e a tela fica torta ate ela dar pinch para voltar. */
.coment-novo input::placeholder{color:var(--muted)}
/* NAO escrever "outline:0" aqui. A linha 392 deste arquivo documenta esse
   mesmo defeito e eu o reintroduzi: o contorno sumia e quem anda de Tab nao
   sabia em que campo estava — e agora sao ate 20 campos iguais na pagina.
   A borda ciano e o halo, sozinhos, dao 1,6:1 e 1,1:1 sobre branco.
   O realce de cor vem da regra global input:focus (linha 397); aqui so o
   fundo muda. O contorno navy volta pela regra :focus-visible da linha 398. */
.coment-novo input:focus{background:var(--card)}
/* O "Enviar" fica quieto ate a pessoa escrever, mas NUNCA sai do layout.
   Com display:none + :focus-within, no Safari (Mac e iPhone) o campo perde o
   foco no mousedown, o botao vira display:none antes do dedo levantar e o
   clique nunca chega: o comentario simplesmente nao vai. De quebra, o campo
   deixa de encolher 90px no instante em que voce clica nele. */
.coment-novo .btn.sm{opacity:.4;min-height:40px;transition:opacity .12s}
.coment-novo:focus-within .btn.sm{opacity:1}

/* ---- correcoes da revisao do feed (18/09/2026) ---- */

/* O aviso de "nao deu para reagir" mora dentro do .react-btn, que virou um
   item flex travado em um terco da barra. No fluxo, ele quebraria em 3 linhas
   e empurraria a barra inteira para baixo. Fora do fluxo, ele so aparece. */
.post .acoes .react-erro:not([hidden]){position:absolute;left:0;top:100%;
  margin:4px 0 0;width:max-content;max-width:min(280px,72vw);
  font-size:12px;line-height:1.35;color:var(--vermelho);
  background:var(--vermelho-bg);border-radius:var(--raio-sm);padding:5px 9px;z-index:3}

/* A ancora #post<id> levava o topo do cartao para o topo exato da janela.
   Com qualquer barra por cima, o autor e a data sumiam atras dela. */
.post{scroll-margin-top:68px}

@media(max-width:420px){
  /* "Compartilhar" precisa de ~117px e e uma palavra so: nao quebra e nao
     encolhe. Em um terco de 98px ela encostava na vizinha. Fica so o icone —
     o nome continua no aria-label do botao. */
  .post .acoes .rot-acao{display:none}
  .post .acoes > button,
  .post .acoes > .react-btn > button{gap:0}
}
@media(max-width:600px){
  /* alvo de dedo: 44px para os tres, nao so para o de reagir */
  .post .acoes > button,
  .post .acoes > .react-btn > button{min-height:44px}
  .coment-mais{min-height:44px;display:flex;align-items:center}
  .coment-novo .btn.sm{min-height:44px}
}

/* A coluna do feed e item de grid, e item de grid tem min-width:auto: ela NAO
   encolhe abaixo do conteudo mais largo la dentro. Em 360px a trilha ficava
   360,2px dentro de um grid de 328px e a pagina inteira vazava para o lado
   (body 376px). As outras telas nao tem isso porque nao sao grid — o .card do
   ranking encolhe certinho para 328px na mesma largura. */
.feed-wrap{min-width:0}

/* ======================================================================
   COLUNA DA DIREITA E CELULAR  (20/09/2026)
   ====================================================================== */

/* A COLUNA ESTAVA ESPREMIDA. Medido em 1440px: a area do feed tem 1272px,
   os posts ocupam 640 e a coluna 300 — sobravam 300px SEM USO ao lado dela,
   enquanto "Dener Matheus Lopes Do Rosario" quebrava em duas linhas e jogava
   a altura da linha de 44px para 60px. A coluna vira uma serra.
   Tres coisas juntas: a coluna pega parte do espaco que sobrava, a entrelinha
   do nome aperta, e o nome para em 2 linhas com reticencias em vez de crescer.

   O min-width:1101px NAO e enfeite: a regra da linha 1983 colapsa o feed em
   uma coluna abaixo disso, e ela tem a MESMA forca desta. Sem o cerco, esta
   regra (por estar depois no arquivo) desfaria o layout de celular. Este
   arquivo ja teve tres defeitos assim. */
@media(min-width:1101px){
  .feed-duo{grid-template-columns:minmax(0,1fr) 360px}
}
.feed-lado .lista > .item{padding:10px 0;gap:10px}
.feed-lado .lista > .item .txt b{line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word}

@media(max-width:600px){
  /* GRADE PRESA EM DUAS COLUNAS. 14 telas escrevem grid-template-columns no
     atributo style="" do HTML, e atributo vence folha de estilo — a regra que
     colapsa a grade no celular nao tinha efeito nelas. No /perfil o segundo
     cartao comecava em 230px e passava 105px da borda da tela (medido).
     O !important aqui e o unico jeito de desfazer isso sem reescrever os 14
     templates; e uma excecao consciente, nao preguica. */
  .grid.c2,.grid.c3,.grid.c4,.duo,.duo.inverso{grid-template-columns:1fr !important}

  /* ALVO DE DEDO. Medido nas 24 telas: atalho de busca 34px, item do menu
     37px, botao do menu 40px, sino 40px. O minimo para dedo e 44px — abaixo
     disso a pessoa erra o toque e acha que o sistema travou. */
  .nav a,.topo .sino,.menu-btn,.k-atalho,.side .nav a{min-height:44px}
  .nav a,.side .nav a{display:flex;align-items:center}
  .topo .sino,.menu-btn,.k-atalho{min-width:44px}

  /* TEXTO MINUSCULO. Medido: "INTRANET" 9px, titulo de grupo do menu 9,5px,
     dica de tecla 10,5px. Abaixo de 12px ninguem le num telefone.
     ".brand .brand-sub" e nao ".brand-sub": a regra da linha 131 usa as duas
     classes e ganhava da minha. Escrevi errado na primeira tentativa e a
     fonte continuou em 9px (medido). */
  .brand .brand-sub{font-size:12px;letter-spacing:.12em}
  .nav .grupo,.side .grupo{font-size:12px}
  kbd{display:none}   /* atalho de teclado nao existe em telefone */
  /* etiquetas em caixa alta do banner: 11px e 9,5px no desktop. Com o
     espacamento entre letras elas funcionam numa tela grande, mas num
     telefone viram sujeira. As legendas de 11,5px (small, chip) FICAM como
     estao: e hierarquia de texto de apoio, nao defeito. */
  .lfy-olho{font-size:12px}
  .lfy-cab-n .r{font-size:11px}

  /* ZOOM AUTOMATICO DO IPHONE. Campo com menos de 16px faz o Safari dar zoom
     sozinho quando a pessoa toca nele, e a tela fica torta ate ela dar pinch
     para voltar. Medido: 14px e 15px em campo de texto, data, hora e seletor
     nas 24 telas. */
  input,textarea,select{font-size:16px}
  .k-topo input{font-size:16px}   /* a busca tem regra propria e escapava */

  /* SOBRAS do primeiro passe, medidas depois dele: o saldo de Laracoins tinha
     30px, o nome no topo 38px, o "sair" 14px e "Voltar ao inicio" 41px. O
     "sair" e o pior: e um link de texto, mas desloga a pessoa — tem que dar
     para acertar com o dedo. */
  .topo .saldo,.topo .eu{min-height:44px;display:inline-flex;align-items:center}
  .btn,a.btn,button.btn{min-height:44px}
  .btn.link{min-height:44px;display:inline-flex;align-items:center}

  /* TERCEIRO PASSE, medido depois do segundo: abas do compositor 40px, botao
     de foto/marcar 40px, resumo de reacoes 20px, lixeira do post 32px, abas do
     avatar 34px, link "ver tudo" do cartao 14px. Todos sao coisa que a pessoa
     TOCA — o resumo de reacoes abre a lista de quem reagiu, a lixeira apaga
     publicacao. Errar o toque na lixeira e pior que nao acertar. */
  .ct,.comp-act,.react-sum,.av-cats button{min-height:44px}
  .post-del{min-width:44px;min-height:44px}
  .cont-dir{min-height:44px;display:inline-flex;align-items:center}

  /* cabecalho de tabela em 9,5px e legenda em 10,4px: no desktop sao
     etiquetas discretas, no telefone nao da para ler. */
  th,table.gestao-tab th,table.time-tab th{font-size:11px}
  small{font-size:11.5px}
  .cont-dir,.rotulo,span.cont-dir,span.rotulo{font-size:11.5px}

  /* O TOPO QUEBRAVA EM DUAS LINHAS. Menu + titulo + sino + "38 Laracoins" +
     avatar + "Ana" + "sair" nao cabem em 390px, e o flex-wrap empurrava
     metade para uma segunda faixa, comendo 90px de altura em TODA tela.
     Some o que se repete: a palavra "Laracoins" (o numero basta, o link leva
     para a carteira) e o primeiro nome (o avatar ja identifica).
     O "sair" FICA: ele so existe aqui, nao esta no menu lateral — esconder
     deixaria a pessoa sem como sair da conta no celular. */
  .topo{flex-wrap:nowrap}
  .topo h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* a palavra "Laracoins" e um no de texto solto dentro do <a>, sem tag
     propria: zerar a fonte no pai e devolver no <b> e o jeito de some-la sem
     mexer no HTML de base que as 24 telas usam. */
  .topo .saldo{font-size:0;gap:0}
  .topo .saldo b{font-size:15px}
  .topo .eu > div > div{display:none}

  /* Com a fonte dos campos em 16px (contra o zoom do iPhone), o texto de
     exemplo do compositor deixou de caber nas 2 linhas do rows="2" e era
     cortado no meio da palavra ("alguem" sumia). */
  .composer textarea{min-height:92px}

  /* TABELA. Caixa alta com espacamento entre letras quase dobra a largura de
     cada celula: "SEM AVALIACAO" saia em duas linhas e o link "liberar" era
     cortado ao meio. A tabela ja e o elemento mais apertado do telefone —
     nela o efeito tipografico custa legibilidade. A rolagem lateral continua
     (a tabela e display:block com overflow-x:auto), mas agora cabe mais
     coisa antes de precisar rolar. */
  table th,table td,table .rotulo{letter-spacing:0;text-transform:none}

  /* ultimas etiquetas minusculas, medidas no quarto passe: contador ao lado
     do titulo do cartao (10px), legenda do numero grande (10px), etiqueta do
     ranking (9,5px), selo da Larastore (10px). Sao poucas letras, mas em
     caixa alta e a 10px num telefone viram borrao. */
  .card h2 .cont-dir,.bloco > h2 .cont-dir,h2 .cont-dir,.cont-dir,
  .stat .l,.rn .l,.tag-plus,.clima .de,.hmd-btn .l,.lfy-num-r{font-size:11.5px}
  /* os botoes de check-in de humor na tela inicial: so icone, 38px */
  .ck-op button{min-height:44px}

  /* TABELA LARGA VIRA CARTAO. Duas telas (Gestao, 10 colunas, e Avaliacoes,
     7) exigiam arrastar 524px e 310px para o lado num telefone de 390px —
     medido. Arrastar de lado para ler uma tabela nao e "funciona no
     celular". Aqui cada LINHA vira um cartao e cada celula mostra o nome da
     coluna do lado do valor, tirado do proprio data-rot do HTML.
     A primeira celula (a pessoa) nao leva rotulo: ela e o titulo do cartao. */
  table.empilha,table.empilha tbody,table.empilha tr,table.empilha td{
    display:block;width:auto;overflow:visible}
  /* :has(th) e nao "tr:first-child th": escondendo so o <th>, a LINHA do
     cabecalho continuava existindo e virava um cartao vazio no topo da
     lista. Some a linha inteira, em qualquer posicao. */
  table.empilha thead,table.empilha tr:has(th){display:none}
  table.empilha tr{border:1px solid var(--linha);border-radius:var(--raio);
    background:var(--card);padding:12px 14px;margin-bottom:10px}
  table.empilha td{border:0;padding:7px 0;display:flex;gap:14px;
    align-items:baseline;text-align:left}
  table.empilha td + td{border-top:1px solid var(--linha2)}
  table.empilha td[data-rot]::before{content:attr(data-rot);flex:0 0 44%;
    color:var(--muted);font-size:12.5px;line-height:1.35}
  /* .n alinha a direita na tabela de verdade; no cartao empilhado isso
     jogava "Score" para o meio da linha, fora do prumo dos outros rotulos. */
  table.empilha td.n,table.gestao-tab td.n,table.empilha td[class]{
    justify-content:flex-start;text-align:left}
  /* a linha de "liberar PDI" ocupa a largura toda e nao e cartao proprio */
  /* a linha de "liberar" e acao do gestor, nao dado da pessoa: fica presa
     embaixo do cartao dela, sem virar cartao proprio e sem folga solta. */
  table.empilha tr.liberar-linha{border:0;background:none;padding:0;margin:-14px 0 14px}
  table.empilha tr.liberar-linha td{padding:0;display:block}
  table.empilha .lib-linha{display:flex;flex-wrap:wrap;gap:8px 14px;
    align-items:center;padding:10px 14px;background:var(--card2);
    border-radius:0 0 var(--raio) var(--raio)}
  table.empilha .acoes-tab{gap:10px;flex-wrap:wrap}
}

/* ======================================================================
   PESQUISA DE CLIMA — eixos, progresso e ancoras  (23/09/2026)
   ====================================================================== */

/* 18 perguntas numa tela so. Sem saber quanto falta, a pessoa abandona no
   meio — e meia pesquisa de clima nao mede nada. A barra fica grudada no
   topo enquanto ela rola. */
.pq-progresso{position:sticky;top:0;z-index:5;background:var(--card);
  border:1px solid var(--linha);border-radius:var(--raio);padding:10px 14px;
  display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pq-barra{flex:1;height:6px;background:var(--card2);border-radius:3px;overflow:hidden}
.pq-barra span{display:block;height:100%;width:0;background:var(--sec);
  transition:width .25s var(--curva-site)}
.pq-conta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.pq-conta b{color:var(--navy);font-family:var(--fonte-tit);font-weight:600}
.pq-progresso.cheio .pq-barra span{background:var(--verde)}

/* O EIXO separa os blocos de 3 perguntas. Sem ele as 18 viram uma lista
   corrida e a pessoa perde a nocao de assunto. */
.pq-eixo{margin:26px 0 4px;padding:16px 0 10px;border-top:1px solid var(--linha)}
.pq-eixo h3{margin:0;font-family:var(--fonte-texto);font-size:15px;
  font-weight:600;color:var(--navy)}
.pq-eixo p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.pq-eixo .pq-qtd{display:inline-block;margin-top:7px;font-family:var(--fonte-mono);
  font-size:11px;color:var(--txt2);letter-spacing:.06em}

/* As ancoras dizem o que 1 e o que 5 significam. Sem elas a escala e
   ambigua: tem gente que le 1 como "melhor". */
.pq-ancoras{display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-size:12px;color:var(--muted)}

@media(max-width:600px){
  .pq-progresso{gap:10px;padding:10px 12px}
  .pq-conta{font-size:11.5px;white-space:normal}
  .pq-ancoras{font-size:11.5px}
}

/* ======================================================================
   RELATORIO DE CLIMA  (23/09/2026) — so RH e administracao veem esta tela
   ====================================================================== */

/* numeros grandes do topo de cada bloco */
.rel-topo{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 18px}
.rel-num{flex:1 1 150px;border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px;background:var(--card)}
.rel-num b{display:block;font-family:var(--fonte-tit);font-size:30px;
  font-weight:600;color:var(--navy);line-height:1.1;
  font-variant-numeric:tabular-nums}
.rel-num span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.rel-num.destaque{border-color:var(--sec)}
.rel-num.destaque b{color:var(--ciano-esc)}

.rel-sub{margin:20px 0 10px;font-family:var(--fonte-texto);font-size:13px;
  font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.06em}
.rel-sub.verde{color:var(--verde)}
.rel-sub.vermelho{color:var(--vermelho)}

/* uma barra por area / por eixo */
.rel-linha{display:flex;align-items:center;gap:14px;padding:9px 0}
.rel-rot{flex:0 0 190px;font-size:13.5px;color:var(--txt);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O nome do EIXO nao pode ser cortado: "Reconhecimento e remune..." nao diz
   qual eixo e. Quatro dos seis nomes saiam com reticencias (medido). Ele
   quebra em duas linhas em vez de sumir. O nome de AREA continua com
   reticencias — ali cabe, e sao nomes curtos. */
.rel-rot.forte{flex-basis:210px;font-weight:600;color:var(--navy);
  white-space:normal;line-height:1.3}
.rel-barra{flex:1;min-width:0;height:10px;background:var(--card2);
  border-radius:3px;overflow:hidden}
.rel-barra.alta{height:14px}
.rel-barra span{display:block;height:100%;background:var(--sec);
  transition:width .35s var(--curva-site)}
.rel-barra span.verde{background:var(--verde)}
.rel-barra span.vermelho{background:var(--vermelho)}
.rel-val{flex:0 0 96px;text-align:right;font-family:var(--fonte-tit);
  font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.rel-val.grande{font-size:19px}
.rel-val small{display:block;font-family:var(--fonte-texto);font-weight:400;
  font-size:11.5px;color:var(--muted)}

.rel-nota{margin:2px 0 0 204px;font-size:12px;color:var(--muted);line-height:1.45}

/* ponto forte / ponto de atencao */
.rel-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border-top:1px solid var(--linha2)}
.rel-item:first-of-type{border-top:0}
.rel-item-nota{flex:0 0 46px;height:46px;display:grid;place-items:center;
  border-radius:var(--raio);font-family:var(--fonte-tit);font-weight:600;
  font-size:17px;font-variant-numeric:tabular-nums}
.rel-item-nota.verde{background:var(--verde-bg);color:var(--verde)}
.rel-item-nota.vermelho{background:var(--vermelho-bg);color:var(--vermelho)}
.rel-item b{display:block;font-size:13.5px;font-weight:600;color:var(--navy);
  line-height:1.35}
.rel-item small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}

/* bloco de um eixo */
.rel-eixo{padding:12px 0;border-top:1px solid var(--linha2)}
.rel-eixo:first-of-type{border-top:0}
.rel-extremos{margin:8px 0 0 204px;display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;color:var(--txt2);line-height:1.45}
.rel-tag{display:inline-block;font-family:var(--fonte-mono);font-size:11px;
  padding:2px 7px;border-radius:3px;margin-right:6px;white-space:nowrap}
.rel-tag.verde{background:var(--verde-bg);color:var(--verde)}
.rel-tag.vermelho{background:var(--vermelho-bg);color:var(--vermelho)}

/* palavras das respostas abertas */
.rel-temas{display:flex;flex-wrap:wrap;gap:7px}
.rel-tema{border:1px solid var(--linha);border-radius:var(--raio);
  padding:5px 10px;font-size:13px;color:var(--txt2);background:var(--card)}
.rel-tema b{margin-left:5px;font-family:var(--fonte-tit);color:var(--navy)}

.rel-frase{margin:10px 0 0;padding:11px 14px;background:var(--card2);
  border-left:2px solid var(--sec);border-radius:0 var(--raio) var(--raio) 0;
  font-size:13.5px;color:var(--txt);line-height:1.55}

/* formulario do plano de acao */
.rel-form{display:grid;grid-template-columns:2fr 1.4fr 1fr .8fr auto;
  gap:12px;align-items:end}
.rel-form label{margin:0 0 5px}
.rel-form .btn{height:42px}
table.empilha tr.feita b,table tr.feita b{color:var(--muted);
  text-decoration:line-through}

@media(max-width:900px){
  .rel-rot{flex-basis:130px}
  .rel-nota,.rel-extremos{margin-left:144px}
  .rel-form{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .rel-linha{flex-wrap:wrap;gap:8px}
  .rel-rot{flex:1 1 100%}
  .rel-val{flex:0 0 auto;text-align:left}
  .rel-val small{display:inline;margin-left:6px}
  .rel-nota,.rel-extremos{margin-left:0}
  .rel-form{grid-template-columns:1fr}
  .rel-form .btn{width:100%}
}
.rel-oculta{display:none}
.rel-mais{background:none;border:0;padding:12px 0 0;margin:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--txt2)}
.rel-mais:hover{color:var(--ciano-esc);text-decoration:underline}
@media(max-width:600px){.rel-mais{min-height:44px}}