/* 🔴 OS DEGRAUS QUE FALTAVAM NA ESCALA (achado 31/08)

   `--e-5` estava sendo usado 35 vezes neste arquivo e NUNCA foi definido em
   `renovaco.css`. `var()` com variável inexistente não cai num valor anterior:
   a propriedade inteira vira inválida em tempo de cálculo e o padding some.
   Trinta e cinco espaçamentos viravam ZERO em silêncio — sem erro no console,
   sem aviso no validador. Era a causa real do "sem margem, cara de amador".

   Definidos aqui, e não em `renovaco.css`, porque aquele arquivo é a
   identidade oficial e é compartilhado; a escala continua a mesma, só ganha
   os degraus intermediários que o CSS já supunha existir. */
:root {
  --e-5: 20px;   /* entre e-4 (16) e e-6 (24) */
  --e-7: 28px;   /* entre e-6 (24) e e-8 (32) */
  --txt-md: 1rem;
}

/* ============================================================================
   RENOVAÇO — pele do sistema, sobre os tokens oficiais de /renovaco.css

   Cores: navy #1B3B69 · turquesa #29B8C0 · cinza #4D4D4D — medidas na logo.
   A proporção da marca manda: navy domina, branco respira, turquesa pontua.

   🔴 REGRA: nenhum hex de marca aqui. Só var(--…). Se aparecer um # de cor,
   ou é estado ainda não tokenizado, ou é erro. Ver IDENTIDADE-VISUAL.md §9.
   ============================================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo-alt);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .marca, .porta-titulo, .kpi .n {
  font-family: var(--fonte-titulo);
  letter-spacing: -0.02em;
}

a { color: var(--acento-texto); }   /* turquesa-800: o único legível sobre claro */

.wrap { max-width: 780px; margin: 0 auto; padding: 26px 20px 60px; }
.wrap-largo { max-width: var(--largura-conteudo); }

/* ---------- faixa institucional: navy sólido + logo negativa ---------- */
.topo {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  background: var(--navy-500);
  margin: -26px -20px var(--e-6);
  padding: var(--e-4) var(--e-6);
  border-bottom: 3px solid var(--turq-500);
}
.topo .logo { height: 34px; width: auto; display: block; }
.marca { font-weight: 700; font-size: var(--txt-lg); color: var(--texto-invertido); }
.selo {
  margin-left: auto; font-size: var(--txt-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--turq-200); border: 1px solid var(--navy-400); padding: 5px 11px;
  border-radius: var(--raio-full); font-weight: 600;
}

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--e-6);
  margin-bottom: var(--e-4);
}
.hero { padding: var(--e-8) var(--e-6); }
h1 { font-size: var(--txt-2xl); line-height: 1.15; margin: 0 0 var(--e-3); color: var(--texto-forte); }
h2 { font-size: var(--txt-lg); margin: 0 0 var(--e-2); color: var(--texto-forte); }
h3 {
  font-size: var(--txt-xs); margin: 0 0 var(--e-3); color: var(--texto-suave); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-left: 4px solid var(--turq-500); padding-left: var(--e-2);
}
h3 .media { text-transform: none; letter-spacing: 0; color: var(--acento-texto); }
p.sub { color: var(--texto-suave); margin: 0 0 var(--e-5); max-width: var(--largura-texto); }
.rodape { color: var(--texto-suave); font-size: var(--txt-sm); text-align: center; margin: var(--e-6) 0 0; }
.mono { font-family: var(--fonte-mono); }
.tique { font-size: 46px; line-height: 1; margin-bottom: var(--e-3); color: var(--ok); }

/* ---------- portas da tela inicial ---------- */
.portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--e-4); margin-top: var(--e-6); }
.porta {
  display: block; text-decoration: none; color: inherit; padding: var(--e-6);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-lg);
  background: var(--superficie); transition: border-color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido);
}
.porta:hover { border-color: var(--turq-500); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.porta-tag { font-size: var(--txt-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-texto); font-weight: 700; }
.porta.alt .porta-tag { color: var(--navy-400); }
.porta-titulo { font-size: var(--txt-lg); font-weight: 700; margin: 7px 0 var(--e-2); color: var(--texto-forte); }
.porta-desc { color: var(--texto-suave); font-size: var(--txt-sm); }
.porta-cta { margin-top: var(--e-3); font-weight: 700; color: var(--acento-texto); font-size: var(--txt-sm); }
.porta.alt .porta-cta { color: var(--navy-500); }

/* ---------- campos ---------- */
.campo { margin-bottom: var(--e-5); }
.campo > label.titulo { display: block; font-weight: 600; margin-bottom: 6px; color: var(--texto-forte); }
.campo .ajuda { color: var(--texto-suave); font-size: var(--txt-sm); margin-bottom: 9px; }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  width: 100%; min-height: var(--alvo-toque); padding: 11px 14px;
  border-radius: var(--raio-md); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: var(--txt-base);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--turq-500); box-shadow: var(--anel-foco);
}

.opcoes { display: grid; gap: var(--e-2); }
.opcoes.duas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.opcao {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: var(--alvo-toque);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-md); cursor: pointer;
  background: var(--superficie); transition: border-color var(--t-rapido), background var(--t-rapido);
  font-size: var(--txt-sm);
}
.opcao:hover { border-color: var(--turq-400); }
.opcao input { accent-color: var(--turq-600); width: 18px; height: 18px; flex: none; }
.opcao.marcada { border-color: var(--turq-500); background: var(--turq-50); }

.acoes { display: flex; gap: 10px; align-items: center; margin-top: var(--e-5); flex-wrap: wrap; }
button, .btn {
  font-family: inherit; font-size: var(--txt-base); font-weight: 600; cursor: pointer;
  min-height: var(--alvo-toque); padding: 0 var(--e-6); border-radius: var(--raio-md);
  border: 1px solid transparent; transition: background var(--t-rapido), filter var(--t-rapido);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
button:disabled { opacity: 0.45; cursor: default; }
.primario { background: var(--navy-500); color: var(--texto-invertido); }
.primario:hover:not(:disabled) { background: var(--navy-600); }
/* Acento: texto NAVY sobre turquesa. Branco sobre turquesa reprova (2,4:1). */
.acento { background: var(--turq-500); color: var(--navy-900); }
.acento:hover:not(:disabled) { background: var(--turq-600); }
.secundario { background: transparent; color: var(--navy-500); border-color: var(--navy-500); }
.secundario:hover { background: var(--navy-50); }
.mini { min-height: 34px; padding: 0 var(--e-3); font-size: var(--txt-sm); }
.aviso { color: var(--erro); font-size: var(--txt-sm); margin-top: 10px; min-height: 20px; }

/* ================= conversa ================= */
body.modo-chat { background: var(--fundo); }
body.modo-chat .wrap { padding-bottom: 210px; }

.chat-topo { position: sticky; top: 0; z-index: 5; background: var(--fundo); padding: 6px 0 var(--e-3); margin-bottom: var(--e-2); }
.barra { height: 6px; background: var(--navy-100); border-radius: var(--raio-full); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--turq-500); border-radius: var(--raio-full); transition: width 0.4s ease; }
.chat-passo { font-size: var(--txt-xs); color: var(--texto-suave); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.08em; }

.chat { display: flex; flex-direction: column; gap: 10px; }
.balao { max-width: 86%; padding: 13px 17px; border-radius: var(--raio-lg); white-space: pre-wrap; animation: surge 0.24s ease; }
.balao.bot { background: var(--navy-50); border: 1px solid var(--navy-100); color: var(--texto); border-bottom-left-radius: 5px; align-self: flex-start; }
.balao.eu { background: var(--navy-500); color: var(--texto-invertido); border-bottom-right-radius: 5px; align-self: flex-end; font-weight: 500; }
@keyframes surge { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.balao.digitando { display: flex; gap: 5px; padding: 16px 18px; }
.balao.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-300); animation: pisca 1.3s infinite; }
.balao.digitando i:nth-child(2) { animation-delay: 0.18s; }
.balao.digitando i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pisca { 0%, 60%, 100% { opacity: 0.28; } 30% { opacity: 1; } }

.marco { text-align: center; margin: var(--e-5) 0 4px; }
.marco span {
  font-size: var(--txt-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--acento-texto); border: 1px solid var(--turq-200); border-radius: var(--raio-full);
  padding: 5px 14px; background: var(--turq-50);
}

.entrada {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--fundo) 22%);
  padding: var(--e-6) 20px var(--e-4);
}
.entrada > * { max-width: 780px; margin-left: auto; margin-right: auto; }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  min-height: var(--alvo-toque); padding: 0 17px; border-radius: var(--raio-full);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font-size: var(--txt-sm); font-weight: 600;
}
.chip:hover { border-color: var(--turq-500); color: var(--acento-texto); }
.chip.on { background: var(--turq-500); color: var(--navy-900); border-color: var(--turq-500); }
.chip.outro { color: var(--texto-suave); font-style: italic; }

.escala10 { display: flex; gap: 6px; flex-wrap: wrap; }
.nota {
  flex: 1; min-width: var(--alvo-toque); padding: 12px 0; border-radius: var(--raio-md);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font-weight: 700; font-family: var(--fonte-mono);
}
.nota:hover { background: var(--turq-500); color: var(--navy-900); border-color: var(--turq-500); }
.escala-legenda { display: flex; justify-content: space-between; font-size: var(--txt-xs); color: var(--texto-suave); margin-top: 7px; }

.campo-chat { display: flex; gap: var(--e-2); align-items: flex-end; }
.campo-chat textarea { min-height: 48px; max-height: 160px; resize: none; }
.campo-chat .enviar { flex: none; }
.campo-outro { margin-top: 9px; }
.acoes-chat { margin-top: 10px; display: flex; gap: 10px; }
.pular { display: block; margin: 9px auto 0; }

