/* Projeta — extensões ao design system original (projeta.css).
   Mantém os mesmos tokens --pj-* para peças que o pacote de referência
   não cobria: link/logout no nav, estrelas clicáveis, tags removíveis,
   modal de tags, respostas de comentário e alertas de status. */

/* Corpo do princípio só existe visualmente quando aberto — sempre no DOM (sem JS = tudo visível
   seria pior), então escondemos por CSS e alternamos a classe is-open com um script pequeno. */
.pj-principle:not(.is-open) .pj-principle__body { display: none; }
.pj-measure__text a { color: inherit; }
.pj-measure__text a:hover { color: var(--pj-green-dark); }

.pj-nav__actions form { display: inline; margin: 0; }
.pj-nav__actions button.pj-link-like {
  background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--pj-muted-light); font-size: 13px;
}
.pj-nav__actions button.pj-link-like:hover { color: var(--pj-white); }

/* Avaliação por estrelas — inputs reais (radio) atrás dos glifos, sem precisar de JS */
.pj-rate__input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.pj-rate__input input { position: absolute; opacity: 0; width: 0; height: 0; }
.pj-rate__input label { cursor: pointer; transition: color .15s ease; }
.pj-rate__input input:checked ~ label,
.pj-rate__input label:hover,
.pj-rate__input label:hover ~ label { color: var(--pj-gold); }

