/* Portal do cliente: usa os tokens e componentes de style.css; aqui só
   o que é próprio do portal (topo, largura do conteúdo, cadastro). */

body.portal { min-height: 100vh; background: var(--fundo); }

.portal-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 56px;
  background: var(--casca);
  color: var(--casca-texto);
}
.portal-topo .espaco { flex: 1; }
#portal-usuario { color: var(--casca-fraco); font-size: 14px; }

.portal-conteudo {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.portal-conteudo > .cartao-entrada { margin: 24px auto 0; }
.portal-conteudo h1 { font-size: 22px; }
.cartao-entrada.largo { max-width: 620px; }
.escolha-pessoa { display: flex; gap: 20px; }
.aceite { align-items: flex-start; font-size: 13.5px; }
.aceite input { margin-top: 2px; }

/* Fora da tela para pessoas; robôs que preenchem tudo caem aqui. */
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cabecalho-portal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabecalho-portal h2 { font-size: 22px; flex: 1; }
.lista-chamados { display: flex; flex-direction: column; gap: 10px; }
.item-chamado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cartao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: none;
  color: var(--texto);
  font-weight: 400;
}
.item-chamado:hover { background: var(--cartao); outline: 2px solid var(--primaria-fraca); }
.item-chamado .corpo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.item-chamado small { color: var(--texto-fraco); }
.conversa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.conversa li { padding: 10px 14px; border-radius: 12px; background: var(--fundo); max-width: 85%; }
.conversa li small { display: block; color: var(--texto-fraco); font-size: 12px; margin-bottom: 2px; }
.conversa li.cliente { align-self: flex-end; background: var(--primaria-fraca); }
.conversa li.mudanca { align-self: center; background: none; color: var(--texto-fraco); font-size: 13px; text-align: center; }
.conversa .texto { white-space: pre-wrap; }
.grade-form { display: flex; flex-direction: column; gap: 14px; }
.solucao { margin: 8px 0 0; }

/* Administrador do ERP vendo o portal */
.aviso-admin { max-width: 960px; margin: 0 auto 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--alerta-fraca); color: var(--texto); }

/* Painel do cliente: números que filtram a lista */
.pt-ola h2 { font-size: 24px; }
.pt-ola .subtitulo { margin: 2px 0 0; }
.cabecalho-portal .pt-ola { flex: 1; }
.pt-abrir { padding: 12px 20px; font-size: 15px; }
.pt-painel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pt-numero { display: grid; gap: 2px; justify-items: start; padding: 14px 16px; border-radius: var(--raio);
  background: var(--cartao); color: var(--texto); box-shadow: var(--sombra); border: 2px solid transparent;
  text-align: left; font-weight: 500; height: auto; }
.pt-numero strong { font-size: 26px; line-height: 1.1; }
.pt-numero span { font-size: 13px; color: var(--texto-fraco); }
.pt-numero:hover { background: var(--cartao); border-color: var(--primaria-fraca); }
.pt-numero.ativo { border-color: var(--primaria); }
.pt-numero.alerta strong { color: var(--alerta); }
.pt-numero.voce.alerta { background: var(--alerta-fraca); }
.pt-chamada { width: 100%; text-align: left; padding: 12px 16px; border-radius: var(--raio); font-weight: 600;
  background: var(--alerta-fraca); color: var(--texto); border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent); }
.pt-chamada:hover { background: var(--alerta-fraca); }
.pt-historico .barra h3 { margin: 0; }
.pt-historico input[type=search] { flex: 0 1 280px; }
.pt-historico .lista-chamados { margin-top: 12px; }
.pt-historico .item-chamado { box-shadow: none; border: 1px solid var(--borda); }
.item-chamado.precisa { border-color: var(--alerta); }
.pt-num { font-weight: 700; color: var(--texto-fraco); min-width: 44px; }
.pt-seta { font-size: 22px; color: var(--texto-fraco); }

/* Abrir chamado */
.pt-tipos { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pt-tipos legend { font-size: 14px; color: var(--texto-fraco); margin-bottom: 6px; padding: 0; }
.pt-tipo { display: inline-flex; }
.pt-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.pt-tipo span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borda); cursor: pointer; font-size: 14px; }
.pt-tipo input:checked + span { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.pt-tipo input:focus-visible + span { outline: 2px solid var(--primaria); outline-offset: 2px; }
.pt-dica { padding: 10px 14px; border-radius: 10px; background: var(--primaria-fraca); font-size: 14px; }
.pt-zona-fotos { display: grid; gap: 2px; justify-items: center; padding: 18px; border: 2px dashed var(--borda);
  border-radius: 12px; cursor: pointer; text-align: center; color: var(--texto-fraco); }
.pt-zona-fotos strong { color: var(--primaria); }
.pt-zona-fotos:hover, .pt-zona-fotos.arrastando { border-color: var(--primaria); background: var(--primaria-fraca); }
.pt-galeria { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pt-galeria figure { position: relative; margin: 0; display: grid; gap: 2px; justify-items: center; }
.pt-galeria img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); cursor: zoom-in; }
.pt-galeria figcaption { font-size: 12px; color: var(--texto-fraco); }
.pt-remover { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  font-size: 12px; line-height: 24px; }