/* ================= painel ================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: 17px; }
.kpi .n { font-size: var(--txt-2xl); font-weight: 700; line-height: 1; color: var(--texto-forte); font-variant-numeric: tabular-nums; transition: color 0.4s; }
.kpi .r { font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); margin-top: var(--e-2); }
.kpi.destaque { border-left: 4px solid var(--turq-500); }
.kpi.destaque .n { color: var(--acento-texto); }
.kpi .n.pulsou { color: var(--ok); }

.tabs { display: flex; gap: var(--e-2); margin-bottom: var(--e-4); flex-wrap: wrap; }
.tabs a {
  padding: 9px 16px; border-radius: var(--raio-full); border: 1px solid var(--borda-forte);
  text-decoration: none; color: var(--texto-suave); font-size: var(--txt-sm); background: var(--superficie);
}
.tabs a:hover { border-color: var(--turq-400); color: var(--acento-texto); }
.tabs a.ativa { background: var(--navy-500); color: var(--texto-invertido); border-color: var(--navy-500); font-weight: 600; }
.sub-tabs { margin-bottom: var(--e-3); }

.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th {
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  color: var(--navy-700); background: var(--navy-50); position: sticky; top: 0;
}
td.num, th.num { text-align: right; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
td.matricula { font-family: var(--fonte-mono); font-weight: 500; color: var(--texto-forte); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--navy-50); }

/* Estado nunca é só cor: o texto da pílula entrega o sinal sozinho. */
.pill { font-size: var(--txt-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--raio-full); text-transform: uppercase; letter-spacing: 0.04em; }
.pill.respondeu, .pill.ativo { background: var(--ok-bg); color: var(--ok); }
.pill.abriu, .pill.provisoria { background: var(--atencao-bg); color: var(--atencao); }
.pill.nao_abriu, .pill.inativo { background: var(--erro-bg); color: var(--erro); }
.pill.conflito { background: var(--erro-bg); color: var(--erro); }
.tag-tipo { font-size: var(--txt-xs); padding: 3px 9px; border-radius: var(--raio-full); border: 1px solid var(--borda-forte); color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.tag-tipo.ex { border-color: var(--navy-300); color: var(--navy-500); }

.agregado { margin-bottom: var(--e-6); }
.agregado .linha { display: grid; grid-template-columns: minmax(140px, 280px) 1fr 92px; gap: var(--e-3); align-items: center; margin-bottom: 6px; font-size: var(--txt-sm); }
.agregado .rot { color: var(--texto-suave); }
.agregado .trilho { background: var(--navy-100); border-radius: var(--raio-full); height: 22px; overflow: hidden; }
.agregado .trilho i { display: block; height: 100%; background: var(--turq-500); transition: width 0.5s; }
.agregado .qtd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--fonte-mono); }
.agregado .qtd span { color: var(--texto-suave); font-weight: 400; font-size: var(--txt-xs); }

.citacao { border-left: 3px solid var(--turq-500); padding: var(--e-2) 0 var(--e-2) var(--e-3); margin-bottom: 10px; color: var(--texto); }
.link-copia { background: var(--navy-50); border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 11px 14px; font-size: var(--txt-sm); word-break: break-all; font-family: var(--fonte-mono); }

.aovivo { display: inline-flex; align-items: center; gap: 7px; font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); }
.aovivo b { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: bate 2s infinite; }
@keyframes bate { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ================= cadastro da rede ================= */
.filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--e-4); }
.filtros .campo { margin: 0; flex: 1 1 200px; }
.filtros .campo.estreito { flex: 0 0 170px; }

.aniversarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-3); }
.aniv {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--superficie);
}
.aniv .dia {
  flex: none; width: 46px; height: 46px; border-radius: var(--raio-md);
  background: var(--turq-500); color: var(--navy-900);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--fonte-mono); font-weight: 700; line-height: 1;
}
.aniv .dia small { font-size: 9px; font-weight: 500; text-transform: uppercase; }
.aniv .quem { min-width: 0; }
.aniv .quem b { display: block; color: var(--texto-forte); font-weight: 600; }
.aniv .quem span { color: var(--texto-suave); font-size: var(--txt-sm); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aniv.hoje { border-color: var(--turq-500); box-shadow: var(--sombra-2); }

.faixa-aviso {
  background: var(--atencao-bg); border: 1px solid var(--atencao); border-left-width: 4px;
  border-radius: var(--raio-md); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4);
  color: var(--atencao); font-size: var(--txt-sm);
}
.faixa-aviso b { color: var(--atencao); }
.vazio { text-align: center; color: var(--texto-suave); padding: var(--e-12) var(--e-4); }

/* ==================================================================
   TELA DE ABERTURA — apresentação + entrar. Só isso.
   Nada de números do cadastro nem de atalhos para o que exige acesso:
   quem está na porta não precisa saber quantos ex-parceiros a rede tem,
   e cartão trancado na cara de quem chega só frustra.
   ================================================================== */
body.tela-abertura { background: var(--navy-500); }
body.tela-abertura .wrap {
  min-height: 100vh; max-width: 560px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--e-8) var(--e-6);
}
.abertura { display: flex; flex-direction: column; align-items: center; width: 100%; }
.abertura-logo { width: min(260px, 72%); height: auto; margin-bottom: var(--e-8); }
.abertura h1 {
  color: var(--texto-invertido); font-size: var(--txt-2xl);
  line-height: 1.2; margin: 0 0 var(--e-3);
}
.abertura-sub { color: var(--turq-200); margin: 0 0 var(--e-8); font-size: var(--txt-base); }
.abertura-btn { width: 100%; max-width: 320px; min-height: 52px; font-size: var(--txt-lg); }
.abertura-link {
  margin-top: var(--e-5); color: var(--turq-300); font-size: var(--txt-sm);
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px; min-height: 44px; display: inline-flex; align-items: center;
}
.abertura-link:hover { color: var(--texto-invertido); }
.abertura-pe {
  margin: var(--e-12) 0 0; text-align: center;
  color: rgba(255, 255, 255, 0.45); font-size: var(--txt-sm);
}
/* alvo de toque de 44px também aqui: é link de dedo, não de mouse */
.abertura-pe a {
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
}

@media (max-width: 640px) {
  body.tela-abertura .wrap { padding: var(--e-6) var(--e-5); }
  .abertura h1 { font-size: var(--txt-xl); }
  .abertura-logo { margin-bottom: var(--e-6); }
}

/* ==================================================================
   SISTEMA — menu lateral permanente
   A navegação fica à vista o tempo todo, como no app que a rede já
   usava: ninguém precisa lembrar de endereço nem voltar para a home
   para trocar de área. No celular ela vira uma barra no topo, que
   rola de lado — sem menu-sanduíche, que esconde justamente de quem
   tem mais dificuldade de achar.
   ================================================================== */
body.com-menu { background: var(--navy-50); }

.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--navy-500); color: rgba(255, 255, 255, 0.85);
  padding: var(--e-5) var(--e-3) var(--e-4);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca-lateral { display: block; padding: 0 var(--e-3) var(--e-4); }
.marca-lateral img { height: 36px; width: auto; display: block; }

.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.grupo {
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.45); font-weight: 700;
  margin: var(--e-4) var(--e-3) 6px;
}
.item {
  display: flex; align-items: center; gap: 11px; min-height: 44px;
  padding: 10px var(--e-3); border-radius: var(--raio-md);
  color: rgba(255, 255, 255, 0.85); text-decoration: none;
  font-size: var(--txt-sm); font-weight: 500; transition: background 0.15s ease;
}
.item:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.item.ativo { background: var(--turq-500); color: var(--navy-900); font-weight: 700; }
.item .ic { width: 19px; height: 19px; flex: none; }
.item span { flex: 1; }
.item em {
  font-style: normal; font-size: var(--txt-xs); font-weight: 600;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6);
  padding: 2px 8px; border-radius: var(--raio-full);
}
/* O que ainda não existe aparece — mas não finge que dá para clicar. */
.item.futuro { color: rgba(255, 255, 255, 0.40); cursor: default; }
.item.futuro:hover { background: none; color: rgba(255, 255, 255, 0.40); }
.item .cadeado { width: 14px; height: 14px; flex: none; color: rgba(255, 255, 255, 0.42); }
.item.ativo .cadeado { color: rgba(11, 25, 44, 0.5); }

.lateral-pe { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: var(--e-3); margin-top: var(--e-4); }
.item.entrar { background: var(--turq-500); color: var(--navy-900); font-weight: 700; }
.item.entrar:hover { background: var(--turq-400); color: var(--navy-900); }
.quem-sou { display: flex; gap: 10px; align-items: center; padding: 0 var(--e-3) var(--e-3); }
.quem-sou b { color: #fff; display: block; font-size: var(--txt-sm); }
.quem-sou span { font-size: var(--txt-xs); color: rgba(255, 255, 255, 0.55); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--turq-500); color: var(--navy-900);
  display: grid; place-items: center; font-weight: 700;
}

.conteudo { padding: var(--e-8); max-width: 1180px; }
.conteudo > .tabs:first-child { margin-top: 0; }

/* ---------------- página inicial ---------------- */
.inicio-topo {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--e-8); align-items: start; margin-bottom: var(--e-8);
}
.ola { color: var(--turq-800); font-weight: 700; margin-bottom: var(--e-2); }
.inicio-topo h1 { font-size: var(--txt-3xl); margin-bottom: var(--e-3); }
.inicio-topo .sub { max-width: 60ch; }

.cartao-acesso {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: var(--e-5); box-shadow: var(--sombra-1);
  border-top: 3px solid var(--turq-500);
}
.cartao-acesso b { display: block; color: var(--texto-forte); font-size: var(--txt-lg); margin-bottom: 6px; }
.cartao-acesso span { display: block; color: var(--texto-suave); font-size: var(--txt-sm); margin-bottom: var(--e-4); }
/* <a> não herda o min-height que os <button> têm: sem isto o alvo de toque
   principal da home fica com menos de 40px no celular. */
.cartao-acesso .botao {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--alvo-toque, 44px); padding: 0 var(--e-6);
  border-radius: var(--raio-md); font-weight: 600; text-decoration: none;
}
.cartao-acesso.conectado { border-top-color: var(--ok, var(--turq-600)); }
.nota-acesso {
  margin: var(--e-4) 0 0; padding-top: var(--e-3); border-top: 1px solid var(--borda);
  font-size: var(--txt-sm); color: var(--texto-suave);
}
.nota-acesso a { color: var(--turq-800); font-weight: 600; }

.kpis-inicio { margin-bottom: var(--e-8); }
h2.secao { font-size: var(--txt-xl); margin: var(--e-8) 0 var(--e-4); color: var(--texto-forte); }
h2.secao:first-of-type { margin-top: 0; }

/* Quatro atalhos em 2×2: três em cima e um órfão embaixo fica torto e faz o
   quarto parecer menos importante que os outros. */