/* Tags do item — pill com botão de remover (só admin) + botão "adicionar" tracejado */
.pj-pill--tag-removable { display: inline-flex; align-items: center; gap: 6px; padding-right: 8px; }
.pj-pill--tag-removable a { color: inherit; }
.pj-tag-remove {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--pj-muted-pale); font-size: 13px; line-height: 1;
}
.pj-tag-remove:hover { color: #fff; background: var(--pj-muted-pale); }
.pj-pill--add {
  background: transparent; border: 1px dashed var(--pj-border); color: var(--pj-muted-light);
  cursor: pointer; font-family: var(--pj-font-body); font-size: 13px;
}
.pj-pill--add:hover { border-color: var(--pj-green); color: var(--pj-green-dark); }
.pj-pill--tag-pendente {
  background: var(--pj-gold-soft); border: 1px dashed var(--pj-gold); color: #8A6410;
  font-style: italic;
}

/* Modal de tags (dialog nativo) */
.pj-dialog {
  border: none; border-radius: var(--pj-radius); padding: 26px 28px;
  max-width: 440px; width: calc(100% - 32px);
  background: var(--pj-white); color: var(--pj-navy);
  box-shadow: 0 24px 60px -20px rgba(14, 32, 56, .45);
  font-family: var(--pj-font-body);
}
.pj-dialog::backdrop { background: rgba(14, 32, 56, .55); }
.pj-dialog__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pj-dialog__title { font-family: var(--pj-font-display); font-weight: 500; font-size: 17px; color: var(--pj-navy); }
.pj-dialog__close { background: none; border: none; font-size: 20px; line-height: 1; color: var(--pj-muted-light); cursor: pointer; }
.pj-dialog__hint { font-size: 12.5px; color: var(--pj-muted-light); margin-bottom: 10px; }
.pj-dialog__existing { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pj-dialog__existing button.pj-pill--tag { border: 1px solid var(--pj-border); cursor: pointer; font-family: var(--pj-font-body); }
.pj-dialog__existing button.pj-pill--tag:hover { border-color: var(--pj-green); color: var(--pj-green-dark); }
.pj-dialog__new { display: flex; gap: 10px; }
.pj-dialog__new input {
  flex: 1; min-width: 0; border: 1px solid var(--pj-border); border-radius: var(--pj-radius-sm);
  padding: 10px 14px; font-family: var(--pj-font-body); font-size: 13.5px; color: var(--pj-navy); outline: none;
}

/* Campo de formulário genérico dentro de um pj-dialog ou pj-card (ex.: modal "Novo princípio", Editar perfil) */
.pj-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pj-field label { font-size: 13px; font-weight: 600; color: var(--pj-navy); }
.pj-field label small { font-weight: 400; color: var(--pj-muted-light); }
.pj-field input[type="text"],
.pj-field input[type="password"],
.pj-field input[type="email"],
.pj-field input[type="tel"],
.pj-field select,
.pj-field textarea {
  border: 1px solid var(--pj-border); border-radius: var(--pj-radius-sm);
  padding: 10px 14px; font-family: var(--pj-font-body); font-size: 13.5px;
  color: var(--pj-navy); background: var(--pj-white); outline: none; resize: vertical;
}
.pj-field input[type="text"]:focus,
.pj-field input[type="password"]:focus,
.pj-field input[type="email"]:focus,
.pj-field input[type="tel"]:focus,
.pj-field select:focus,
.pj-field textarea:focus { border-color: var(--pj-navy); box-shadow: 0 0 0 3px rgba(23, 48, 90, .1); }
.pj-field__error { font-size: 12px; color: #B4322A; }
.pj-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.pj-field-row .pj-field { flex: 1 1 200px; }
.pj-field__count { align-self: flex-end; font-size: 11.5px; color: var(--pj-muted-light); }
.pj-field__count.is-over { color: #B4322A; font-weight: 600; }

/* Comentários com resposta aninhada — o design original não previa threading */
.pj-comment__replies { margin: 16px 0 0 24px; border-left: 2px solid var(--pj-border-soft); padding-left: 18px; }
.pj-comment__replies .pj-comment { margin-top: 18px; padding-top: 16px; }
.pj-comment__reply-form { margin-top: 12px; max-width: 460px; }
.pj-comment__reply-form textarea { min-height: 70px; }
.pj-comment--removido .pj-comment__text { color: var(--pj-muted-pale); font-style: italic; }
.pj-comment__actions button {
  background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--pj-green-dark);
}
.pj-comment__actions button.muted { color: var(--pj-muted-pale); }

/* Alertas de status — proposta em análise, edição rejeitada, sucesso ao enviar material */
.pj-alert { border-radius: var(--pj-radius-sm); padding: 16px 18px; font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }
.pj-alert--info { background: #EAF1FB; color: #1B3A6B; border: 1px solid #C9DAF3; }
.pj-alert--danger { background: #FCEAEA; color: #7A1F1F; border: 1px solid #F3C6C6; }
.pj-alert--success { background: var(--pj-green-soft); color: var(--pj-green-dark); border: 1px solid #BFE5CB; }
.pj-alert strong { display: block; margin-bottom: 2px; }

/* Formulário de banner (admin) embutido na barra lateral/rodapé do card principal */
.pj-admin-box { padding: 20px 22px; border-top: 1px dashed var(--pj-border); }
.pj-admin-box__title { font-family: var(--pj-font-display); font-weight: 500; font-size: 13.5px; color: var(--pj-muted-light); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
.pj-admin-box input[type="file"] { font-size: 12.5px; color: var(--pj-muted); }
.pj-admin-box img.preview { max-width: 100%; border-radius: 8px; margin-bottom: 10px; display: block; }

@media (max-width: 640px) {
  .pj-dialog__existing button.pj-pill--tag { font-size: 11px; padding: 6px 12px; }
}

/* Página de edição sem sidebar — texto completo, sem edição por parágrafo nem
   comparação em tempo real (a validação é feita pelo revisor na moderação). */
.pj-edit--single { max-width: 820px; margin: 0 auto; padding: 18px 28px 40px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- Sino de notificações (header, todas as páginas) ---------- */
.pj-notif { position: relative; display: flex; align-items: center; }
.pj-notif__sino {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent;
  color: var(--pj-on-navy); cursor: pointer; padding: 0;
}
.pj-notif__sino:hover { background: rgba(255, 255, 255, .1); color: var(--pj-white); }
.pj-notif__sino svg { width: 19px; height: 19px; }
.pj-notif__badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--pj-gold); color: var(--pj-navy-deep);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  font-family: var(--pj-font-body); box-shadow: 0 0 0 2px var(--pj-navy-deep);
}
.pj-notif__dropdown {
  display: none; position: absolute; top: calc(100% + 14px); right: -10px; z-index: 60;
  width: 360px; max-width: calc(100vw - 32px); background: var(--pj-white); color: var(--pj-text);
  border: 1px solid var(--pj-border); border-radius: var(--pj-radius-sm);
  box-shadow: 0 18px 40px rgba(14, 32, 56, .18); overflow: hidden;
}
.pj-notif:hover .pj-notif__dropdown, .pj-notif.is-open .pj-notif__dropdown { display: block; }
.pj-notif__dropdown-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--pj-border-soft);
  font-family: var(--pj-font-display); font-weight: 500; font-size: 14px; color: var(--pj-navy);
}
.pj-notif__dropdown-head span.count { font-family: var(--pj-font-body); font-weight: 400; font-size: 12px; color: var(--pj-muted-light); }
.pj-notif__lista { max-height: 380px; overflow-y: auto; }
.pj-notif__item {
  display: flex; gap: 10px; padding: 12px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--pj-border-soft);
}
.pj-notif__item:last-child { border-bottom: none; }
.pj-notif__item:hover { background: var(--pj-paper-soft); }
.pj-notif__icone { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--pj-muted-pale); }
.pj-notif__icone--pendente { background: var(--pj-gold); }
.pj-notif__icone--aprovado { background: var(--pj-green); }
.pj-notif__icone--rejeitado { background: #C0392B; }
.pj-notif__icone--info { background: var(--pj-muted-soft); }
.pj-notif__item-body { min-width: 0; }
.pj-notif__item-titulo { display: block; font-size: 13px; font-weight: 600; color: var(--pj-navy); margin-bottom: 2px; }
.pj-notif__item-msg {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--pj-muted); line-height: 1.4; margin-bottom: 4px;
}
.pj-notif__item-tempo { font-size: 11px; color: var(--pj-muted-pale); }
.pj-notif__vazio { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--pj-muted-light); }
.pj-notif__vermais {
  display: block; text-align: center; padding: 12px; font-size: 13px; font-weight: 600;
  color: var(--pj-green-dark); text-decoration: none; background: var(--pj-paper-soft);
}
.pj-notif__vermais:hover { background: var(--pj-green-soft); }

@media (max-width: 640px) {
  .pj-notif__dropdown { right: -60px; width: calc(100vw - 24px); }
}

/* ---------- Página /Notificacoes ---------- */
.gbr-notif-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--gbr-space-6) 0; }
.gbr-notif-lista { display: flex; flex-direction: column; gap: var(--gbr-space-3); }
.gbr-notif-card { padding: 0; overflow: hidden; }
.gbr-notif-card summary {
  display: flex; align-items: flex-start; gap: 12px; padding: var(--gbr-space-4) var(--gbr-space-5);
  cursor: pointer; list-style: none;
}
.gbr-notif-card summary::-webkit-details-marker { display: none; }
.gbr-notif-card[open] summary { border-bottom: 1px solid var(--gbr-border); }
.gbr-notif-card--nao-lida { border-left: 3px solid var(--gbr-accent); }
.gbr-notif-card__ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; background: var(--gbr-border-strong); }
.gbr-notif-card__ponto--pendente { background: var(--gbr-accent); }
.gbr-notif-card__ponto--aprovado { background: var(--gbr-secondary); }
.gbr-notif-card__ponto--rejeitado { background: var(--gbr-danger); }
.gbr-notif-card__ponto--info { background: var(--gbr-text-subtle); }
.gbr-notif-card__corpo { flex: 1; min-width: 0; }
.gbr-notif-card__topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.gbr-notif-card__titulo { font-weight: 600; color: var(--gbr-text); }
.gbr-notif-card__tempo { font-size: var(--gbr-fs-xs); color: var(--gbr-text-subtle); white-space: nowrap; }
.gbr-notif-card__msg { font-size: var(--gbr-fs-sm); color: var(--gbr-text-muted); }
.gbr-notif-card__detalhes { padding: 0 var(--gbr-space-5) var(--gbr-space-5); font-size: var(--gbr-fs-sm); }
.gbr-notif-card__meta { display: flex; flex-wrap: wrap; gap: var(--gbr-space-2) var(--gbr-space-6); color: var(--gbr-text-muted); margin-bottom: var(--gbr-space-4); }
.gbr-notif-card__meta b { color: var(--gbr-text); }
.gbr-notif-card__acoes { display: flex; gap: var(--gbr-space-3); flex-wrap: wrap; }