/* Chamado: progresso e próximo passo */
.pt-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pt-passos li { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--texto-fraco); }
.pt-passos li + li::before { content: ""; width: 28px; height: 2px; background: var(--borda); }
.pt-bolinha { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--borda); background: var(--cartao); font-size: 12px; }
.pt-passos li.atual { color: var(--primaria); }
.pt-passos li.atual .pt-bolinha { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.pt-passos li.feito { color: var(--sucesso); }
.pt-passos li.feito .pt-bolinha { border-color: var(--sucesso); background: var(--sucesso-fraca); }
.pt-proximo { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--raio); background: var(--primaria-fraca); }
.pt-proximo.alerta { background: var(--alerta-fraca); border: 1px solid var(--alerta); }
.pt-proximo.ok { background: var(--sucesso-fraca); }

@media (max-width: 720px) {
  .pt-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-painel .pt-numero.todos { grid-column: 1 / -1; }
  .pt-historico input[type=search] { flex: 1 1 100%; }
}

/* Tela do chamado */
#tela-chamados { display: flex; flex-direction: column; gap: 16px; }
.pt-topo-chamado { display: grid; gap: 14px; }
.pt-voltar { justify-self: start; padding: 10px 18px; font-size: 15px; font-weight: 600; }
.marca-link { color: inherit; text-decoration: none; border-radius: 8px; padding: 4px 6px; margin-left: -6px; }
.marca-link:hover { background: rgba(255, 255, 255, 0.08); }
.marca-link:focus-visible { outline: 2px solid var(--primaria); }
.pt-titulo-chamado { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.pt-titulo-chamado h2 { font-size: 22px; margin: 0; }
.pt-titulo-chamado .subtitulo { margin: 4px 0 0; }
.pt-titulo-chamado .etiqueta { font-size: 13px; padding: 4px 12px; }

/* Barra de progresso ligada: a linha entre as etapas acompanha o andamento */
.pt-progresso { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.pt-progresso::before { content: ""; position: absolute; top: 13px; left: 12.5%; right: 12.5%; height: 3px; background: var(--borda); border-radius: 3px; }
.pt-progresso::after { content: ""; position: absolute; top: 13px; left: 12.5%; height: 3px; background: var(--sucesso); border-radius: 3px; width: 0; }
.pt-progresso.passo-1::after { width: 25%; }
.pt-progresso.passo-2::after { width: 50%; }
.pt-progresso.passo-3::after { width: 75%; }
.pt-progresso li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--texto-fraco); text-align: center; z-index: 1; }
.pt-progresso .pt-bolinha { width: 28px; height: 28px; font-size: 13px; background: var(--cartao); }
.pt-progresso li.atual { color: var(--primaria); }
.pt-progresso li.atual .pt-bolinha { background: var(--primaria); border-color: var(--primaria); color: #fff;
  box-shadow: 0 0 0 4px var(--primaria-fraca); }
.pt-progresso li.feito { color: var(--sucesso); }
.pt-progresso li.feito .pt-bolinha { border-color: var(--sucesso); background: var(--sucesso); color: #fff; }
.pt-topo-chamado .pt-proximo { display: flex; gap: 12px; align-items: flex-start; }
.pt-proximo > span:last-child { display: grid; gap: 2px; }
.pt-proximo-icone { font-size: 20px; line-height: 1.2; }

/* Corpo: conversa + lateral */
.pt-corpo-chamado { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.pt-lateral { display: grid; gap: 16px; }
.pt-lateral h3, .pt-conversa h3 { margin: 0 0 12px; font-size: 16px; }
.pt-detalhes { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.pt-detalhes dt { color: var(--texto-fraco); }
.pt-detalhes dd { margin: 0; font-weight: 600; }
.pt-solucao { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--sucesso-fraca); }
.pt-solucao p { margin: 4px 0 0; white-space: pre-wrap; }
.pt-mais-foto { margin-top: 10px; }
.pt-lateral .pt-galeria img { width: 72px; height: 72px; }

.pt-mensagens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pt-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.pt-msg.cliente { align-self: flex-end; flex-direction: row-reverse; }
.pt-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 12px; font-weight: 700; background: var(--fundo); color: var(--texto-fraco); }
.pt-msg.equipe .pt-avatar { background: var(--primaria); color: #fff; }
.pt-balao { padding: 10px 14px; border-radius: 16px; background: var(--fundo); display: grid; gap: 4px; }
.pt-msg.equipe .pt-balao { border-bottom-left-radius: 4px; }
.pt-msg.cliente .pt-balao { background: var(--primaria-fraca); border-bottom-right-radius: 4px; }
.pt-balao small { color: var(--texto-fraco); font-size: 12px; }
.pt-balao .texto { white-space: pre-wrap; line-height: 1.5; }
.pt-balao .pt-galeria img { width: 80px; height: 80px; }
.pt-balao .pt-galeria figcaption { display: none; }
.pt-evento { align-self: stretch; display: flex; align-items: center; gap: 10px; color: var(--texto-fraco); font-size: 12.5px; }
.pt-evento::before, .pt-evento::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.pt-evento.espera { font-style: italic; }
.pt-compositor { margin-top: 18px; border: 1px solid var(--borda); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.pt-compositor:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-fraca); }
.pt-compositor textarea { border: none; padding: 4px; resize: vertical; box-shadow: none; background: transparent; }
.pt-compositor textarea:focus { outline: none; box-shadow: none; }
.pt-compositor .subtitulo { font-size: 12.5px; }
.pt-encerrado { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--fundo); color: var(--texto-fraco); }

@media (max-width: 760px) {
  .pt-corpo-chamado { grid-template-columns: 1fr; }
  .pt-msg { max-width: 94%; }
  .pt-avatar { width: 26px; height: 26px; font-size: 11px; }
  .pt-progresso li { font-size: 11.5px; }
  .pt-titulo-chamado { flex-direction: column; }
}