/* Hub Discovercasa Design — redes sociais (planeamento dos posts, obras e fases, editor do post).
   Usa os tokens de hub.css; as mesmas regras: interface neutra, o acento só para ação, seleção e estado. */

.nav a.nav-separada { margin-left: 10px; }
.nav a.nav-separada::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 1px; background: var(--linha-forte); }
.social-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.segmentado a { display: inline-flex; align-items: center; font-size: 0.875rem; padding: 6px 14px; border-radius: 6px; color: var(--tinta-2); text-decoration: none; }
.segmentado a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px oklch(0.2 0.01 85 / 0.1); }
.segmentado button .ic { margin-right: 6px; vertical-align: -3px; }
.filtro { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.filtro select.seletor { min-height: 32px; font-size: 0.875rem; padding: 4px 8px; }
.seccao-primeira > .seccao-cabeca { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.seccao-cabeca p, .seccao-primeira p { font-size: 0.9375rem; }

/* planeamento: meses e semanas */
.meses-passados { margin-bottom: 32px; border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.meses-passados > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-weight: 500; padding: 6px 0 12px; list-style: none; }
.meses-passados > summary::-webkit-details-marker { display: none; }
.meses-passados > summary .ic { transition: transform .2s var(--ease); transform: rotate(-90deg); }
.meses-passados[open] > summary .ic { transform: none; }
.mes { margin-bottom: 40px; scroll-margin-top: 80px; }
.mes-cabeca { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.mes-cabeca h2::first-letter { text-transform: uppercase; }
.semanas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--semanas, 4), minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .semanas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.semana { display: grid; gap: 10px; align-content: start; min-width: 0; }
.semana-rotulo { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--tinta-3); }
.chip.agora { color: var(--acao); border-color: var(--acao-suave); background: var(--acao-suave); font-size: 0.75rem; padding: 1px 8px; }
.semana.atual .post-cartao { border-color: color-mix(in oklch, var(--acao) 45%, transparent); }
.semana-vazia {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 120px; border: 1px dashed var(--linha-forte);
  border-radius: var(--r2); background: none; color: var(--tinta-3); font: inherit; font-size: 0.875rem; margin: 0;
}
a.semana-vazia.ocupada { min-height: 64px; padding: 12px; text-align: center; text-decoration: none; border-style: solid; border-color: var(--linha); overflow-wrap: anywhere; }
a.semana-vazia.ocupada:hover { color: var(--tinta-2); border-color: var(--linha-forte); }
button.semana-vazia { cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
button.semana-vazia:hover { color: var(--acao); border-color: var(--acao); background: var(--acao-suave); }

/* cartão do post */
.post-cartao {
  display: grid; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--superficie); overflow: hidden;
  color: inherit; text-decoration: none; transition: border-color .15s, transform .2s var(--ease), box-shadow .2s;
}
.post-cartao:hover { border-color: var(--linha-forte); transform: translateY(-2px); box-shadow: 0 6px 18px oklch(0.2 0.01 85 / 0.08); }
.post-cartao.alvo { animation: alvo 2.4s var(--ease); }
.post-cartao.nao-feito { opacity: .6; border-style: dashed; }
.post-cartao.nao-feito .post-fotos { filter: grayscale(1); }
.post-cartao.nao-feito:hover { opacity: 1; }
.chip.movido { justify-self: start; white-space: normal; font-size: 0.75rem; padding: 1px 8px; }
.dlg-cabeca .chip.movido { vertical-align: 1px; }
.semana .adiantar { justify-self: start; }
.estado.p-nao_feito { text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.estado.p-nao_feito::before { border-color: var(--erro); }
.ponto-estado.p-nao_feito { border-color: var(--erro); }
.post-fotos { display: grid; gap: 2px; aspect-ratio: 4 / 3; background: var(--lateral); overflow: hidden; }
.post-fotos.n2 { grid-template-columns: 1fr 1fr; }
.post-fotos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.post-fotos.n3 .pf:first-child { grid-row: span 2; }
.post-fotos.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pf { position: relative; min-width: 0; min-height: 0; background: var(--linha); }
.pf img, .pf .sem-mini { width: 100%; height: 100%; object-fit: cover; display: block; }
.sem-mini { display: grid; place-items: center; color: var(--tinta-3); background: var(--lateral); }
.mais-fotos { position: absolute; inset: 0; display: grid; place-items: center; background: oklch(0.15 0.01 85 / 0.55); color: #fff; font-size: 1.125rem; font-weight: 600; }
.sem-fotos { display: grid; place-items: center; align-content: center; gap: 6px; color: var(--tinta-3); font-size: 0.8125rem; }
.post-texto { display: grid; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.post-obra { font-size: 0.75rem; font-weight: 500; color: var(--tinta-3); overflow-wrap: anywhere; }
.post-texto h3 { font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.post-legenda { font-size: 0.8125rem; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 2px; }
.aprov { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--tinta-3); }
.aprov.ok { color: var(--ok); }
.estado.p-por_aprovar::before { border-color: var(--aviso); background: var(--aviso); }
.estado.p-aprovado::before { border-color: var(--acao); background: var(--acao); }
.estado.p-publicado::before { border-color: var(--ok); background: var(--ok); }
.estado.p-rascunho::before { border-color: var(--tinta-2); border-style: dashed; }
.ponto-estado { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tinta-3); flex: none; }
.ponto-estado.p-por_aprovar { background: var(--aviso); border-color: var(--aviso); }
.ponto-estado.p-aprovado { background: var(--acao); border-color: var(--acao); }
.ponto-estado.p-publicado { background: var(--ok); border-color: var(--ok); }

/* visitas para fotos */
.visitas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--superficie); overflow: hidden; }
.visita { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linha); font-size: 0.9375rem; }
.visita:last-child { border-bottom: 0; }
.visita-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r1); background: var(--lateral); color: var(--tinta-2); }
.visita-icone.marcada { background: var(--aviso-suave); color: var(--tinta); }
@media (max-width: 600px) { .visita { grid-template-columns: 36px minmax(0, 1fr); } .visita .botoes { grid-column: 2; } }