.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
@media (max-width: 780px) { .atalhos { grid-template-columns: 1fr; } }
.atalho {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: var(--e-5); text-decoration: none; display: flex; flex-direction: column;
  gap: var(--e-3); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.atalho:hover { transform: translateY(-2px); border-color: var(--turq-500); box-shadow: var(--sombra-2); }
.atalho.destaque { border-color: var(--turq-500); background: var(--turq-50); }
.atalho-ic {
  width: 42px; height: 42px; border-radius: var(--raio-md); flex: none;
  background: var(--navy-50); color: var(--navy-500); display: grid; place-items: center;
}
.atalho.destaque .atalho-ic { background: var(--turq-500); color: var(--navy-900); }
.atalho-ic .ic { width: 22px; height: 22px; }
.atalho-tag {
  font-size: var(--txt-xs); letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--turq-800); margin-bottom: 5px;
}
.atalho-titulo { font-family: var(--fonte-titulo, inherit); font-size: var(--txt-lg); font-weight: 700; color: var(--texto-forte); margin-bottom: 6px; }
.atalho-desc { color: var(--texto-suave); font-size: var(--txt-sm); }
.atalho-cta { margin-top: auto; font-weight: 700; color: var(--navy-500); font-size: var(--txt-sm); }
.atalho.destaque .atalho-cta { color: var(--turq-800); }

.futuros { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); }
.futuro-cartao {
  display: flex; gap: var(--e-3); align-items: flex-start;
  background: var(--superficie); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-lg); padding: var(--e-4); color: var(--texto-suave);
}
.futuro-cartao .ic { width: 22px; height: 22px; flex: none; color: var(--navy-300); margin-top: 2px; }
/* só o TÍTULO do cartão vira bloco; um <b> no meio da frase continua em linha */
.futuro-cartao > div > b { display: block; color: var(--texto-forte); margin-bottom: 3px; }
.futuro-cartao span { font-size: var(--txt-sm); }

@media (max-width: 900px) {
  /* Menu vira faixa no topo. Sem sanduíche (esconde de quem tem mais
     dificuldade) e — corrigido em 28/08 — sem rolagem lateral: a barra rolando
     deixava "Painel" e "Direção" FORA DA TELA sem nenhuma pista de que existiam.
     Agora os itens QUEBRAM LINHA: ocupa mais altura e mostra tudo, que é o que
     importa em quem abre o sistema pela primeira vez no celular. */
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: static; height: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: var(--e-2); padding: var(--e-3) var(--e-4); overflow: visible;
  }
  .marca-lateral { padding: 0 var(--e-3) 0 0; min-height: 44px; display: flex; align-items: center; }
  .marca-lateral img { height: 28px; }
  .menu { flex-direction: row; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
  .grupo { display: none; }
  .item { white-space: nowrap; padding: 10px 13px; min-height: 44px; }
  .item.futuro { display: none; }          /* no celular, só o que dá para usar */
  .item em { display: none; }
  .lateral-pe { border: 0; margin: 0; padding: 0; flex: 1 1 100%; }
  .item.entrar, .item.sair { justify-content: center; min-height: 46px; }
  .quem-sou { display: none; }
  .conteudo { padding: var(--e-5) var(--e-4) var(--e-12); }
  .inicio-topo { grid-template-columns: 1fr; gap: var(--e-5); }
}

@media (max-width: 640px) {
  h1 { font-size: var(--txt-xl); }
  .inicio-topo h1 { font-size: var(--txt-2xl); }
  .card { padding: var(--e-5) 17px; }
  .hero { padding: var(--e-6) 20px; }
  .wrap { padding: 18px 14px 44px; }
  .topo { margin: -18px -14px var(--e-5); padding: var(--e-3) var(--e-4); }
  .balao { max-width: 92%; }
  .agregado .linha { grid-template-columns: 1fr; gap: 3px; }
  .agregado .qtd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ================= atalho de voltar =================
   Em toda tela, sempre no mesmo lugar: canto superior esquerdo, acima do
   conteúdo. Aponta para o passo anterior de VERDADE — `history.back()` depois
   de um POST devolve "reenviar formulário", que assusta quem não é técnico. */
.voltar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--e-3) 0 var(--e-2);
  margin-bottom: var(--e-4);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-full);
  background: var(--superficie); color: var(--texto-suave);
  text-decoration: none; font-size: var(--txt-sm); font-weight: 600;
  transition: border-color var(--t-rapido), color var(--t-rapido);
}
.voltar:hover { border-color: var(--turq-500); color: var(--acento-texto); }
.voltar svg { width: 18px; height: 18px; flex: none; }

/* ================= passos do primeiro acesso ================= */
.passos {
  display: flex; gap: var(--e-2); list-style: none; margin: 0 0 var(--e-6); padding: 0;
  flex-wrap: wrap;
}
.passos li {
  display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 110px;
  font-size: var(--txt-xs); color: var(--texto-suave);
}
.passos b {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--fonte-mono); font-size: 12px;
  background: var(--navy-100); color: var(--navy-500);
}
.passos li.agora { color: var(--texto-forte); font-weight: 600; }
.passos li.agora b { background: var(--navy-500); color: var(--texto-invertido); }
.passos li.feito b { background: var(--turq-500); color: var(--navy-900); }


/* ══════════════════════════════════════════════════════════════════════════
   MÓDULOS — o painel, a hierarquia e as telas do sistema

   PROFUNDIDADE DE VERDADE, e não uma sombra chapada: cada superfície leva
   TRÊS camadas empilhadas — um brilho branco por dentro na borda de cima (a
   luz batendo), uma sombra curta e fechada (o contato com o fundo) e uma
   longa e aberta (a distância). É isso que faz o cartão parecer levantado em
   vez de desenhado. Uma sombra só sempre entrega o "caixa sem profundidade".

   Movimento: 1–2 elementos por tela, 150–300ms, e tudo desliga em
   `prefers-reduced-motion` — movimento causa mal-estar real em parte das
   pessoas, e isso não é preferência de gosto.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* elevação em camadas: contato + distância + luz interna */
  --elev-1:
    0 1px 1px rgba(11, 25, 44, .04),
    0 2px 6px -1px rgba(11, 25, 44, .06),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  --elev-2:
    0 1px 2px rgba(11, 25, 44, .06),
    0 8px 20px -6px rgba(11, 25, 44, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  --elev-3:
    0 2px 4px rgba(11, 25, 44, .07),
    0 18px 40px -12px rgba(11, 25, 44, .20),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  --elev-navy:
    0 2px 6px rgba(11, 25, 44, .30),
    0 22px 48px -14px rgba(11, 25, 44, .45),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  --t-suave: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* Blobs e anéis são posicionados para fora de propósito. `clip` contém sem
   criar contexto de scroll — `hidden` resolveria e quebraria o sticky. */
html, body { overflow-x: clip; }

/* ---------- cabeçalho da tela ---------- */

.cabeca { margin-bottom: var(--e-6); position: relative; }
.cabeca h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -.025em; line-height: 1.1;
}
.cabeca .sub { font-size: var(--txt-md); max-width: 58ch; }

.secao {
  margin: var(--e-8) 0 var(--e-4); font-size: var(--txt-lg);
  color: var(--texto-forte); letter-spacing: -.015em;
  display: flex; align-items: baseline; gap: 10px;
}
.secao::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--navy-100), transparent);
}
.secao em { color: var(--texto-suave); font-style: normal; font-weight: 400; font-size: var(--txt-sm); }

/* ---------- o crachá: quem sou e onde estou na hierarquia ---------- */

.crachá {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  align-items: center; justify-content: space-between;
  padding: var(--e-5) var(--e-6); margin-bottom: var(--e-6);
  border-radius: var(--raio-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(41, 184, 192, .22) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy-600) 0%, var(--navy-800) 100%);
  color: #fff; box-shadow: var(--elev-navy);
}
/* o anel orgânico ao fundo — tira a cara de retângulo chapado */
.crachá::after {
  content: ''; position: absolute; right: -60px; top: -70px;
  width: 210px; height: 210px; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .18); pointer-events: none;
  animation: girar 44s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.crachá b { color: #fff; font-size: var(--txt-lg); letter-spacing: -.01em; }
.crachá .matricula {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--txt-sm);
  color: var(--turq-300); margin-left: 10px; letter-spacing: .02em;
}
.hier { display: flex; align-items: center; gap: 9px; font-size: var(--txt-sm); flex-wrap: wrap; }
.hier .nivel {
  color: rgba(255, 255, 255, .72); padding: 5px 12px; border-radius: var(--raio-full);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.hier .nivel.atual {
  color: var(--navy-800); font-weight: 700; border-color: transparent;
  background: linear-gradient(135deg, var(--turq-300), var(--turq-500));
  box-shadow: 0 2px 10px rgba(41, 184, 192, .40);
}
.hier .nivel.falta {
  color: #FFD9D9; border-color: rgba(255, 140, 140, .45);
  background: rgba(255, 90, 90, .16); cursor: help;
}
.hier .sep { color: rgba(255, 255, 255, .38); }

/* ---------- o painel de cartões (bento) ---------- */

/* Bento: o primeiro cartão dos que a pessoa TEM ocupa duas colunas. Hierarquia
   visual = hierarquia de uso; o que ela mais abre é o maior elemento da tela. */
.cartoes {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.cartoes.bento > .cartao.tenho:first-child { grid-column: span 2; }
@media (max-width: 700px) { .cartoes.bento > .cartao.tenho:first-child { grid-column: span 1; } }

.cartao {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 11px;
  padding: var(--e-5); border-radius: var(--raio-lg);
  background: linear-gradient(180deg, #fff 0%, var(--navy-50) 190%);
  border: 1px solid var(--navy-100);
  box-shadow: var(--elev-1);
  transition: transform var(--t-suave), box-shadow var(--t-suave), border-color var(--t-suave);
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--elev-3); border-color: var(--turq-300); }

/* faixa de cor no topo — identifica a família do módulo sem depender só da cor
   do ícone (quem não distingue cor ainda lê o selo escrito) */
.cartao::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--navy-500), var(--turq-500));
  opacity: .9;
}
.cartao.cor-turquesa::before { background: linear-gradient(90deg, var(--turq-500), var(--turq-300)); }

