/* ==========================================================
   HUB · PAINEL DA EQUIPE
   Esqueleto (menu lateral + conteúdo) e telas de Formulários.
   Usa só os tokens do design system (tokens.css): trocar o tema muda só as cores.
   ========================================================== */
:root { --lateral: 248px; --pad-pagina: clamp(20px, 3vw, 40px); }

.pular { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: var(--r-controle); background: var(--accent-solid); color: var(--on-accent); font-weight: var(--peso-titulo); }
.pular:focus { top: 12px; }

/* ---------- Esqueleto ---------- */
.hub { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s6); padding: var(--s5) var(--s3) var(--s4); background: var(--bg); border-right: 1px solid var(--line-soft); overflow-y: auto; }
.marca, .acesso-marca { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--s2); font-size: 15px; font-weight: var(--peso-titulo); letter-spacing: -0.01em; }
.marca-simbolo { width: 28px; height: 28px; }
.marca small, .acesso-marca small { margin-left: auto; font-size: 10px; font-weight: var(--peso-titulo); letter-spacing: 0.12em; color: var(--ink-4); }
.acesso-marca small { margin-left: 4px; }

.nav { display: grid; gap: var(--s5); }
.nav-grupo { display: grid; gap: 2px; }
.nav-grupo h2 { padding: 0 var(--s3) var(--s1); font-size: var(--fs-11); font-weight: var(--peso-titulo); letter-spacing: var(--tr-caixa-alta); text-transform: uppercase; color: var(--ink-4); }
.nav a { display: flex; align-items: center; gap: var(--s3); height: 36px; padding: 0 var(--s3); border-radius: var(--r-controle); color: var(--ink-2); font-weight: var(--peso-rotulo); transition: background-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); }
.nav a .icone { color: var(--ink-3); }
.nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.nav a[aria-current="page"] .icone { color: var(--accent-ink); }
@media (hover: hover) { .nav a:not([aria-current]):hover { background: var(--hover); color: var(--ink); } }

.lateral-pe { margin-top: auto; display: grid; gap: var(--s2); }
.tema-escolha { display: flex; gap: 2px; padding: 0 var(--s1); }
.tema-escolha [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.usuario { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-card); }
.usuario-texto { flex: 1; min-width: 0; }
.usuario-texto strong { display: block; font-size: 13.5px; font-weight: var(--peso-titulo); line-height: 1.2; }
.usuario-texto span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--ink-3); }

.principal { min-width: 0; }
.conteudo > * { min-width: 0; } /* nenhum bloco empurra a página para os lados no celular */
.conteudo { display: grid; align-content: start; gap: var(--s6); width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--s8) var(--pad-pagina) 120px; animation: entrar var(--t-lento) var(--ease) both; }

/* ---------- Cabeçalhos de página ---------- */
.pagina-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.pagina-cabeca .t-apoio { margin-top: var(--s2); font-size: var(--fs-14); }
.pagina-cabeca .t-rotulo { margin-bottom: var(--s2); }
.pagina-acoes { display: flex; gap: var(--s2); flex-wrap: wrap; }
.voltar { margin-bottom: calc(var(--s4) * -1); color: var(--ink-3); }
.voltar .icone { transform: rotate(180deg); }
@media (hover: hover) { .voltar:hover { color: var(--ink); } }

/* ---------- Formulários (lista) ---------- */
.formularios-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.cartao-form { position: relative; display: grid; gap: var(--s4); transition: box-shadow var(--t-medio) var(--ease), transform var(--t-medio) var(--ease); }
.cartao-form-topo { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cartao-form-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* o cartão inteiro vira link */
.cartao-form-numeros { display: flex; gap: var(--s7); }
.cartao-form-numeros > div { display: grid; gap: 4px; }
.copiar-link { position: relative; z-index: 1; display: flex; gap: var(--s2); }
.copiar-link .controle { flex: 1; min-width: 0; color: var(--ink-3); font-size: var(--fs-13); }
.chave-texto { font-family: ui-monospace, monospace; letter-spacing: 0; }
@media (hover: hover) { .cartao-form:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); } }