/* obras e fases */
.obras-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.obra { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--superficie); min-width: 0; scroll-margin-top: 80px; }
.obra.alvo { animation: alvo 2.4s var(--ease); }
.obra-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.obra-cabeca h3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 1.0625rem; }
.obra-cabeca b { font-weight: 500; color: var(--tinta-2); }
.fases { list-style: none; margin: 0; padding: 0; display: grid; }
.fase-linha { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; }
.fase-linha::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--linha); border-radius: 2px; }
.fase-linha:last-child { padding-bottom: 0; }
.fase-linha:last-child::before { display: none; }
.fase-linha .marco { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linha-forte); background: var(--superficie); z-index: 1; color: var(--superficie); }
.fase-linha.em_curso .marco { border-color: var(--aviso); background: var(--aviso-suave); }
.fase-linha.concluida .marco { border-color: var(--ok); background: var(--ok); }
.fase-linha.concluida .marco .ic { width: 12px; height: 12px; stroke-width: 3; }
/* o círculo é um botão para quem edita: clicar marca a fase atual da obra */
button.marco { appearance: none; padding: 0; font: inherit; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
button.marco:hover { box-shadow: 0 0 0 4px var(--acao-suave); border-color: var(--acao); }
.fase-linha.prevista button.marco:hover::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acao); }
.fase-corpo { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.fase-nome { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--tinta); text-align: left; }
button.fase-nome { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
button.fase-nome:hover { text-decoration-color: var(--linha-forte); }
.fase-linha.prevista .fase-nome { color: var(--tinta-2); }
.fase-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.8125rem; color: var(--tinta-3); }
.fotos-fase { display: inline-flex; align-items: center; gap: 4px; }
.fotos-fase.visita_marcada { color: var(--tinta); }
.fotos-fase.tiradas { color: var(--ok); }
.obra-posts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--linha); }
.obra-posts .chip { white-space: normal; font-size: 0.75rem; }
.obra > .btn.texto { justify-self: start; }

/* resumo no Início */
.social-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; padding: 20px 24px; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--superficie); }
.social-resumo h3 { display: flex; align-items: center; gap: 8px; }
.social-resumo h3 .ic { color: var(--tinta-3); }
.social-resumo .lista-simples li { flex-wrap: wrap; align-items: baseline; }

/* editor do post */
dialog.dialogo.largo { width: min(1180px, calc(100vw - 32px)); }
.pe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .pe { grid-template-columns: minmax(0, 1fr); } }
.pe-esquerda { display: grid; gap: 14px; position: sticky; top: 0; min-width: 0; }
@media (max-width: 900px) { .pe-esquerda { position: static; } }
.pe-direita { display: grid; gap: 20px; min-width: 0; }
.pe-campos { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.pe .grelha-campos { align-items: start; }
.pe-campos:disabled .campo { background: var(--lateral); }
.redes { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--linha-forte); font-size: 0.8125rem; cursor: pointer; }
.chip-check:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); color: var(--tinta); }
.chip-check input { accent-color: var(--acao); margin: 0; }
.modelo-fases { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.modelo-fases legend { font-size: 0.875rem; font-weight: 500; margin-bottom: 8px; padding: 0; }
.legenda-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.legenda-topo label { font-size: 0.875rem; font-weight: 500; }
.emojis { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border: 1px solid var(--linha); border-radius: var(--r1); background: var(--lateral); }
.emojis button { width: 36px; height: 36px; border: 0; background: none; border-radius: 6px; font-size: 1.25rem; cursor: pointer; line-height: 1; }
.emojis button:hover { background: var(--superficie); }
.emojis p { flex-basis: 100%; padding: 4px 4px 0; }
textarea.campo.legenda { font-size: 0.9375rem; line-height: 1.55; min-height: 260px; }
.contagem { margin-top: 2px; }
.avisos-legenda { list-style: none; margin: 4px 0 0; padding: 10px 12px; display: grid; gap: 6px; border-radius: var(--r1); background: var(--aviso-suave); font-size: 0.8125rem; }
.avisos-legenda li { display: flex; gap: 8px; }
.avisos-legenda .ic { color: var(--aviso); margin-top: 1px; flex: none; }
.aprovacao { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--lateral); }
.aprovacao h3 { font-size: 0.9375rem; }
.aprovar { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; font-size: 0.9375rem; }
.aprovar b { font-weight: 500; }