.cartao h3 { margin: 0; font-size: var(--txt-lg); color: var(--texto-forte); letter-spacing: -.015em; }
.cartao p { margin: 0; color: var(--texto-suave); font-size: var(--txt-sm); line-height: 1.55; flex: 1; }
.cartao .topo {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 0; background: none; border: 0;
}
.cartao .pe { margin-top: var(--e-2); }
.cartao .pe .btn { width: 100%; justify-content: center; }

/* o carro-chefe: fundo escuro, como manda o bento */
.cartoes.bento > .cartao.tenho:first-child {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(41, 184, 192, .26) 0%, transparent 60%),
    linear-gradient(135deg, var(--navy-600), var(--navy-800));
  border-color: transparent; box-shadow: var(--elev-navy);
}
.cartoes.bento > .cartao.tenho:first-child h3 { color: #fff; font-size: var(--txt-xl); }
.cartoes.bento > .cartao.tenho:first-child p { color: rgba(255, 255, 255, .80); }
.cartoes.bento > .cartao.tenho:first-child .simbolo {
  background: rgba(255, 255, 255, .12); color: var(--turq-300);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cartoes.bento > .cartao.tenho:first-child .escopo.rede,
.cartoes.bento > .cartao.tenho:first-child .escopo.nucleo,
.cartoes.bento > .cartao.tenho:first-child .escopo.proprio {
  background: rgba(255, 255, 255, .13); color: #fff;
}
.cartoes.bento > .cartao.tenho:first-child .btn.primario {
  background: linear-gradient(135deg, var(--turq-400), var(--turq-600)); color: var(--navy-900);
  border-color: transparent; font-weight: 700;
}

/* quem não tem o módulo: tracejado e recuado — dá para ler o que é, mas não
   parece disponível */
.cartao.pedir, .cartao.pendente {
  background: var(--navy-50); border-style: dashed; border-color: var(--navy-200);
  box-shadow: none;
}
.cartao.pedir:hover, .cartao.pendente:hover { box-shadow: var(--elev-2); background: #fff; }
.cartao.pedir .simbolo, .cartao.pendente .simbolo { opacity: .6; }
.cartao.pedir::before, .cartao.pendente::before { opacity: .35; }

.simbolo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, var(--navy-100), var(--navy-50));
  color: var(--navy-600);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(11, 25, 44, .07);
}
.simbolo.grande { width: 62px; height: 62px; border-radius: 19px; margin-bottom: var(--e-4); }
.simbolo.grande .ic { width: 28px; height: 28px; }
.cor-turquesa .simbolo {
  background: linear-gradient(135deg, var(--turq-200), var(--turq-50)); color: var(--turq-800);
}
.simbolo .ic { width: 22px; height: 22px; }

/* selo de estado (dentro de cartão/tabela — não é o selo do topo escuro) */
.cartao .selo, .tabela .selo {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  border: 0; text-transform: none; letter-spacing: 0; font-size: var(--txt-xs);
  padding: 5px 10px; border-radius: var(--raio-full); font-weight: 600;
}
.selo.esperando { background: var(--atencao-bg); color: var(--atencao); }
.selo.travado   { background: var(--cinza-100);  color: var(--cinza-500); }
.selo.ok        { background: var(--ok-bg);      color: var(--ok); }
.ic-mini { width: 13px; height: 13px; }

/* ---------- o alcance: rede ≠ núcleo, e a tela mostra qual é ---------- */

.escopos { display: flex; flex-wrap: wrap; gap: 6px; }
.escopo {
  font-size: var(--txt-xs); font-weight: 600; padding: 4px 10px;
  border-radius: var(--raio-full); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(11, 25, 44, .05);
}
.escopo.rede    { background: var(--navy-100);  color: var(--navy-700); }
.escopo.nucleo  { background: var(--turq-100);  color: var(--turq-800); }
.escopo.proprio { background: var(--cinza-100); color: var(--cinza-500); }
.escopo.pedido  { background: var(--atencao-bg); color: var(--atencao); }

/* ---------- números por núcleo ---------- */

.numeros { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-6); }
.numero {
  flex: 1 1 140px; padding: var(--e-5) var(--e-4); text-align: center;
  border-radius: var(--raio-lg); border: 1px solid var(--navy-100);
  background: linear-gradient(180deg, #fff, var(--navy-50));
  box-shadow: var(--elev-1);
  transition: transform var(--t-suave), box-shadow var(--t-suave);
}
.numero:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.numero b {
  display: block; font-size: 2rem; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--navy-500), var(--turq-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numero span { font-size: var(--txt-xs); color: var(--texto-suave); display: block; margin-top: 6px; }

/* ---------- formulário de pedido ---------- */

.resumo-modulo {
  display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-5);
  border-radius: var(--raio-lg); margin-bottom: var(--e-5);
  background: linear-gradient(135deg, var(--navy-50), #fff);
  border: 1px solid var(--navy-100); box-shadow: var(--elev-1);
}
.resumo-modulo p { margin: 5px 0 0; color: var(--texto-suave); font-size: var(--txt-sm); line-height: 1.55; }
.linha-topo { display: flex; gap: var(--e-3); align-items: flex-end; }
.linha-topo .campo { flex: 1; margin-bottom: var(--e-5); }
fieldset.campo { border: 0; padding: 0; margin-bottom: var(--e-5); }
fieldset.campo legend { padding: 0; }

/* o rádio de escopo vira um cartão selecionável — clicar num alvo de 1cm² é
   diferente de acertar um círculo de 3mm no celular */
.opcao {
  display: flex; gap: 12px; align-items: flex-start; padding: var(--e-4);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-md);
  cursor: pointer; margin-bottom: 9px; background: #fff;
  transition: border-color var(--t-suave), box-shadow var(--t-suave), background var(--t-suave);
}
.opcao:hover { border-color: var(--turq-400); box-shadow: var(--elev-1); }
.opcao:has(input:checked) {
  border-color: var(--turq-500); background: var(--turq-50);
  box-shadow: 0 0 0 3px rgba(41, 184, 192, .18);
}
.opcao:has(input:focus-visible) { outline: 2px solid var(--turq-700); outline-offset: 2px; }
.opcao em {
  display: block; color: var(--texto-suave); font-size: var(--txt-sm);
  font-style: normal; margin-top: 3px; line-height: 1.5;
}

/* ---------- tabelas ---------- */

.tabela td.fim { text-align: right; white-space: nowrap; }
.tabela td.data {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--txt-sm); color: var(--texto-suave);
}
.tabela td.motivo { max-width: 320px; font-size: var(--txt-sm); color: var(--texto-suave); }
.tabela .matricula {
  display: block; margin: 2px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--txt-xs); color: var(--turq-800);
}
.tabela tbody tr { transition: background var(--t-suave); }
.tabela tbody tr:hover { background: var(--navy-50); }
.dupla { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.dupla input[type=text] { min-width: 148px; height: 36px; font-size: var(--txt-sm); }
.pequeno { min-height: 36px; padding: 0 var(--e-3); font-size: var(--txt-sm); }
.btn.perigo { background: var(--erro-bg); color: var(--erro); border-color: transparent; }
.btn.perigo:hover { background: var(--erro); color: #fff; }

/* brilho atravessando o botão principal no hover */
.btn.primario, button.primario { position: relative; overflow: hidden; }
.btn.primario::after, button.primario::after {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg); transition: left 620ms ease; pointer-events: none;
}
.btn.primario:hover::after, button.primario:hover::after { left: 120%; }

.faixa-ok {
  background: var(--ok-bg); color: var(--ok); border-radius: var(--raio-md);
  padding: var(--e-4) var(--e-5); margin-bottom: var(--e-4); font-weight: 600;
  border-left: 3px solid var(--ok);
}

/* ---------- estado vazio: diz o que VAI ter, não só que está vazio ---------- */

.vazio-rico {
  text-align: center; padding: var(--e-8) var(--e-5);
  border: 1px dashed var(--navy-200); border-radius: var(--raio-lg);
  background: linear-gradient(180deg, #fff, var(--navy-50));
}
.vazio-rico .simbolo { margin: 0 auto var(--e-4); }
.vazio-rico h3 { margin: 0 0 8px; color: var(--texto-forte); }
.vazio-rico p { color: var(--texto-suave); max-width: 46ch; margin: 0 auto var(--e-5); line-height: 1.6; }
.lista-futura {
  display: inline-flex; flex-direction: column; gap: 9px; text-align: left;
  color: var(--texto-suave); font-size: var(--txt-sm);
}
.lista-futura li { display: flex; gap: 9px; align-items: flex-start; }
.lista-futura .ic { color: var(--turq-600); flex: none; margin-top: 2px; width: 17px; height: 17px; }

/* ---------- ranking (indicações) ---------- */

.ranking { display: flex; flex-direction: column; gap: 9px; }
.faixa-rank {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 12px var(--e-4); border-radius: var(--raio-md);
  background: #fff; border: 1px solid var(--navy-100); box-shadow: var(--elev-1);
  transition: transform var(--t-suave), box-shadow var(--t-suave);
}
.faixa-rank:hover { transform: translateX(3px); box-shadow: var(--elev-2); }
.faixa-rank .pos {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: var(--txt-sm); color: var(--navy-700); background: var(--navy-100);
}
.faixa-rank:nth-child(1) .pos {
  background: linear-gradient(135deg, var(--turq-400), var(--turq-600)); color: #fff;
}
.faixa-rank .barra {
  height: 7px; border-radius: var(--raio-full); background: var(--navy-100);
  overflow: hidden; margin-top: 6px;
}
.faixa-rank .barra i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--turq-500), var(--navy-500));
  transform-origin: left; animation: encher 900ms cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes encher { from { transform: scaleX(0); } }
.faixa-rank .qtd { font-weight: 700; color: var(--navy-600); font-variant-numeric: tabular-nums; }

/* ---------- reveal on scroll, com stagger ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.vis { opacity: 1; transform: none; transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .7, .3, 1); }
.reveal[data-d="1"].vis { transition-delay: 60ms; }
.reveal[data-d="2"].vis { transition-delay: 120ms; }
.reveal[data-d="3"].vis { transition-delay: 180ms; }
.reveal[data-d="4"].vis { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.vis { opacity: 1; transform: none; transition: none; }
  .crachá::after, .faixa-rank .barra i { animation: none; }
  .cartao:hover, .numero:hover, .faixa-rank:hover { transform: none; }
  .btn.primario::after, button.primario::after { display: none; }
}

@media (max-width: 640px) {
  .cartoes { grid-template-columns: 1fr; }
  .crachá { flex-direction: column; align-items: flex-start; }
  .dupla { flex-wrap: wrap; justify-content: flex-start; }
  .numero { flex-basis: calc(50% - var(--e-3)); }
}

/* ── correções depois de OLHAR as telas nos 4 breakpoints ──────────────
   O `h3` global é um RÓTULO de seção (caixa alta, pequeno, barra à esquerda).
   Dentro do cartão isso transformava o nome do módulo numa etiqueta gritada:
   "MEU CADASTRO" em vez de "Meu cadastro". Um título de cartão é título. */
