/* Intranet Larafy — identidade oficial (Manual de Marca v1.0)
   Navy #002e43 primária · Cyan #07e0ff 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 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#f6f8f9; --card:#ffffff; --card2:#edf1f3;
  --linha:#d5dee2; --linha2:#e4eaed;
  --txt:#0f2731; --txt2:#3c5665; --muted:#54697a;
  /* PRIMARIA = Navy Larafy (chapado, sem gradiente) */
  --navy:#002e43; --navy-esc:#001a26;
  --ciano:#002e43; --ciano-esc:#001a26; --ciano-bg:#e5edf1;   /* papel de "primária" (focus/notas) */
  --marca:#002e43;                 /* navy chapado */
  --marca-suave:#e4f7fc;           /* tint suave de ciano p/ realces */
  /* SECUNDARIA = Cyan (acento/ações) */
  --sec:#07e0ff; --sec-esc:#00738f; --sec-bg:#e4f7fc;
  --acao:#002e43; --acao-esc:#001824;   /* botões: turquesa chapado, texto branco */
  --verde:#0e7a52; --verde-bg:#e7f3ed;
  --amarelo:#9c6100; --amarelo-bg:#fbf2e3;   /* 4,59:1 no proprio tom (era 3,79) */
  --vermelho:#b03a2e; --vermelho-bg:#fbecea;
  --roxo:#4a3aa7; --roxo-bg:#eeebf7;
  --fonte-tit:'Montserrat','IBM Plex Sans',system-ui,sans-serif;
  --fonte-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --raio:6px; --raio-sm:4px;
  /* movimento: uma curva (sai rapido, chega devagar) e quatro tempos.
     Medidos no CSS de Linear, Ramp, Mercury, Stripe, Vercel e Raycast. */
  --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,.20);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  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}

/* ---------- Layout ---------- */
.wrap{display:flex;min-height:100vh}
.side{
  width:236px;flex:0 0 236px;background:var(--navy);border-right:0;
  padding:16px 12px 20px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:baseline;gap:9px;padding:6px 10px 22px}
.brand .logo{height:26px;width:auto}
.brand .brand-sub{font-size:9.5px;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:3px;font-family:var(--fonte-tit)}
.nav a{
  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;
  position:relative;z-index:1;
  transition:background var(--t-micro) var(--curva), color var(--t-micro) var(--curva);
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav a.ativo{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 2px 0 0 var(--sec)}
.nav a.ativo .ic{color:var(--sec)}
.nav a.ativo .ic{filter:none}
.nav a .ic{width:18px;height:18px;flex:0 0 18px;stroke-width:2}
.nav a svg.ic{color:currentColor}
.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:12px;padding:10px 12px;border-radius:4px;margin:1px 0;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.60);cursor:not-allowed;user-select:none}
.nav-bloq .ic{width:18px;height:18px;flex:0 0 18px}
/* sao os rotulos que organizam o menu inteiro: .42 dava 3,7:1 a 9,5px */
.nav .grupo{font-family:var(--fonte-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.62);font-weight:500;padding:18px 12px 6px;margin-top:2px;
  border-top:1px solid rgba(255,255,255,.07)}