/* ---------- Conversa (Meu Histórico e Moderação » Conversas) ---------- */
.gbr-thread { display: flex; flex-direction: column; gap: var(--gbr-space-3); margin: var(--gbr-space-4) 0; }
.gbr-thread__vazio { font-size: var(--gbr-fs-sm); color: var(--gbr-text-subtle); font-style: italic; }
.gbr-thread__msg {
  max-width: 80%; padding: var(--gbr-space-3) var(--gbr-space-4); border-radius: var(--gbr-radius-md, 10px);
  background: var(--gbr-surface-2); align-self: flex-start;
}
.gbr-thread__msg--eu { align-self: flex-end; background: color-mix(in oklab, var(--gbr-primary) 12%, var(--gbr-surface)); }
.gbr-thread__autor { display: block; font-size: var(--gbr-fs-xs); font-weight: 600; color: var(--gbr-text-muted); margin-bottom: 2px; }
.gbr-thread__texto { font-size: var(--gbr-fs-sm); color: var(--gbr-text); white-space: pre-wrap; }
.gbr-thread__data { display: block; font-size: var(--gbr-fs-xs); color: var(--gbr-text-subtle); margin-top: 4px; }
.gbr-thread-form { display: flex; gap: var(--gbr-space-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--gbr-space-3); }
.gbr-thread-form textarea { flex: 1; min-width: 220px; min-height: 60px; resize: vertical; }