.cartao h3, .vazio-rico h3 {
  text-transform: none; letter-spacing: -.015em; border-left: 0; padding-left: 0;
  font-size: var(--txt-lg); font-weight: 700; color: var(--texto-forte);
  margin: 0;
}
.cartoes.bento > .cartao.tenho:first-child h3 { font-size: 1.45rem; color: #fff; }

/* o botão estava colado na borda de baixo, virando rodapé do cartão */
.cartao { padding: var(--e-5) var(--e-5) var(--e-5); }
.cartao .pe { margin-top: var(--e-3); }
.cartao .pe .btn {
  width: auto; min-width: 128px; justify-content: center;
  box-shadow: 0 1px 2px rgba(11,25,44,.10);
}
.cartao.pedir .pe .btn, .cartao.pendente .pe .btn { width: 100%; }

/* o crachá estava espremido numa faixa fina */
.crachá { padding: var(--e-5) var(--e-6); min-height: 74px; }
.crachá > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.crachá .matricula { margin-left: 0; }

/* o cartão grande precisa respirar mais que os pequenos */
.cartoes.bento > .cartao.tenho:first-child { padding: var(--e-6); gap: 13px; }
.cartoes.bento > .cartao.tenho:first-child .simbolo { width: 50px; height: 50px; }
.cartoes.bento > .cartao.tenho:first-child .simbolo .ic { width: 25px; height: 25px; }

/* o traço colorido do topo estava competindo com a borda arredondada */
.cartao::before { border-radius: var(--raio-lg) var(--raio-lg) 0 0; }

/* 🔴 O ESTOURO QUE O VALIDADOR NÃO VIA (corrigido 31/08)

   No celular o grid do app vira `grid-template-columns: 1fr`. Item de grid
   nasce com `min-width:auto`, então um filho largo — a tabela de indicações —
   ESTICAVA a coluna inteira para 807px numa tela de 375. O `overflow-x: clip`
   escondia o resultado: em vez de rolar de lado, a página simplesmente
   CORTAVA metade do texto, e a medição de `scrollWidth` dava tudo certo.

   `minmax(0, 1fr)` é o que autoriza a coluna a ser menor que o conteúdo — daí
   o `overflow-x:auto` da tabela volta a funcionar e a rolagem fica DENTRO
   dela, que é onde deve estar. */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .conteudo, .lateral { min-width: 0; }
  .menu, .lateral-pe { min-width: 0; max-width: 100%; }
  .item { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* Na fila de decisão, o texto da justificativa empurrava a coluna de ação para
   fora da tela: os botões Aprovar/Negar ficavam CORTADOS na borda direita — os
   dois botões que são o motivo da tela existir. `table-layout` fixo tira o
   poder do conteúdo de decidir a largura das colunas. */
.tabela.fila { table-layout: fixed; }
.tabela.fila th:nth-child(1), .tabela.fila td:nth-child(1) { width: 24%; }
.tabela.fila th:nth-child(2), .tabela.fila td:nth-child(2) { width: 13%; }
.tabela.fila th:nth-child(3), .tabela.fila td:nth-child(3) { width: 15%; }
.tabela.fila th:nth-child(4), .tabela.fila td:nth-child(4) { width: 26%; }
.tabela.fila th:nth-child(5), .tabela.fila td:nth-child(5) { width: 22%; }
.tabela.fila td.motivo {
  max-width: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.45;
}
.tabela.fila .dupla { flex-wrap: wrap; gap: 6px; }
.tabela.fila .dupla input[type=text] { flex: 1 1 100%; min-width: 0; }
.tabela .escopo { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .tabela.fila { table-layout: auto; min-width: 780px; } }

/* ══════════════════════════════════════════════════════════════════════════
   PAINÉIS — a estrutura que faltava (31/08)

   O diagnóstico do Helbert foi "sem margem, com cara de amador", e ele estava
   certo: os cartões flutuavam soltos sobre o fundo, colados na borda esquerda,
   esticados até o fim da tela. Três coisas resolvem:

   1. LARGURA MÁXIMA. Conteúdo de sistema não deve ocupar 1400px de linha —
      cansa de ler e não tem foco. Limitado e centralizado.
   2. PAINEL. Uma caixa branca AGRUPA os cartões e leva o título do grupo
      dentro. É a superfície que dá estrutura à página.
   3. RESPIRO. Padding grande dentro do painel e gap generoso entre cartões.
      Aperto é o que mais denuncia trabalho apressado.
   ══════════════════════════════════════════════════════════════════════════ */

.conteudo-largo { max-width: 1160px; margin-inline: auto; }
.conteudo { padding: var(--e-7) var(--e-7) var(--e-12); }

/* ---------- trilha (onde estou) ---------- */

.trilha {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--txt-sm); color: var(--texto-suave); margin-bottom: var(--e-5);
}
.trilha a { color: var(--turq-800); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.trilha .sep { color: var(--cinza-300); }
.trilha [aria-current] { color: var(--texto-forte); font-weight: 600; }

/* ---------- o painel ---------- */

.painel {
  background: var(--superficie);
  border: 1px solid var(--navy-100);
  border-radius: 16px;
  box-shadow: var(--elev-1);
  padding: var(--e-6);
  margin-bottom: var(--e-6);
}
.painel-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); margin-bottom: var(--e-5);
  padding-bottom: var(--e-4); border-bottom: 1px solid var(--navy-100);
}
.painel-topo h2 {
  margin: 0; font-size: var(--txt-lg); letter-spacing: -.015em; color: var(--texto-forte);
}
.painel-topo .conta {
  font-size: var(--txt-sm); color: var(--texto-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- cartão HORIZONTAL: símbolo colorido, texto, ação ---------- */

.cartoes { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cartoes.bento > .cartao:first-child { grid-column: span 2; }
@media (max-width: 900px) { .cartoes.bento > .cartao:first-child { grid-column: span 1; } }

.cartao {
  --tom: var(--navy-500);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "simbolo corpo" "simbolo pe";
  align-content: start;
  gap: 4px var(--e-4);
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--navy-100);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color var(--t-suave), box-shadow var(--t-suave), transform var(--t-suave);
}
.cartao::before { content: none; }              /* a faixa do topo saiu: agora a cor é o símbolo */
.cartao:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--navy-200); }

.cartao .simbolo {
  grid-area: simbolo;
  width: 52px; height: 52px; border-radius: 11px;
  background: var(--tom); color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--tom) 55%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cartao .simbolo .ic { width: 25px; height: 25px; }