/* fotos do post */
.pe-zona { display: grid; gap: 12px; padding: 12px; border: 1px dashed transparent; border-radius: var(--r2); transition: border-color .15s, background-color .15s; }
.pe-zona.sobre { border-color: var(--acao); background: var(--acao-suave); }
.pe-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pe-foto { position: relative; border-radius: var(--r1); overflow: hidden; background: var(--lateral); aspect-ratio: 1; border: 1px solid var(--linha); }
.pe-foto[draggable="true"] { cursor: grab; }
.pe-foto.a-arrastar { opacity: .4; }
.pe-ver { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pe-ver img, .pe-ver .sem-mini { width: 100%; height: 100%; object-fit: cover; display: grid; }
.pe-n { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: oklch(0.15 0.01 85 / 0.7); color: #fff; font-size: 0.75rem; font-weight: 600; display: grid; place-items: center; pointer-events: none; }
.pe-tipo, .pe-coment { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 99px; background: oklch(0.15 0.01 85 / 0.7); color: #fff; font-size: 0.75rem; pointer-events: none; }
.pe-coment { top: auto; bottom: 40px; background: var(--aviso); color: oklch(0.2 0.01 85); }
.pe-acoes { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 2px; background: linear-gradient(transparent, oklch(0.15 0.01 85 / 0.75)); opacity: 0; transition: opacity .15s; }
.pe-foto:hover .pe-acoes, .pe-foto:focus-within .pe-acoes { opacity: 1; }
@media (hover: none) { .pe-acoes { opacity: 1; } }
.pe-acoes .icone-botao { width: 32px; height: 32px; color: #fff; }
.pe-acoes .icone-botao:hover { background: oklch(1 0 0 / 0.18); color: #fff; }
.pe-acoes .icone-botao:disabled { opacity: .35; cursor: default; }
.pe-sem { padding: 8px 0; }
.pe-carregar {
  display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px dashed var(--linha-forte); border-radius: var(--r2);
  color: var(--tinta-2); font-size: 0.875rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.pe-carregar:hover, .pe-carregar:focus-within { border-color: var(--acao); color: var(--tinta); }
.pe-carregar u { color: var(--acao); text-underline-offset: 3px; }
.pe-carregar > .ic { width: 28px; height: 28px; color: var(--tinta-3); }
.pe-progresso:empty { display: none; }
.pe-fixo { display: grid; gap: 8px; padding: 0 12px; }
.original { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; color: var(--tinta-2); cursor: pointer; }
.original input { accent-color: var(--acao); margin-top: 2px; }

/* pré-visualização (como fica no telemóvel) */
.previa { max-width: 420px; margin: 0 auto; width: 100%; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--superficie); overflow: hidden; }
.previa-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.875rem; }
.previa-fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; background: var(--lateral); }
.previa-fotos::-webkit-scrollbar { display: none; }
.previa-foto { flex: 0 0 100%; scroll-snap-align: start; display: grid; }
.previa-foto img, .previa-foto .sem-mini { width: 100%; height: 100%; object-fit: cover; }
.previa-foto.vazia { place-items: center; align-content: center; gap: 6px; color: var(--tinta-3); font-size: 0.875rem; }
.previa-pontos { display: flex; justify-content: center; gap: 4px; padding: 8px 0 0; }
.previa-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); }
.previa-pontos i.on { background: var(--acao); }
.previa-legenda { padding: 10px 12px 0; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.previa.aberta .previa-legenda { display: block; }
.previa > .btn { margin: 0 6px 8px; }

/* comentários de aprovação */
.pe-comentarios { display: grid; gap: 12px; padding-top: 4px; }
.pe-comentarios h3 { font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; }
.pe-lista-coment { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pe-lista-coment li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.pe-lista-coment li.resolvido > div > p:nth-child(2) { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.pe-lista-coment .botoes { gap: 0; margin-top: 2px; }
.pe-lista-coment .btn.pequeno { min-height: 26px; padding: 0 6px; }
.pe-novo-coment { display: grid; gap: 8px; }
.pe-novo-coment .botoes { justify-content: flex-end; }

@media (max-width: 720px) {
  .semanas { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 8px; margin: 0 -16px; scroll-padding: 16px; }
  .semana { scroll-snap-align: start; }
  dialog.dialogo.largo { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  dialog.dialogo.largo .dlg-rodape { border-radius: 0; }
}