/* ------------------------------------------------------------------
   Composer do botao Publicar (js/publicar.js).

   E a mesma janela em toda tela logada, e nao um pedaco de HTML
   repetido em cada uma: tres copias viravam tres desenhos diferentes
   da mesma coisa.

   Publicar tem dois lugares, nao um
   (docs/ESPECIFICACAO-PERFIL-SUIMOB.md, secao 16.0): a caixa do feed
   abre o post livre, e o botao do cabecalho abre o anuncio
   padronizado. Enquanto o cadastro de imoveis nao existe, o botao do
   cabecalho abre a **escolha** entre os dois — com a metade do
   anuncio ainda apagada. Dai as duas caixas aqui embaixo dividirem o
   mesmo overlay: e a mesma janela, com miolo diferente.
   ------------------------------------------------------------------ */

.publicar-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(var(--color-primary) / .55);
  opacity: 0;
  transition: opacity .15s ease;
}
.publicar-overlay.is-aberto { opacity: 1; }
.publicar-overlay[hidden] { display: none; }

.publicar-caixa {
  width: 100%;
  max-width: 40rem;
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-surface-container-lowest));
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .28);
  transform: translateY(.75rem);
  transition: transform .15s ease;
}
.publicar-overlay.is-aberto .publicar-caixa { transform: none; }

.publicar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgb(var(--color-outline-variant));
}
.publicar-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--color-on-surface));
}
.publicar-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  color: rgb(var(--color-on-surface-variant));
  transition: background-color .15s, color .15s;
}
.publicar-fechar:hover {
  background: rgb(var(--color-surface-container));
  color: rgb(var(--color-on-surface));
}

.publicar-corpo {
  padding: 1.25rem;
  overflow-y: auto;
}

.publicar-autor {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.publicar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--color-primary));
  color: #fff;
  font-weight: 600;
}
.publicar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.publicar-nome {
  font-size: .875rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
}
.publicar-alcance {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  color: rgb(var(--color-on-surface-variant));
}

.publicar-texto {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  padding: .75rem;
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: .75rem;
  background: rgb(var(--color-surface-container-low));
  color: rgb(var(--color-on-surface));
  font-size: .9375rem;
  line-height: 1.5;
}
.publicar-texto::placeholder { color: rgb(var(--color-on-surface-variant)); }
.publicar-texto:focus {
  outline: none;
  border-color: rgb(var(--color-secondary));
  box-shadow: 0 0 0 2px rgb(var(--color-secondary) / .25);
}

/* A tira de previas, entre o texto e a barra de anexos — a mesma
   ordem em que o post vai sair no feed. Ver a foto no lugar dela e o
   que evita publicar a errada.

   Grade de largura automatica, e nao uma fileira que rola de lado:
   sao no maximo cinco, e cinco cabem em duas linhas ate no celular.
   Uma tira rolavel esconderia a quinta foto atras de um gesto. */
.publicar-previas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}
.publicar-previas[hidden] { display: none; }

.publicar-previa {
  position: relative;
  aspect-ratio: 1;
  border-radius: .625rem;
  overflow: hidden;
  background: rgb(var(--color-surface-container));
}
/* O lugar da foto que ainda esta reduzindo. Ele nasce vazio no clique e
   so recebe a imagem quando o canvas termina — sem esse quadrado, cinco
   fotos escolhidas de uma vez apareceriam uma a uma, do nada, e a tira
   pularia de tamanho a cada chegada.

   O pulso e discreto de proposito: e uma espera de menos de um segundo,
   e um spinner girando ali chamaria mais atencao que a propria foto. */
.publicar-previa.is-carregando {
  animation: publicar-previa-pulso 1.2s ease-in-out infinite;
}
@keyframes publicar-previa-pulso {
  50% { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .publicar-previa.is-carregando { animation: none; opacity: .6; }
}

.publicar-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* O X vai sobre a foto, e nao embaixo dela: embaixo, cada miniatura
   ocuparia o dobro da altura e cinco fotos empurrariam o botao
   Publicar para fora da janela.

   O fundo escuro fixo (e nao um token de tema) e de proposito: o que
   esta atras do botao e a foto de quem publica, que pode ser clara ou
   escura em qualquer tema. So um contraste proprio garante que o X
   apareca sobre as duas. */
.publicar-previa-remover {
  position: absolute;
  top: .25rem;
  right: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .6);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s;
}
.publicar-previa-remover:hover { background: rgb(0 0 0 / .8); }
.publicar-previa-remover:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.publicar-previa-remover .material-symbols-outlined { font-size: 1rem; }

/* A barra "Adicionar ao post", dentro da janela e logo abaixo do
   texto — a do Facebook. O anexo e parte do que se esta escrevendo,
   entao ele mora junto do texto, e nao numa fileira de botoes fora da
   caixa: la fora ele seria outro caminho, e a foto subiria sem saber
   a que texto pertence. */
.publicar-anexos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  padding: .5rem .5rem .5rem .875rem;
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: .75rem;
}
.publicar-anexos-rotulo {
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
}