.cartao .corpo { grid-area: corpo; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cartao .linha-titulo { display: flex; align-items: center; gap: 10px; }
.cartao h3 {
  margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -.012em;
  color: var(--tom); text-transform: none; border-left: 0; padding-left: 0;
}
.cartao p { margin: 0; color: var(--texto-suave); font-size: var(--txt-sm); line-height: 1.55; }
.cartao .pe { grid-area: pe; margin-top: var(--e-3); }
.cartao .pe .btn { width: auto; min-width: 120px; }

/* sem acesso: tudo esmaecido, e o cartão perde a cor — dá para ler o que é,
   mas não parece disponível */
.cartao.pedir, .cartao.pendente { background: var(--navy-50); border-style: dashed; }
.cartao.pedir .simbolo, .cartao.pendente .simbolo {
  background: var(--cinza-200); color: var(--cinza-500); box-shadow: none;
}
.cartao.pedir h3, .cartao.pendente h3 { color: var(--texto-suave); }
.cartao.pedir:hover, .cartao.pendente:hover { background: var(--superficie); }

/* o destaque: mesmo cartão, mais largo e com o tom preenchendo o fundo */
.cartoes.bento > .cartao:first-child {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tom) 96%, #000 8%),
    color-mix(in srgb, var(--tom) 78%, #0B192C 40%));
  border-color: transparent; padding: var(--e-6);
  box-shadow: 0 2px 6px rgba(11,25,44,.22), 0 18px 40px -16px color-mix(in srgb, var(--tom) 60%, transparent);
}
.cartoes.bento > .cartao:first-child h3 { color: #fff; font-size: 1.32rem; }
.cartoes.bento > .cartao:first-child p { color: rgba(255,255,255,.82); }
.cartoes.bento > .cartao:first-child .simbolo {
  background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}
.cartoes.bento > .cartao:first-child .escopo {
  background: rgba(255,255,255,.16); color: #fff; box-shadow: none;
}
.cartoes.bento > .cartao:first-child .btn.primario {
  background: #fff; color: var(--navy-800); border-color: transparent; font-weight: 700;
}

/* ---------- o crachá desce de tom: quem manda na tela é o painel ---------- */

.crachá {
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--navy-100); box-shadow: var(--elev-1);
  padding: var(--e-5) var(--e-6);
}
.crachá::after { content: none; }
.crachá b { color: var(--texto-forte); }
.crachá .matricula { color: var(--turq-800); }
.hier .nivel {
  color: var(--texto-suave); background: var(--navy-50); border-color: var(--navy-100);
}
.hier .nivel.atual {
  background: var(--navy-500); color: #fff; box-shadow: none; border-color: transparent;
}
.hier .nivel.falta { color: var(--erro); background: var(--erro-bg); border-color: transparent; }
.hier .sep { color: var(--cinza-300); }

/* ---------- tabelas e números dentro do painel ---------- */

.painel .tabela-rolagem { border: 0; border-radius: 0; background: none; }
.painel > .numeros { margin-bottom: 0; }
.numero { background: var(--superficie); }

@media (max-width: 900px) {
  .conteudo { padding: var(--e-5) var(--e-4) var(--e-12); }
  .painel { padding: var(--e-5) var(--e-4); border-radius: 13px; }
  .cartoes { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cartao { grid-template-columns: 1fr; grid-template-areas: "simbolo" "corpo" "pe"; gap: var(--e-3); }
  .cartao .pe .btn { width: 100%; }
}

/* A tabela da fila pede 780px de largura mínima para os botões caberem. Sem
   `min-width: 0` no item de grid, esse pedido virava largura da PÁGINA inteira
   — e a rolagem, que devia ficar dentro da tabela, ia parar no documento.
   Vale em toda largura, não só no celular: `.app` já usa `minmax(0, 1fr)` no
   desktop justamente por isso. */
.conteudo { min-width: 0; }
.tabela-rolagem { max-width: 100%; }
@media (max-width: 1100px) { .tabela.fila { min-width: 700px; } }

/* 🔴 `margin-inline: auto` num ITEM DE GRID troca o dimensionamento de
   `stretch` para `fit-content`: o item deixa de obedecer à coluna e passa a
   caber o próprio conteúdo. Com uma tabela larga dentro, `.conteudo` ia a
   1115px numa coluna de 760 — e o `min-width: 0` não adianta nada, porque o
   problema não é o mínimo, é o modo de cálculo. `width: 100%` devolve o item
   ao tamanho da coluna, e aí a rolagem volta para dentro da tabela. */
.conteudo-largo { width: 100%; }

/* Os cartões de uma linha têm alturas iguais (o grid estica), mas o conteúdo
   não: sobrava um vão morto embaixo dos mais curtos e os botões ficavam em
   alturas diferentes. `align-content: space-between` empurra a ação para o
   rodapé de todos — os botões passam a formar uma linha só. */
.cartao { align-content: space-between; }
.cartao .corpo { align-self: start; }
.cartao .pe { align-self: end; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPIRO E INTERAÇÃO (31/08)

   Duas queixas, e as duas certas: "o espaçamento das caixas, as letras dentro"
   e "não vi diferença nenhuma de UX".

   A primeira é ritmo tipográfico: 14px com entrelinha 1.55 dentro de um cartão
   apertado é dado empilhado, não texto para ler. A segunda é que a tela era um
   painel de links — nada respondia, nada filtrava, nada confirmava.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- ritmo do texto ---------- */

.cartao { padding: 26px; gap: 6px 20px; }
.cartoes { gap: 20px; }
.cartao h3 { font-size: 1.1rem; line-height: 1.25; letter-spacing: -.014em; }
.cartao p {
  font-size: 0.945rem;          /* 15px: 14 é pequeno demais para ler descrição */
  line-height: 1.62;
  letter-spacing: .002em;       /* respiro mínimo entre as letras no cinza */
  max-width: 46ch;              /* linha longa demais cansa e o olho perde a volta */
}
.cartao .corpo { gap: 9px; }
.cartao .pe { margin-top: 18px; }

.painel { padding: 28px; }
.painel-topo { margin-bottom: 22px; padding-bottom: 18px; }
.painel-topo h2 { font-size: 1.16rem; letter-spacing: -.014em; }

.cabeca { margin-bottom: 26px; }
.cabeca h1 { line-height: 1.12; letter-spacing: -.028em; }
.cabeca .sub { font-size: 1.02rem; line-height: 1.62; margin-bottom: 0; }

.crachá { padding: 22px 26px; }
.crachá b { font-size: 1.06rem; letter-spacing: -.01em; }

.tabela th {
  font-size: var(--txt-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700; padding: 13px 16px;
}
.tabela td { padding: 15px 16px; line-height: 1.5; }
.tabela .matricula { letter-spacing: .02em; }

.numero { padding: 22px 16px; }
.numero span { letter-spacing: .03em; line-height: 1.35; }

/* ---------- barra de busca ---------- */

.barra-busca { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; max-width: 400px; }
.campo-busca { position: relative; flex: 1; }
.campo-busca .ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--cinza-400); pointer-events: none;
}
.campo-busca input {
  width: 100%; height: 42px; padding: 0 46px 0 40px; font-size: 0.94rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-full);
  background: var(--superficie); color: var(--texto);
  transition: border-color var(--t-suave), box-shadow var(--t-suave);
}
.campo-busca input:focus {
  outline: none; border-color: var(--turq-500);
  box-shadow: 0 0 0 3px rgba(41, 184, 192, .18);
}
.campo-busca input::placeholder { color: var(--cinza-400); }
/* a dica do atalho some assim que a pessoa começa a digitar */
.campo-busca kbd {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--cinza-400);
  background: var(--navy-50); border: 1px solid var(--navy-100);
  border-radius: 5px; padding: 4px 7px; pointer-events: none;
  transition: opacity var(--t-suave);
}
.campo-busca input:not(:placeholder-shown) ~ kbd,
.campo-busca input:focus ~ kbd { opacity: 0; }
.resultado {
  font-size: var(--txt-sm); color: var(--texto-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 62px;
}
.sem-resultado {
  text-align: center; padding: 40px 20px; color: var(--texto-suave);
  border: 1px dashed var(--navy-200); border-radius: var(--raio-lg); margin-top: 4px;
}
[hidden] { display: none !important; }

/* ---------- cartão inteiro clicável ---------- */

.cartao.clicavel { cursor: pointer; }
.cartao.clicavel .pe .btn::after {
  content: '→'; margin-left: 9px; display: inline-block;
  transition: transform var(--t-suave);
}
.cartao.clicavel:hover .pe .btn::after { transform: translateX(4px); }
.cartao.clicavel:active { transform: translateY(0); transition-duration: 60ms; }

/* ---------- botão que confirma que ouviu ---------- */

button.ocupado, .btn.ocupado { pointer-events: none; opacity: .82; position: relative; }
button.ocupado::before, .btn.ocupado::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  background-size: 220% 100%; animation: varrer 1.05s linear infinite;
}
@keyframes varrer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.confirmando { background: var(--erro) !important; color: #fff !important; }
.confirma { font-weight: 700; }

/* ---------- aviso flutuante ---------- */

.faixa-ok.flutua {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; margin: 0;
  max-width: min(400px, calc(100vw - 44px)); cursor: pointer;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--navy-100); border-left: 4px solid var(--ok);
  box-shadow: var(--elev-3); padding: 16px 20px;
  animation: entrar-aviso 340ms cubic-bezier(.2,.7,.3,1) both;
}
.faixa-ok.saindo { animation: sair-aviso 620ms ease forwards; }
@keyframes entrar-aviso { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes sair-aviso   { to   { opacity: 0; transform: translateY(10px); } }

/* ---------- cabeçalho de tabela ordenável ---------- */

th.ordena { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordena:hover { color: var(--navy-600); }
th.ordena::after {
  content: '↕'; margin-left: 7px; opacity: .35; font-size: 11px;
}
th.ordena.asc::after  { content: '↑'; opacity: 1; color: var(--turq-700); }
th.ordena.desc::after { content: '↓'; opacity: 1; color: var(--turq-700); }
th.ordena:focus-visible { outline: 2px solid var(--turq-700); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .faixa-ok.flutua, button.ocupado::before, .btn.ocupado::before { animation: none; }
  .cartao.clicavel:hover .pe .btn::after { transform: none; }
}

@media (max-width: 640px) {
  .cartao { padding: 20px; }
  .painel { padding: 20px 16px; }
  .barra-busca { max-width: none; flex-basis: 100%; }
  .faixa-ok.flutua { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* O cabeçalho do painel agora leva três coisas: título, ação (a busca) e a
   contagem. Em tela estreita a busca quebra para a linha de baixo e ocupa
   tudo — campo de 120px no celular não serve para nada. */
.painel-topo { flex-wrap: wrap; row-gap: 14px; }
.painel-topo h2 { flex: 0 0 auto; }
.painel-topo .barra-busca { margin-left: auto; }
.painel-topo .conta { flex: 0 0 auto; }
.secao .barra-busca { margin-left: auto; }
.secao { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 720px) {
  .painel-topo .barra-busca, .secao .barra-busca { margin-left: 0; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   O PULSO E A GRADE DE ACESSOS (31/08)
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- pulso: os números que respondem antes do clique ---------- */

.pulso {
  display: grid; gap: 14px; margin-bottom: 24px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pulso-item {
  display: block; padding: 20px 22px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--navy-100);
  border-radius: 13px; box-shadow: var(--elev-1);
  transition: transform var(--t-suave), box-shadow var(--t-suave), border-color var(--t-suave);
}
a.pulso-item:hover {
  transform: translateY(-2px); box-shadow: var(--elev-2);
  border-color: var(--turq-300); text-decoration: none;
}
.pulso-item b {
  display: block; font-size: 2.1rem; line-height: 1; letter-spacing: -.035em;
  color: var(--navy-600); font-variant-numeric: tabular-nums;
}
.pulso-item span {
  display: block; margin-top: 7px; font-size: var(--txt-sm);
  color: var(--texto-suave); line-height: 1.4;
}
/* o único que muda de cor é o que pede ação — se tudo grita, nada grita */
.pulso-item.atencao { border-color: var(--atencao); background: var(--atencao-bg); }
.pulso-item.atencao b { color: var(--atencao); }
.pulso-item.atencao span { color: var(--atencao); font-weight: 600; }

.pulso-aniv {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 15px 22px; border-radius: 13px;
  background: linear-gradient(135deg, var(--turq-50), var(--superficie));
  border: 1px solid var(--turq-200);
}
.pulso-aniv .rotulo {
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--turq-800); white-space: nowrap;
}
.pulso-aniv .nomes { display: flex; gap: 8px; flex-wrap: wrap; }
.pulso-aniv a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--turq-200);
  color: var(--navy-700); font-size: var(--txt-sm); font-weight: 600;
  padding: 5px 12px 5px 6px; border-radius: var(--raio-full);
  transition: border-color var(--t-suave), transform var(--t-suave);
}
.pulso-aniv a:hover { border-color: var(--turq-500); transform: translateY(-1px); text-decoration: none; }
.pulso-aniv i {
  font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; background: var(--turq-500); color: #fff;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
}

.selo.aguarda {
  background: var(--atencao); color: #fff; font-weight: 700;
  animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: .68; } }

/* ---------- grade de acessos: uma linha por pessoa ---------- */

.tabela.grade td { vertical-align: middle; padding: 12px 16px; }
.tabela.grade td.quem { min-width: 210px; }
.tabela.grade td.quem em.sub { display: block; font-size: var(--txt-xs); font-style: normal; }
.tabela.grade td.quantos {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-600);
}

.grade-acessos { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-form { display: contents; }

/* O botão diz o estado E é a ação. Ligado: o tom do módulo, preenchido.
   Desligado: tracejado e apagado, mas legível — a pessoa precisa saber o que
   existe para liberar. */
.chip-mod {
  --tom: var(--navy-500);
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--txt-xs)/1 inherit; font-family: inherit;
  padding: 7px 11px; border-radius: var(--raio-full); cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-suave), border-color var(--t-suave),
              color var(--t-suave), transform var(--t-suave);
}
.chip-mod .sinal { font-size: 12px; line-height: 1; opacity: .85; }
.chip-mod.tem { background: var(--tom); color: #fff; }
.chip-mod.tem:hover {
  background: var(--erro); transform: translateY(-1px);
}

.chip-mod.nao {
  background: transparent; color: var(--cinza-500);
  border: 1px dashed var(--cinza-300);
}
.chip-mod.nao:hover {
  border-style: solid; border-color: var(--tom); color: var(--tom);
  background: color-mix(in srgb, var(--tom) 9%, transparent); transform: translateY(-1px);
}
.chip-mod.sempre {
  background: var(--cinza-100); color: var(--cinza-400); cursor: default;
  border: 1px solid transparent;
}
.chip-mod:focus-visible { outline: 2px solid var(--turq-700); outline-offset: 2px; }
.chip-mod.ocupado { pointer-events: none; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .selo.aguarda { animation: none; }
  .chip-mod:hover, a.pulso-item:hover, .pulso-aniv a:hover { transform: none; }
}
@media (max-width: 640px) {
  .pulso-item b { font-size: 1.75rem; }
  .pulso { gap: 10px; }
}

/* O sinal do chip é SVG, não '✓'/'×': símbolo de texto renderiza diferente em
   cada sistema e não herda a cor do botão. No hover do chip ligado o ícone gira
   e o fundo fica vermelho — a ação (tirar) fica clara sem trocar glifo. */
.ic-chip { width: 13px; height: 13px; stroke-width: 2.6; }
.chip-mod .sinal { display: inline-flex; transition: transform var(--t-suave); }
.chip-mod.tem:hover .sinal { transform: rotate(45deg); }

/* Abas de filtro. Botão, não link: não muda de página nem entra no histórico —
   voltar depois de filtrar tem que sair da tela, não desfazer o filtro. */
.filtros-rapidos { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fr {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 var(--txt-sm)/1 inherit; font-family: inherit;
  padding: 9px 15px; border-radius: var(--raio-full);
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--texto-suave); transition: all var(--t-suave);
}
.fr em {
  font-style: normal; font-size: var(--txt-xs); font-variant-numeric: tabular-nums;
  background: var(--navy-100); color: var(--navy-700); padding: 2px 7px; border-radius: var(--raio-full);
}
.fr:hover { border-color: var(--turq-400); color: var(--texto-forte); }
.fr.ativo { background: var(--navy-500); border-color: transparent; color: #fff; }
.fr.ativo em { background: rgba(255,255,255,.2); color: #fff; }
.fr:focus-visible { outline: 2px solid var(--turq-700); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   A ENTRADA — foto de negócio, cartão de vidro
   ══════════════════════════════════════════════════════════════════════════ */

body.tela-login { margin: 0; background: var(--navy-900); }
body.tela-login .wrap { padding: 0; max-width: none; }

.login {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  padding: 32px 20px; overflow: clip;
}

/* A foto e o VÉU. `backdrop-filter` sozinho herda o contraste da imagem: onde
   ela clareia, o texto branco do cartão desaparece. O véu navy garante a
   leitura em qualquer região da foto — e é ele que faz a tela ser da Renovaço,
   e não de um banco de imagem qualquer. */
.login-foto {
  position: absolute; inset: 0; z-index: 0;
  background: url('/entrada.jpg') center/cover no-repeat;
  transform: scale(1.06);                 /* esconde a borda do leve zoom lento */
  animation: aproximar 26s ease-in-out infinite alternate;
}
.login-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 20% 30%, rgba(41,184,192,.20), transparent 60%),
    linear-gradient(115deg, rgba(11,25,44,.95) 0%, rgba(20,44,78,.86) 46%, rgba(11,25,44,.72) 100%);
}
@keyframes aproximar { to { transform: scale(1.14); } }

.login-conteudo {
  position: relative; z-index: 1; width: 100%; max-width: 452px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.login-marca { text-align: center; }
.login-marca img { display: block; margin: 0 auto 12px; height: auto; max-width: 188px; }
.login-marca p {
  margin: 0; color: rgba(255,255,255,.72); font-size: var(--txt-sm);
  letter-spacing: .015em; line-height: 1.5;
}

/* ---------- o vidro ---------- */

.vidro {
  width: 100%; padding: 34px 32px 30px; border-radius: 20px;
  background: rgba(255, 255, 255, .085);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow:
    0 24px 60px -18px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .26);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  animation: subir-vidro 620ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes subir-vidro { from { opacity: 0; transform: translateY(20px); } }

/* Sem backdrop-filter (navegador antigo), o vidro vira um painel sólido em vez
   de um retângulo transparente com texto ilegível por cima da foto. */
@supports not (backdrop-filter: blur(2px)) {
  .vidro { background: rgba(11, 25, 44, .88); }
}

.vidro h1 {
  margin: 0 0 6px; color: #fff; font-size: 1.75rem;
  letter-spacing: -.028em; line-height: 1.1;
}
.vidro-sub { margin: 0 0 24px; color: rgba(255,255,255,.70); font-size: .94rem; line-height: 1.55; }

.vidro-campo { display: block; margin-bottom: 16px; }
.vidro-campo span {
  display: block; margin-bottom: 7px; font-size: var(--txt-sm);
  font-weight: 600; color: rgba(255,255,255,.86);
}
.vidro-campo input {
  width: 100%; height: 50px; padding: 0 16px; font-size: 1rem;
  color: #fff; border-radius: 11px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: border-color var(--t-suave), background var(--t-suave), box-shadow var(--t-suave);
}
.vidro-campo input::placeholder { color: rgba(255,255,255,.42); }
.vidro-campo input:focus {
  outline: none; background: rgba(255, 255, 255, .16);
  border-color: var(--turq-400);
  box-shadow: 0 0 0 3px rgba(41, 184, 192, .28);
}
/* O preenchimento automático do Chrome pinta o campo de branco e some com o
   texto claro. A sombra interna gigante é o único jeito de sobrescrever. */
.vidro-campo input:-webkit-autofill,
.vidro-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(20, 44, 78, .96) inset;
  caret-color: #fff;
}

.vidro-btn {
  width: 100%; height: 52px; margin-top: 8px; cursor: pointer;
  font: 700 1.02rem/1 inherit; font-family: inherit; letter-spacing: .01em;
  color: var(--navy-900); border: 0; border-radius: 11px;
  background: linear-gradient(135deg, var(--turq-300), var(--turq-500));
  box-shadow: 0 8px 22px -8px rgba(41, 184, 192, .70);
  transition: transform var(--t-suave), box-shadow var(--t-suave), filter var(--t-suave);
  position: relative; overflow: hidden;
}
.vidro-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(41,184,192,.85); }
.vidro-btn:active { transform: translateY(0); }
.vidro-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vidro-btn::after {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left 700ms ease;
}
.vidro-btn:hover::after { left: 130%; }

.vidro-links {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16); font-size: var(--txt-sm);
}
.vidro-links a { color: rgba(255,255,255,.80); text-decoration: none; }
.vidro-links a:hover { color: #fff; text-decoration: underline; }
.vidro-links b { color: var(--turq-300); font-weight: 700; }

.vidro-erro, .vidro-recado {
  padding: 12px 15px; border-radius: 10px; margin-bottom: 18px;
  font-size: var(--txt-sm); line-height: 1.5;
}
.vidro-erro {
  background: rgba(255, 92, 92, .18); border: 1px solid rgba(255, 140, 140, .45); color: #FFD9D9;
}
.vidro-recado {
  background: rgba(41, 184, 192, .16); border: 1px solid rgba(41, 184, 192, .40); color: var(--turq-100);
}

.login-pe {
  margin: 0; text-align: center; color: rgba(255,255,255,.58);
  font-size: var(--txt-xs); line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .login-foto { animation: none; transform: none; }
  .vidro { animation: none; }
  .vidro-btn:hover { transform: none; }
  .vidro-btn::after { display: none; }
}
@media (max-width: 480px) {
  .login { padding: 24px 16px; }
  .vidro { padding: 26px 20px 24px; border-radius: 16px; }
  .vidro h1 { font-size: 1.5rem; }
  .vidro-links { justify-content: center; text-align: center; }
}

/* 🔴 `place-items: center` NO GRID ENCOLHE ATÉ FILHO ABSOLUTO.

   `.login` é um grid com `place-items: center` para centralizar o cartão.
   O efeito colateral: o `justify-self/align-self: center` também alcança o
   filho `position: absolute`, e aí `inset: 0` DEIXA DE ESTICAR — o elemento
   passa a ser dimensionado pelo conteúdo e centralizado. A foto de fundo
   ficava com 827px numa tela de 1440, com faixa branca dos dois lados.

   `place-self: stretch` devolve o comportamento normal do absoluto. */
.login-foto { place-self: stretch; }

/* Com a foto aparecendo de verdade, o véu pode ser mais leve: escuro o
   bastante para o texto branco ler em qualquer região, claro o bastante para
   as pessoas da foto existirem. */
.login-foto::after {
  background:
    radial-gradient(110% 90% at 18% 25%, rgba(41,184,192,.26), transparent 58%),
    linear-gradient(118deg, rgba(11,25,44,.90) 0%, rgba(20,44,78,.72) 44%, rgba(11,25,44,.58) 100%);
}

/* A correção de verdade: `.login` deixa de ser GRID.

   Num container grid, o bloco-contêiner de um filho absoluto é a ÁREA DE GRID
   em que ele cai — não o padding box do pai. Por isso `inset: 0` dava 827px
   numa tela de 1440: era o tamanho da célula, não da tela. `place-self:
   stretch` resolvia a parte do alinhamento e não a do contêiner.

   Flexbox não tem esse comportamento: filho absoluto se ancora no pai
   posicionado, como se espera. Centralizar com flex custa uma linha a mais e
   tira a armadilha inteira do caminho. */
.login {
  display: flex; align-items: center; justify-content: center;
}
.login-foto { position: absolute; inset: 0; place-self: auto; }

/* O véu estava engolindo a foto: com a imagem cobrindo a tela toda, dava para
   ver que só sobrava um degradê navy. Aqui ele fica leve o bastante para as
   pessoas aparecerem, e denso justamente ATRÁS do cartão — que é onde o texto
   branco precisa de contraste. A elipse escura acompanha o cartão em vez de
   escurecer a tela inteira. */
.login-foto::after {
  background:
    radial-gradient(52% 62% at 50% 50%, rgba(11,25,44,.86) 0%, rgba(11,25,44,.45) 62%, transparent 100%),
    radial-gradient(90% 70% at 14% 18%, rgba(41,184,192,.20), transparent 62%),
    linear-gradient(118deg, rgba(11,25,44,.62) 0%, rgba(20,44,78,.42) 46%, rgba(11,25,44,.34) 100%);
}
/* e a foto entra um pouco mais clara, para não brigar com o véu */
.login-foto { filter: brightness(1.06) saturate(1.04); }

/* Texto claro sobre foto não pode depender só da opacidade: onde a imagem
   clareia, ele some. A sombra escura sob o texto garante a leitura em qualquer
   ponto da foto — inclusive quando a foto trocar. */
.login-marca p, .login-pe {
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 3px rgba(11,25,44,.85), 0 0 18px rgba(11,25,44,.55);
}
.login-marca img { filter: drop-shadow(0 2px 10px rgba(11,25,44,.6)); }


/* ================================================================== */
/* CAIXA DE ENTRADA — o que traz a pessoa de volta ao sistema          */
/* ================================================================== */

.msgs { display: flex; flex-direction: column; gap: var(--e-3); }

.msg {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--e-5) var(--e-6);
  box-shadow: var(--sombra-1);
}
/* O que chegou desde a última visita ganha a barra turquesa. É o único
   destaque da lista — se tudo destacasse, nada destacaria. */