/* .pj-segmented (projeta.css) só estiliza <button> — variante pra quando o controle é navegação (link). */
.pj-segmented a {
  flex: 1; border: none; background: none; border-radius: 6px; padding: 7px 6px;
  font-family: var(--pj-font-body); font-size: 12px; color: var(--pj-muted); cursor: pointer;
  white-space: nowrap; text-align: center; text-decoration: none;
}
.pj-segmented a.is-active { background: var(--pj-white); color: var(--pj-navy); font-weight: 500; box-shadow: 0 1px 3px rgba(14, 32, 56, .12); }
.pj-segmented a span { font-size: 10.5px; font-weight: 600; color: var(--pj-muted-pale); }
.pj-segmented a span.warn { color: #8A6410; }

/* ---------- "Quem construiu esta proposta" (página do item) ---------- */
.pj-contrib__sub { font-size: 13px; color: var(--pj-muted-light); margin: 4px 0 16px; }
.pj-contrib__tabs { max-width: 300px; margin-bottom: 16px; }
.pj-contrib__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--pj-border-soft); margin: 0 -18px -18px; }
.pj-contrib__row {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; text-align: left; width: 100%;
  border: none; background: none; cursor: pointer; font-family: var(--pj-font-body);
  border-bottom: 1px solid var(--pj-border-soft); border-right: 1px solid var(--pj-border-soft);
}
.pj-contrib__grid .pj-contrib__row:nth-child(3n) { border-right: none; }
.pj-contrib__row:hover { background: var(--pj-paper-soft); }
.pj-contrib__row .txt { flex: 1; min-width: 0; }
.pj-contrib__row .name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--pj-navy); }
.pj-contrib__row .meta { display: block; font-size: 11.5px; color: var(--pj-muted-light); margin-top: 2px; }
.pj-contrib__row .arrow { color: var(--pj-muted-pale); font-size: 14px; flex: none; }
@media (max-width: 760px) {
  .pj-contrib__grid { grid-template-columns: 1fr; }
  .pj-contrib__grid .pj-contrib__row { border-right: none; }
}

.pj-contrib__lista { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.pj-contrib__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--pj-paper-soft); border-radius: 8px; }
.pj-contrib__item .resumo { flex: 1; min-width: 0; font-size: 13px; color: var(--pj-navy); }
.pj-contrib__item .data { font-size: 11.5px; color: var(--pj-muted-pale); white-space: nowrap; }

/* Resumo curto (subtítulo) do princípio, exibido junto do título no acordeão da home. */
.pj-principle__subtitle { display: block; font-size: 12.5px; color: var(--pj-muted-light); margin-top: 4px; text-wrap: pretty; }

/* Snackbar global (pj-snackbar.js) — substitui o .pj-toast estático: empilha, anima e some sozinho. */
.pj-snackbar-root {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
  pointer-events: none;
}
.pj-snackbar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--pj-navy-deep); color: var(--pj-white); border-radius: 12px;
  padding: 13px 18px 13px 16px; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 16px 40px -16px rgba(14, 32, 56, .6);
  max-width: min(90vw, 420px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.pj-snackbar.show { opacity: 1; transform: translateY(0); }
.pj-snackbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pj-green); flex-shrink: 0; }
.pj-snackbar.is-error .dot { background: #E0685E; }
.pj-snackbar .msg { text-wrap: pretty; }

/* Avatar redondo + dropdown "minha conta" no header (pj-user-menu.js) — mesmo padrão do pj-notif. */
.pj-user-menu { position: relative; display: flex; align-items: center; }
.pj-user-menu__trigger { border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }
.pj-user-menu__trigger:hover .pj-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.pj-user-menu__dropdown {
  display: none; position: absolute; top: calc(100% + 14px); right: -10px; z-index: 60;
  width: 260px; max-width: calc(100vw - 32px); background: var(--pj-white); color: var(--pj-text);
  border: 1px solid var(--pj-border); border-radius: var(--pj-radius-sm);
  box-shadow: 0 18px 40px rgba(14, 32, 56, .18); overflow: hidden;
}
.pj-user-menu:hover .pj-user-menu__dropdown, .pj-user-menu.is-open .pj-user-menu__dropdown { display: block; }
.pj-user-menu__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--pj-border-soft); }
.pj-user-menu__info { min-width: 0; display: flex; flex-direction: column; }
.pj-user-menu__nome { font-family: var(--pj-font-display); font-weight: 500; font-size: 13.5px; color: var(--pj-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-user-menu__email { font-size: 11.5px; color: var(--pj-muted-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-user-menu__item {
  display: block; width: 100%; text-align: left; padding: 11px 16px; font-size: 13px;
  color: var(--pj-navy); text-decoration: none; border: none; background: none;
  font-family: var(--pj-font-body); cursor: pointer; border-bottom: 1px solid var(--pj-border-soft);
}
.pj-user-menu__item:last-child { border-bottom: none; }
.pj-user-menu__item:hover { background: var(--pj-paper-soft); }
.pj-user-menu__item--danger { color: #B4322A; }
.pj-user-menu__item--danger:hover { background: #FBECEA; }
.pj-user-menu form { margin: 0; }

@media (max-width: 640px) {
  .pj-user-menu__dropdown { right: -60px; width: calc(100vw - 24px); }
}