.publicar-anexo {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .625rem;
  border-radius: .5rem;
  color: rgb(var(--color-on-surface-variant));
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.publicar-anexo .material-symbols-outlined {
  font-size: 1.25rem;
  color: rgb(var(--color-secondary));
}
.publicar-anexo:hover {
  background: rgb(var(--color-surface-container));
  color: rgb(var(--color-on-surface));
}
.publicar-anexo:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
}

.publicar-erro {
  margin-top: .75rem;
  padding: .625rem .75rem;
  border-radius: .5rem;
  background: rgb(var(--color-error-container));
  color: rgb(var(--color-on-error-container));
  font-size: .8125rem;
}
.publicar-erro[hidden] { display: none; }

.publicar-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid rgb(var(--color-outline-variant));
}
.publicar-contador {
  margin-right: auto;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--color-on-surface-variant));
}
.publicar-contador.is-no-limite { color: rgb(var(--color-error)); }

.publicar-cancelar {
  padding: .5rem .875rem;
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface-variant));
  transition: background-color .15s;
}
.publicar-cancelar:hover { background: rgb(var(--color-surface-container)); }

.publicar-enviar {
  padding: .5rem 1.25rem;
  border-radius: .5rem;
  background: rgb(var(--color-secondary));
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  transition: opacity .15s;
}
.publicar-enviar:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .publicar-overlay { padding: 0; align-items: flex-end; }
  .publicar-caixa {
    max-width: none;
    max-height: 92dvh;
    border-radius: 1rem 1rem 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publicar-overlay,
  .publicar-caixa { transition: none; }
}


/* ------------------------------------------------------------------
   A escolha do cabecalho.

   Divide o .publicar-overlay com o composer porque e a mesma janela
   vista de outro angulo — mesmo scrim, mesma animacao, mesmo Escape.
   A opcao apagada nao vira botao morto: ela se explica.
   ------------------------------------------------------------------ */

.publicar-escolha { max-width: 30rem; }

.publicar-opcoes {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
}

.publicar-opcao {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  width: 100%;
  padding: 1rem;
  text-align: left;
  background: rgb(var(--color-surface-container));
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: .75rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.publicar-opcao:hover {
  background: rgb(var(--color-surface-container-high));
  border-color: rgb(var(--color-secondary));
}
.publicar-opcao:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
}

/* A opcao que ainda nao existe continua clicavel de proposito: clicar
   nela e o que explica por que ela nao existe. Um botao desabilitado
   nao conta nada a ninguem. */
.publicar-opcao-adiada { opacity: .68; }
.publicar-opcao-adiada:hover {
  background: rgb(var(--color-surface-container));
  border-color: rgb(var(--color-outline-variant));
}

.publicar-opcao-icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .625rem;
  background: rgb(var(--color-secondary) / .12);
  color: rgb(var(--color-secondary));
}

.publicar-opcao-titulo {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
}
.publicar-opcao-texto {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgb(var(--color-on-surface-variant));
}
/* ------------------------------------------------------------------
   O formulario do anuncio padronizado (js/publicar-anuncio.js).

   Divide o overlay, a caixa, o topo, o rodape, as previas e a barra
   de anexos com o composer do post — e a mesma janela vista de outro
   angulo. O que nasce aqui e o miolo que o post nao tem: sessenta e
   poucos campos em grupos, e nao um campo de texto.

   Grade de duas colunas a partir de 34rem, e nao uma coluna sempre:
   "quartos" e "suites" sao dois campos de dois caracteres, e um
   embaixo do outro fariam o formulario do imovel ter dois metros de
   rolagem. O que e longo (titulo, descricao, chips) toma a linha
   inteira pelo .publicar-campo-largo.
   ------------------------------------------------------------------ */

.publicar-anuncio { max-width: 46rem; }

.publicar-formulario {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* O aviso do pre-preenchimento da demanda (secao 4.1). Uma linha, no
   topo do formulario: sem ela, os campos ja cheios pareceriam um bug
   — ninguem sabe de onde vieram. */
.publicar-aviso {
  display: flex;
  gap: .5rem;
  padding: .625rem .75rem;
  border-radius: .5rem;
  background: rgb(var(--color-secondary) / .1);
  color: rgb(var(--color-on-surface));
  font-size: .8125rem;
  line-height: 1.45;
}
.publicar-aviso[hidden] { display: none; }

.publicar-grupo {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}
.publicar-grupo:last-child { margin-bottom: 0; }

.publicar-legenda {
  padding: 0 0 .625rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgb(var(--color-on-surface-variant));
}

.publicar-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: .875rem;
}
@media (min-width: 34rem) {
  .publicar-grade { grid-template-columns: 1fr 1fr; }
  .publicar-campo-largo { grid-column: 1 / -1; }
}

.publicar-campo {
  display: flex;
  flex-direction: column;
  gap: .3125rem;
  min-width: 0;
}
.publicar-campo[hidden] { display: none; }

.publicar-rotulo {
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
}
/* A estrela e o unico sinal de obrigatorio, e ela precisa ser vista:
   por isso o vermelho do sistema, e nao o cinza do rotulo. */
.publicar-obrigatorio {
  margin-left: .125rem;
  color: rgb(var(--color-error));
}

