/* Estilo para visualização pública de tarefas */

.tj-publica {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(32px * var(--fs, 1)) calc(16px * var(--fs, 1));
  background: var(--fundo);
  color: var(--tinta);
}

.tj-publica__header {
  margin-bottom: calc(32px * var(--fs, 1));
  padding-bottom: calc(24px * var(--fs, 1));
  border-bottom: 1px solid var(--linha);
}

.tj-publica__header h1 {
  margin: 0 0 calc(16px * var(--fs, 1)) 0;
  font-size: calc(28px * var(--fs, 1));
  font-weight: 600;
  line-height: 1.2;
}

.tj-publica__meta {
  display: flex;
  gap: calc(12px * var(--fs, 1));
  flex-wrap: wrap;
  font-size: calc(14px * var(--fs, 1));
}

.tj-status,
.tj-prioridade,
.tj-cliente {
  padding: calc(4px * var(--fs, 1)) calc(12px * var(--fs, 1));
  border-radius: var(--r-card);
  background: var(--superficie);
  border: 1px solid var(--linha);
  font-weight: 500;
}

.tj-prioridade--urgente {
  background: var(--erro);
  color: var(--fundo);
  border-color: var(--erro);
}

.tj-prioridade--alta {
  background: #ff9500;
  color: var(--fundo);
  border-color: #ff9500;
}

.tj-prioridade--normal {
  background: var(--aviso);
  color: var(--fundo);
  border-color: var(--aviso);
}

.tj-prioridade--baixa {
  background: var(--ok);
  color: var(--fundo);
  border-color: var(--ok);
}

.tj-publica__descricao {
  margin: calc(32px * var(--fs, 1)) 0;
  padding: calc(16px * var(--fs, 1));
  background: var(--superficie);
  border-left: 3px solid var(--aviso);
  border-radius: var(--r-card);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
}

.tj-publica__info {
  margin: calc(32px * var(--fs, 1)) 0;
  display: grid;
  gap: calc(16px * var(--fs, 1));
}

.tj-info-item {
  padding: calc(12px * var(--fs, 1));
  background: var(--superficie);
  border-radius: var(--r-card);
  border: 1px solid var(--linha);
}

.tj-info-item strong {
  display: block;
  margin-bottom: calc(8px * var(--fs, 1));
  font-weight: 600;
  font-size: calc(14px * var(--fs, 1));
  color: var(--aviso);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tj-responsavel {
  display: inline-block;
  padding: calc(4px * var(--fs, 1)) calc(8px * var(--fs, 1));
  background: var(--fundo);
  border-radius: calc(4px * var(--fs, 1));
  margin-right: calc(8px * var(--fs, 1));
  margin-bottom: calc(4px * var(--fs, 1));
}

.tj-data {
  font-weight: 500;
  color: var(--dados);
}

.tj-tag {
  display: inline-block;
  padding: calc(6px * var(--fs, 1)) calc(12px * var(--fs, 1));
  border-radius: 999px;
  font-size: calc(14px * var(--fs, 1));
  font-weight: 500;
  margin-right: calc(8px * var(--fs, 1));
  margin-bottom: calc(8px * var(--fs, 1));
  white-space: nowrap;
}

.tj-publica__comentarios {
  margin-top: calc(48px * var(--fs, 1));
  padding-top: calc(32px * var(--fs, 1));
  border-top: 1px solid var(--linha);
}

.tj-publica__comentarios h2 {
  margin: 0 0 calc(24px * var(--fs, 1)) 0;
  font-size: calc(20px * var(--fs, 1));
  font-weight: 600;
}

#comentarios-list {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--fs, 1));
}

.tj-comentario {
  padding: calc(16px * var(--fs, 1));
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
}

.tj-comentario__header {
  display: flex;
  gap: calc(8px * var(--fs, 1));
  align-items: baseline;
  margin-bottom: calc(12px * var(--fs, 1));
  font-size: calc(14px * var(--fs, 1));
}

.tj-comentario__header strong {
  font-weight: 600;
  color: var(--tinta);
}

.tj-comentario__texto {
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.tj-mencao {
  background: var(--aviso);
  color: var(--fundo);
  padding: calc(2px * var(--fs, 1)) calc(6px * var(--fs, 1));
  border-radius: calc(4px * var(--fs, 1));
  font-weight: 500;
  font-family: var(--mono);
  font-size: 0.875em;
}

/* Tema escuro */
@media (prefers-color-scheme: dark) {
  .tj-tag {
    filter: brightness(1.2);
  }
}

/* Responsivo */
@media (max-width: 600px) {
  .tj-publica {
    padding: calc(16px * var(--fs, 1));
  }

  .tj-publica__header h1 {
    font-size: calc(24px * var(--fs, 1));
  }

  .tj-publica__meta {
    font-size: calc(12.8px * var(--fs, 1));
  }

  .tj-status,
  .tj-prioridade,
  .tj-cliente {
    padding: calc(3.2px * var(--fs, 1)) calc(8px * var(--fs, 1));
  }
}