/* ---------- Respostas (lista) ---------- */
.filtros { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.filtros .abas { overflow-x: auto; }
.aba[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.aba[aria-current="page"] .n { color: var(--ink-3); }
.filtros-busca { flex: 1; max-width: 380px; min-width: 240px; }
.filtros-busca .controle { width: 100%; }

.tabela-respostas td:first-child { padding-left: var(--s3); }
.tabela-respostas .celula-cliente { display: flex; align-items: center; gap: 10px; padding: 6px var(--s2); margin: 0 calc(var(--s2) * -1); border-radius: var(--r-controle); }
.celula-texto strong { display: block; font-weight: var(--peso-titulo); line-height: 1.25; }
.celula-texto small { display: block; font-size: var(--fs-12); color: var(--ink-3); }
.celula-longa { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tabela-respostas tbody tr { position: relative; }
.tabela-respostas .celula-cliente::after { content: ""; position: absolute; inset: 0; } /* a linha inteira abre a resposta */
.tabela-respostas tr.e-nova strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 2px; border-radius: 50%; background: var(--accent); }
@media (hover: hover) { .tabela-respostas tbody tr:hover { background: var(--hover); } }

/* No celular a tabela vira uma lista de cartões */
@media (max-width: 760px) {
  .tabela-respostas thead { display: none; }
  .tabela-respostas, .tabela-respostas tbody { display: block; }
  .tabela-respostas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); }
  .tabela-respostas tr:first-child { border-top: 0; }
  .tabela-respostas td { display: block; min-width: 0; height: auto; padding: 0; border: 0; white-space: normal; }
  .tabela-respostas td:first-child { grid-column: 1 / -1; padding: 0; }
  .tabela-respostas td[data-rotulo="WhatsApp"] { display: none; }
  .tabela-respostas td[data-rotulo="Situação"] { grid-row: 1; grid-column: 2; align-self: center; }
  .tabela-respostas td[data-rotulo="Serviços"] { grid-column: 1 / -1; max-width: none; padding-left: 38px; font-size: var(--fs-13); }
  .tabela-respostas td[data-rotulo="Enviado"] { grid-column: 1 / -1; padding-left: 38px; font-size: var(--fs-12); }
  .tabela-respostas td:first-child { grid-column: 1; }
}

/* ---------- Resposta (detalhe) ---------- */
.resposta-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s5); }
.resposta-quem { display: grid; gap: var(--s2); }
.resposta-quem .t-pagina { font-size: var(--fs-24); }
.resposta-contatos { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.situacao { display: grid; gap: var(--s2); justify-items: end; }
.situacao .aba { cursor: pointer; }

.resposta-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--s5); }
.resposta-blocos { display: grid; gap: var(--s4); }
.resposta-lado { position: sticky; top: var(--s5); display: grid; gap: var(--s4); }
.resposta-blocos .t-painel, .resposta-lado .t-painel { margin-bottom: var(--s4); }

.respostas-lista { display: grid; margin: 0; }
.respostas-lista > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.respostas-lista > div:first-child { border-top: 0; padding-top: 0; }
.respostas-lista dt { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-13); color: var(--ink-3); }
.respostas-lista dt .icone { flex-shrink: 0; color: var(--accent-ink); transform: translateY(2px); }
.respostas-lista dd { margin: 0; overflow-wrap: anywhere; }
.respostas-lista .protegido dd { font-weight: var(--peso-rotulo); }

.arquivos { display: grid; gap: 2px; }
.arquivos a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); margin: 0 calc(var(--s3) * -1); border-radius: var(--r-controle); color: var(--ink-2); }
.arquivos .arquivo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.arquivos small { font-size: var(--fs-12); color: var(--ink-3); }
@media (hover: hover) { .arquivos a:hover { background: var(--hover); } }

/* ---------- Entrar e instalar ---------- */
.tela-acesso { background: var(--bg); }
.acesso { display: grid; justify-items: center; align-content: center; gap: var(--s5); min-height: 100dvh; padding: var(--s7) var(--s4); }
.acesso-caixa { display: grid; gap: var(--s5); width: min(400px, 100%); padding: var(--s7); }
.acesso-largo .acesso-caixa { width: min(520px, 100%); }
.acesso .campo .controle { width: 100%; }
.grupo-instalar { display: grid; gap: var(--s4); margin: 0; padding: var(--s5) 0 0; border: 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.grupo-instalar legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s1); }
.grupo-instalar summary { cursor: pointer; }

/* ---------- Celular: menu lateral vira barra no topo ---------- */
@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lateral { position: sticky; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-right: 0; border-bottom: 1px solid var(--line-soft); background: color-mix(in oklab, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: visible; }
  .marca small { display: none; }
  .nav { display: flex; }
  .nav-grupo h2 { display: none; }
  .lateral-pe { margin: 0 0 0 auto; display: flex; align-items: center; gap: var(--s1); }
  .usuario { padding: 0; gap: var(--s1); }
  .usuario-texto { display: none; }
  .conteudo { padding-top: var(--s6); }
  .resposta-corpo { grid-template-columns: 1fr; }
  .resposta-lado { position: static; order: -1; }
}
@media (max-width: 640px) {
  .marca { font-size: 0; gap: 0; }
  .resposta-cabeca { grid-template-columns: auto minmax(0, 1fr); }
  .situacao { grid-column: 1 / -1; justify-items: start; }
  .situacao .abas { flex-wrap: wrap; max-width: 100%; }
  .respostas-lista > div { grid-template-columns: 1fr; gap: 2px; }
  .copiar-link { flex-direction: column; }
  .cartao-form-numeros { gap: var(--s6); }
  .formularios-grade { grid-template-columns: 1fr; }
}