/* O `.publicar-caixa` na frente nao e enfeite de seletor: o plugin `forms` do Tailwind
   entra pelo CDN, zera `[type="text"]`, `select` e `textarea` — fundo branco, canto reto,
   borda cinza — e tem a mesma especificidade de `.publicar-controle` sozinho. Como o
   <style> dele nasce depois dos links, ele ganhava no desempate por ordem. Uma classe a
   mais desempata, e o campo volta a ser o mesmo input de todo o resto do sistema. */
.publicar-caixa .publicar-controle {
  width: 100%;
  padding: .5rem 1rem;
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: .5rem;
  background: rgb(var(--color-surface-container-lowest));
  color: rgb(var(--color-on-surface));
  font-size: .875rem;
  line-height: 1.4;
  transition: border-color .15s;
}
.publicar-caixa .publicar-controle::placeholder { color: rgb(var(--color-on-surface-variant)); }
.publicar-caixa .publicar-controle-area { resize: vertical; min-height: 5.5rem; }
/* O foco do sistema e a borda trocando de cor, e nada mais (login.html:111). */
.publicar-caixa .publicar-controle:focus {
  outline: none;
  border-color: rgb(var(--color-secondary));
}

/* O campo em destaque e o CEP: ele preenche os cinco campos abaixo dele, e agora e o
   primeiro do bloco. Sem uma marca, ele parece so mais um campo no meio dos outros e a
   pessoa segue digitando rua e bairro a mao. A marca e um fundo de apoio e uma barra
   colorida a esquerda, e nao borda grossa ou cor forte: o formulario ja tem contraste
   demais para gastar mais um. */
.publicar-campo-destaque {
  padding: .75rem .875rem;
  border-radius: .625rem;
  border-left: 3px solid rgb(var(--color-secondary));
  background: rgb(var(--color-surface-container-low));
}

/* O `R$` fica fixo dentro da caixa, a esquerda do que se digita: assim o numero cru nunca
   aparece sozinho, e o padding a mais no input abre o espaco exato para ele. */
.publicar-moeda {
  position: relative;
  display: flex;
  align-items: center;
}
.publicar-moeda > span {
  position: absolute;
  left: 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface-variant));
  pointer-events: none;
}
.publicar-caixa .publicar-moeda .publicar-controle { padding-left: 2.625rem; }

/* A lista de cidades flutua sobre o que vem depois, e nao empurra o formulario para baixo:
   um campo que muda de altura a cada tecla faz o resto da tela pular debaixo do dedo. */
.publicar-sugestivo { position: relative; }

.publicar-sugestoes {
  position: absolute;
  z-index: 20;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: 13rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: .5rem;
  background: rgb(var(--color-surface-container-lowest));
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .12);
}
.publicar-sugestoes[hidden] { display: none; }

.publicar-sugestao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .4375rem .625rem;
  border-radius: .375rem;
  background: none;
  border: 0;
  text-align: left;
  font-size: .875rem;
  color: rgb(var(--color-on-surface));
  cursor: pointer;
}
/* A sigla do estado e o que desempata duas cidades de mesmo nome, entao ela precisa ser
   legivel, e nao um sussurro: cinza, porem do mesmo tamanho da dica do formulario. */
.publicar-sugestao > span {
  font-size: .75rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface-variant));
}
.publicar-sugestao:hover,
.publicar-sugestao.is-marcada {
  background: rgb(var(--color-surface-container-high));
}

.publicar-dica,
.publicar-nota {
  font-size: .75rem;
  line-height: 1.45;
  color: rgb(var(--color-on-surface-variant));
}
.publicar-nota { margin-top: .625rem; }

.publicar-marcar {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: rgb(var(--color-on-surface));
  cursor: pointer;
}
.publicar-marcar[hidden] { display: none; }
.publicar-marcar input {
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: rgb(var(--color-secondary));
  cursor: pointer;
}

/* Chips, e nao um <select multiple>: a lista de caracteristicas passa
   de vinte itens, e um select de altura fixa esconde a maioria atras
   de uma rolagem que ninguem percebe que existe. */
.publicar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.publicar-chip {
  padding: .3125rem .625rem;
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--color-on-surface-variant));
  font-size: .8125rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.publicar-chip:hover { background: rgb(var(--color-surface-container)); }
.publicar-chip.is-marcado {
  border-color: rgb(var(--color-secondary));
  background: rgb(var(--color-secondary) / .12);
  color: rgb(var(--color-on-surface));
  font-weight: 600;
}
.publicar-chip:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
}

/* A primeira foto e a capa do card, e a tarja diz isso na propria
   foto: a ordem sozinha nao conta a ninguem qual delas vai aparecer
   na vitrine. */
.publicar-previa-capa {
  position: absolute;
  left: .25rem;
  bottom: .25rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .7);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Tres botoes no rodape do anuncio, contra dois no do post: "Salvar
   rascunho" e "Publicar" sao atos diferentes (secao 4.1), e o
   "Voltar" so existe para quem tem mais de um tipo a escolher. */
.publicar-anuncio .publicar-rodape { flex-wrap: wrap; }