/* =========================================================
   ARTESÃ · COMUNIDADE, SUPORTE, DESAFIOS E GAMIFICAÇÃO (a frente "juntas")
   Todas as classes começam com "com-" para não esbarrar nas de outras áreas.
   Mobile-first: tudo cabe em 390 px.
   ========================================================= */

/* colunas que empilham (o painel usa .grade-lado por fora) */
.com-coluna { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* publicação */
.com-post { display: grid; gap: 10px; }
.com-cab { display: flex; align-items: center; gap: 10px; }
.com-cab .meio { flex: 1; min-width: 0; display: grid; }
.com-cab .meio b { font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.com-cab .meio small { font-size: 12.5px; color: var(--texto2); font-weight: 700; }
.com-texto { white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.com-foto { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; background: var(--superficie-2); }
.com-foto.grande { max-height: none; object-fit: contain; }
.com-acoes, .com-moderar, .com-chips, .com-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.com-acoes form, .com-moderar form, .com-botoes form { margin: 0; }
.com-curtir { border: 0; cursor: pointer; min-height: 36px; }
.com-curtir svg { width: 16px; height: 16px; }
.com-chips:empty { display: none; }

/* denunciar / remover / editar: abrem um formulário pequeno no lugar (sem JavaScript) */
.com-denunciar, .com-remover, .com-editar { font-size: 14px; }
.com-denunciar > summary, .com-editar > summary { cursor: pointer; font-weight: 800; color: var(--texto2); min-height: 36px; display: inline-flex; align-items: center; list-style: none; }
.com-denunciar > summary::-webkit-details-marker, .com-editar > summary::-webkit-details-marker, .com-remover > summary::-webkit-details-marker { display: none; }
.com-remover > summary { list-style: none; cursor: pointer; }
.com-denunciar[open], .com-remover[open], .com-editar[open] { flex-basis: 100%; }
.com-denunciar form, .com-remover form, .com-editar form { margin-top: 8px; }
.com-editar { text-align: left; margin-top: 6px; }

/* comentários */
.com-comentario { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--superficie-2); margin-top: 8px; }
.com-comentario .meio { flex: 1; min-width: 0; display: grid; gap: 2px; }
.com-comentario .meio small { font-size: 12.5px; color: var(--texto2); font-weight: 700; }
.com-comentario.oficial { background: var(--destaque-suave); }
.com-comentario .com-moderar { flex-basis: 100%; }
.com-comentario:has(.com-moderar) { flex-wrap: wrap; }
.com-detalhes > summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--destaque-texto); min-height: 40px; display: flex; align-items: center; }
.com-apelido { padding: 0 4px; }
.com-apelido summary { cursor: pointer; padding: 10px 0; }
.com-apelido .linha-form { margin-bottom: 6px; }

/* cartão que abre e fecha (publicar, pedir ajuda, nova medalha) */
.com-abre > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.com-abre[open] > summary { margin-bottom: 12px; }

/* contador de letras/linhas (só aparece com JavaScript) */
.com-contador:empty { display: none; }
.com-contador.passou { color: var(--perigo); font-weight: 800; }

/* suporte: quem escreveu cada mensagem */
.com-quem { display: block; font-size: 12px; font-weight: 800; opacity: .8; }

/* desafios do painel */
.com-cartao-desafio { display: grid; gap: 10px; align-content: start; }
.com-cartao-desafio h3 { font-size: 19px; }

/* gamificação */
.com-numero { width: 96px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 800; }
.com-progresso { font-size: 11px !important; }
.com-recompensa .barra { margin-top: 6px; }