/* Estilos das telas novas (login, projetos, admin, chamados).
   Reaproveita as variáveis e botões de base.css / topo.css. */

/* ---------- utilitários (substituem style="" inline, que a CSP bloqueia) ---------- */
.oculto{display:none !important}
.linha{display:flex;align-items:center;gap:10px}
.linha.quebra{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--ink-soft)}
.pequeno{font-size:13px}
.sep{border:0;border-top:1px solid var(--line);margin:4px 0}
.texto-input{
  padding:8px 10px;border:1px solid var(--line-strong);background:var(--paper);
  border-radius:var(--radius);width:100%;
}
.texto-input:focus{outline:2px solid var(--ink);outline-offset:1px}

/* ---------- página de entrada ---------- */
.entrada{
  flex:1;display:grid;place-items:center;padding:24px;
}
.entrada-cartao{
  width:min(440px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:32px 28px;display:flex;flex-direction:column;gap:18px;
}
.entrada-cartao h1{font:700 26px/1.15 var(--font-display);letter-spacing:-.01em}
.entrada-cartao p{color:var(--ink-soft)}
.btn.grande{padding:11px 16px;font-size:15px;justify-content:center}
.btn.grande svg{width:18px;height:18px}
.aviso{
  padding:10px 12px;border-radius:var(--radius);font-size:14px;
  border:1px solid var(--line-strong);background:var(--paper);
}
.aviso.erro{
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--danger) 45%,var(--line));
}
.aviso.info{
  background:color-mix(in srgb,var(--p-media) 14%,var(--surface));
  border-color:color-mix(in srgb,var(--p-media) 45%,var(--line));
}

/* ---------- estrutura das telas logadas ---------- */
.pagina{flex:1;width:min(980px,100%);margin:0 auto;padding:24px 22px 40px;display:flex;flex-direction:column;gap:22px}
.pagina h1{font:700 24px/1.15 var(--font-display);letter-spacing:-.01em}
.pagina h2{font:700 18px/1.2 var(--font-display)}
.cabeca{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.usuario{display:flex;align-items:center;gap:8px;font-size:14px}
.usuario img,.usuario .avatar{width:26px;height:26px;border-radius:50%;margin:0}
.selo{
  display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
}
.selo.admin{background:var(--ink);color:var(--paper)}
.selo.atendente{background:color-mix(in srgb,var(--p-baixa) 22%,transparent);color:var(--p-baixa)}
.selo.tester{background:color-mix(in srgb,var(--p-media) 22%,transparent);color:var(--p-media)}

/* ---------- lista de projetos ---------- */
.grade-projetos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.projeto{
  display:flex;flex-direction:column;gap:8px;text-align:left;
  padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.projeto:hover{border-color:var(--ink)}
.projeto .nome{font:700 17px/1.2 var(--font-display)}
.vazio{
  border:1px dashed var(--line-strong);border-radius:10px;padding:28px;text-align:center;color:var(--ink-soft);
}

/* ---------- painel admin ---------- */
.painel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px}
.lista{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .avatar{margin:0}
.item .info{flex:1;min-width:0}
.item .info .t{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.item select{padding:6px 8px;border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--radius)}

/* ---------- chamados ---------- */
.chamado{
  display:flex;flex-direction:column;gap:8px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.chamado .topo-ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chamado .titulo{font-weight:600;flex:1;min-width:0}
.status{
  padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
}
.status.concluido{background:color-mix(in srgb,var(--p-baixa) 22%,transparent);color:var(--p-baixa)}
.resposta{
  padding:10px 12px;border-left:3px solid var(--p-baixa);
  background:color-mix(in srgb,var(--p-baixa) 8%,var(--surface));border-radius:0 var(--radius) var(--radius) 0;
  white-space:pre-wrap;
}
.print{max-width:100%;max-height:260px;border:1px solid var(--line);border-radius:var(--radius);display:block}
.prints{display:flex;gap:10px;flex-wrap:wrap}
.desc{white-space:pre-wrap;word-break:break-word}

@media (max-width:640px){
  .pagina{padding:16px 12px 32px}
  .entrada-cartao{padding:24px 18px}
}