.nav .grupo:first-child{border-top:0;margin-top:0;padding-top:6px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{
  display:flex;align-items:center;gap:12px;padding:11px 30px;border-bottom:1px solid var(--linha);
  background:var(--card);position:sticky;top:0;z-index:5;
}
.topo h1{font-size:21px;margin:0;font-weight:800;letter-spacing:-.032em;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-mono);font-size:14px;color:var(--navy);font-weight:600}
.saldo:hover{text-decoration:none;color:var(--navy)}
.eu{display:flex;align-items:center;gap:10px}
.av{
  width:32px;height:32px;border-radius:3px;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. */
.cont{padding:26px 34px;max-width:1000px;width:100%;margin:0 auto}
.cont.larga{max-width:1340px}
.cont.media{max-width:1180px}

/* ---------- 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). */
.card{background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin-bottom:32px}
.card:last-child{margin-bottom:0}
.card + .card{margin-top:0}
.card.unidade{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:20px;margin-bottom:16px}

/* ---------------------------------------------------------------------------
   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}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;width:280px;flex-basis: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 (#07e0ff) 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-mono);font-size:11px;font-weight:500;color:var(--txt2);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{background:none;border:0;border-top:1px solid var(--linha);border-radius:0;
  padding:20px 0;margin:0;box-shadow:none}
.post:first-of-type{border-top:0;padding-top:8px}
.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)}

/* ---------- Stats ---------- */
.stat{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:20px;box-shadow:var(--sombra-sm)}
/* o numero em mono (o kit reserva Montserrat para TITULO, nao para dado) */
.stat .n{font-family:var(--fonte-mono);font-size:28px;font-weight:500;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}
.stat-ic{display:flex;align-items:center;gap:14px}
.stat-ic .n{margin:0}.stat-ic .l{margin-top:2px}
.stat-ic .si{width:46px;height:46px;flex:0 0 46px;border-radius:4px;background:var(--sec-bg);color:var(--sec-esc);display:grid;place-items:center}
.stat-ic .si i{width:22px;height:22px;stroke-width:2.2}
a.stat-ic:hover{border-color:var(--sec)}
.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 ---------- */
body.login-page{background:var(--marca)}
.login-box{max-width:430px;margin:0 auto;padding:0 20px;min-height:100vh;display:grid;place-items:center}
.login-card{background:var(--card);border:1px solid var(--linha);border-radius:6px;padding:40px;box-shadow:var(--sombra-lg);width:100%}
.login-card .lg{font-family:var(--fonte-tit);font-size:40px;font-weight:800;text-align:center;margin-bottom:0;letter-spacing:-.04em;color:var(--navy)}
.login-card .lg span{color:var(--sec-esc)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);border:1px solid var(--linha);color:var(--txt);font-weight:600;padding:13px;border-radius:4px;width:100%;margin-top:8px;box-shadow:var(--sombra-sm)}
.gbtn:hover{text-decoration:none;background:var(--card2)}
.sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;margin:22px 0;text-transform:uppercase;letter-spacing:1px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--linha)}
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 */
.composer{padding:0 0 18px;border-bottom:1px solid var(--linha);background:none;border-radius:0}
.comp-tabs{display:flex;gap:4px;margin-bottom:12px}
.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}
.react-sum span{font-size:15px}

/* Reações popover (hover, estilo Facebook) */
.acoes{position:relative}
.react-btn{position:relative;display:inline-block}
.react-btn > 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}
.react-btn > button.on{color:var(--ciano-esc)}
.react-btn:hover > button{background:var(--card2)}
.react-pop{position:absolute;bottom:100%;left:0;margin-bottom:6px;background:var(--card);border:1px solid var(--linha);
  border-radius:3px;padding:5px 8px;box-shadow:var(--sombra-lg);display:none;gap:2px;z-index:6}
.react-btn:hover .react-pop{display:flex}
.react-pop form{margin:0}
.react-pop button{background:none;border:0;font-size:22px;cursor:pointer;padding:2px 4px;transition:.12s;line-height:1}
.react-pop button:hover{transform:scale(1.15)}
.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}

/* entrada da página: os blocos sobem suave, em cascata */
/* Tudo subindo ao abrir a pagina era o maior sinal de "feito por IA".
   Movimento agora so quando algo muda de estado (aviso que entra, barra que preenche). */
.cont > *:nth-child(1){animation-delay:.02s}
.cont > *:nth-child(2){animation-delay:.07s}
.cont > *:nth-child(3){animation-delay:.12s}
.cont > *:nth-child(4){animation-delay:.17s}
.cont > *:nth-child(n+5){animation-delay:.2s}

/* 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}
.termo-bar{position:relative;overflow:visible;height:10px;border-radius:3px;background:linear-gradient(90deg,#b03a2e 0%,#b26b00 50%,#0e7a52 100%)}
.termo-mark{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--navy);
  transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,46,67,.25);transition:left .6s var(--ease)}
.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:8px}
.clima .n{font-family:var(--fonte-mono);font-size:30px;font-weight:600;color:var(--navy);letter-spacing:-.02em}
.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-family:var(--fonte-mono);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-mono);font-size:16px;font-weight:600}
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);
}
.nav.tem-luz a.ativo{box-shadow: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-family:var(--fonte-mono); 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}