.msg.nova { border-left-color: var(--turq-500); background: var(--turq-50); }
.msg.arquivada { opacity: .72; }

.msg-quem { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.msg-quem .avatar.sistema { background: var(--navy-500); color: #fff; }
.msg-quem .avatar.sistema .ic { width: 19px; height: 19px; }
.msg-cabeca { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--e-2); }
.msg-cabeca b { color: var(--texto-forte); font-family: var(--fonte-titulo); }
.msg-cabeca .empresa { color: var(--texto-suave); font-size: var(--txt-sm); }
.msg-quem time { margin-left: auto; color: var(--texto-suave); font-size: var(--txt-sm); white-space: nowrap; }

/* O `.selo` base é do topo escuro (turquesa claro sobre navy). Aqui o fundo é
   branco: sem esta redefinição o rótulo sai ilegível — mesmo motivo do
   `.cartao .selo` logo acima neste arquivo. */
.msg .selo {
  margin-left: 0; display: inline-flex; align-items: center; gap: 5px;
  border: 0; text-transform: none; letter-spacing: 0; font-weight: 600;
  font-size: var(--txt-xs); padding: 4px 10px; border-radius: var(--raio-full);
  background: var(--cinza-50); color: var(--texto-suave);
}
.msg .selo.festa    { background: var(--turq-100);   color: var(--turq-800); }
.msg .selo.atencao  { background: var(--atencao-bg); color: var(--atencao); }
.msg .selo.info     { background: var(--info-bg);    color: var(--info); }
.msg .selo.novo     { background: var(--navy-500);   color: #fff; letter-spacing: .04em; }

/* O `h3` do sistema é um RÓTULO DE SEÇÃO — caixa alta, miúdo, barra turquesa.
   Aqui ele é o assunto de uma mensagem: "HOJE É ANIVERSÁRIO DE CAROLINA
   FERREIRA DE SOUZA" em caixa alta grita com quem está lendo um recado. */
.msg h3 {
  margin: 0 0 var(--e-2); font-size: var(--txt-md); color: var(--texto-forte);
  text-transform: none; letter-spacing: -.01em; border-left: 0; padding-left: 0;
  font-family: var(--fonte-titulo);
}
.msg-corpo p { margin: 0 0 var(--e-2); line-height: 1.6; }
.msg-corpo p:last-child { margin-bottom: 0; }

.msg-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--borda);
}
.msg-pe form { margin: 0; }
/* Arquivar é ação de arrumação, não de destaque: fica discreta até o hover. */
.msg-pe .lapide {
  background: transparent; border: 1px solid transparent; color: var(--texto-suave);
  font-size: var(--txt-sm); font-weight: 500; min-height: 38px; padding: 0 12px;
}
.msg-pe .lapide:hover { border-color: var(--borda-forte); color: var(--texto); }

/* Responder é a ação principal e vem primeiro; arquivar é arrumação e fica
   por último. Sem a ordem explícita, o `flex: 1 1 100%` jogava o responder
   para depois do arquivar — a ação que a gente quer estimular, escondida. */
.msg .responder { flex: 1 1 100%; order: 2; }
.msg-pe form:last-child { order: 3; }
.msg-pe > .btn { order: 1; }
.msg .responder summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--acento-texto); font-weight: 600; font-size: var(--txt-sm);
  list-style: none; padding: 8px 0;
}
.msg .responder summary::-webkit-details-marker { display: none; }
.msg .responder[open] summary { margin-bottom: var(--e-2); }

/* 🔴 NÃO CONFIE NO NAVEGADOR PARA ESCONDER O INTERIOR DO <details> FECHADO.
   Os navegadores atuais escondem por `content-visibility` em ::details-content,
   e não por `display: none`: o conteúdo some da tela mas CONTINUA ocupando
   retângulo. Medido aqui — com o responder fechado, o botão Enviar devolvia
   44px de altura. O efeito é espaço fantasma no cartão, auditoria de layout
   acusando vazamento que ninguém vê, e `is_visible()` discordando de
   `getBoundingClientRect()` no mesmo elemento.
   Filho direto (`>`) de propósito: regra de autor com `display` alcançando
   descendente de details fechado REEXIBE o que deveria estar escondido. */
.msg .responder:not([open]) > form { display: none; }
.msg .responder textarea { margin-bottom: var(--e-2); }

.nota-canal {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--atencao-bg); color: var(--atencao);
  border-radius: var(--raio-md); padding: var(--e-3) var(--e-4);
  font-size: var(--txt-sm); margin: 0 0 var(--e-4);
}

/* ---------- parabenizar ---------- */

.alvo-parabens { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-5); }
.alvo-parabens h1 { margin: 0; font-size: var(--txt-xl); }
.alvo-parabens .sub { margin: 4px 0 0; }
.avatar.grande { width: 58px; height: 58px; font-size: 24px; }

/* Sugestão é frase inteira, não etiqueta: precisa quebrar linha e alinhar à
   esquerda, senão vira uma pílula gigante que estoura a largura no celular. */
.sugestoes { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-3); }
.sugestoes .chip {
  min-height: 0; height: auto; padding: 10px 15px; text-align: left;
  white-space: normal; line-height: 1.45; font-weight: 500; border-radius: var(--raio-md);
}

/* ---------- o contador no menu e no mural ---------- */

.item .badge {
  margin-left: auto; background: var(--turq-500); color: var(--navy-900);
  font-size: var(--txt-xs); font-weight: 700; min-width: 20px; height: 20px;
  border-radius: var(--raio-full); display: grid; place-items: center; padding: 0 6px;
  font-style: normal;
}

.ic.peq { width: 15px; height: 15px; }
.ic.grande { width: 30px; height: 30px; }

.tabs a i { font-style: normal; opacity: .65; font-size: var(--txt-xs); }

/* Cartão do mural ganha rodapé de ação: parabenizar é o gesto que o mural
   existe para provocar. */
/* O cartão do mural nasceu como uma linha só (dia + quem). Com a ação ele
   precisa quebrar: sem o wrap, o botão espreme o nome até virar reticências. */
.aniv { flex-wrap: wrap; }
.aniv .quem { flex: 1 1 140px; }
.aniv .acao {
  flex: 1 1 100%;
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  margin-top: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--borda);
}
.aniv .acao .btn.primario { margin-left: auto; }
.aniv .acao .btn { min-height: 38px; padding: 0 14px; font-size: var(--txt-sm); }
.aniv .contagem {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--turq-800); font-size: var(--txt-sm); font-weight: 600;
}
.aniv .contagem.zero { color: var(--texto-suave); font-weight: 500; }
.aniv .feito { color: var(--ok); font-size: var(--txt-sm); font-weight: 600; }

/* configuração explicada em frases, não em tabela de variável: quem lê é
   diretor, não quem mantém o servidor */
.lista-config { list-style: none; padding: 0; margin: 0 0 var(--e-5); }
.lista-config li {
  padding: var(--e-2) 0 var(--e-2) var(--e-5); position: relative; line-height: 1.6;
  border-bottom: 1px solid var(--borda);
}
.lista-config li:last-child { border-bottom: 0; }
.lista-config li::before {
  content: ''; position: absolute; left: var(--e-2); top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--turq-500);
}
.tabela td.detalhe { max-width: 380px; font-size: var(--txt-sm); color: var(--texto-suave); }

/* No celular o cabeçalho da mensagem empilha: nome longo + selos + hora na
   mesma linha viram três colunas de 90px e nada fica legível. */
@media (max-width: 560px) {
  .msg { padding: var(--e-4); }
  .msg-quem { flex-wrap: wrap; }
  .msg-cabeca { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 4px; }
  .msg-quem time { margin-left: auto; align-self: flex-start; }
  /* Abrir e Arquivar ficam lado a lado, no tamanho natural: empilhar três
     botões de largura total transforma um recado de duas linhas num formulário. */
  .msg-pe { gap: var(--e-3); }
}

/* Coordenação em modo leitura — quem tem o módulo com papel 'usa' acompanha a
   tela, mas não concede. O chip continua dizendo o estado; o que sai é o
   convite ao clique. Sem isto ele mantinha o cursor de mão e o hover vermelho
   de "tirar", prometendo uma ação que a rota recusa. */
.chip-mod[disabled] { cursor: default; opacity: .8; }
.chip-mod.tem[disabled]:hover { background: var(--tom); transform: none; }
.chip-mod.nao[disabled]:hover {
  background: transparent; border-style: dashed; border-color: var(--cinza-300);
  color: var(--cinza-500); transform: none;
}