/* ==========================================================================
   componentes.css, o CSS da Fase 7, escrito do jeito certo desde o começo

   Henrique montou este arquivo na issue #88 e a base ficou boa: token em quase
   tudo, flexbox no lugar do position:absolute, e os estados presos num atributo
   do pai ([data-voto], [aria-invalid]) em vez de virar uma classe nova pra cada
   variação. É esse o caminho.

   DUAS REGRAS QUE VALEM PRO ARQUIVO INTEIRO

   1. Nenhuma cor, espaçamento ou tamanho de fonte escrito na mão. Tudo sai do
      tokens.css, que é o que veio do Figma. Se você precisar de um valor que
      não existe lá, uma de duas: ou o valor está errado, ou falta um token.
      Confira no Figma antes de inventar (foi o que aconteceu com o --on-gold,
      o texto escuro em cima do dourado, que agora está no tokens.css).

   2. Nada de position:absolute com pixel pra posicionar coisa em fluxo. Foi
      isso que fez o Esistema.css chegar em 1856 linhas com 52 posições
      chumbadas. Aqui é flex + gap.

   O QUE É UM "COMPONENTE" AQUI
   Uma classe que descreve UMA coisa e não sabe onde ela vai ser usada. O botão
   não escolhe se fica na esquerda ou na direita da tela, quem escolhe é o
   container que segura o botão. Isso é o que fazia o header ficar torto na
   primeira versão: o .btn-main1 tinha margin-left:auto dentro dele, então TODO
   botão do site se empurrava sozinho pra direita.

   COMO ADICIONAR UM COMPONENTE NOVO
   1. Abre o Design System no Figma e clica no componente.
   2. Anota o que o painel da direita mostra: cor, tamanho de fonte, padding,
      raio do canto, e as variantes (default / hover / disabled...).
   3. Acha o token de cada valor no tokens.css.
   4. Escreve a classe aqui, com um comentário dizendo de qual componente do
      Figma ela saiu.
   5. Põe um exemplo dela no sistema-design.html, que é a vitrine.

   Carregue sempre DEPOIS do tokens.css (senão os var(--...) não têm valor).
   ========================================================================== */


/* ==========================================================================
   BASE: reset e o fundo/fonte gerais (tema escuro + Inter, do Figma)
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* O atributo hidden do HTML tem que ganhar de qualquer display escrito aqui.

   Por que isso precisa existir: o navegador aplica "display: none" no [hidden] pela folha
   de estilo PADRAO dele, que perde de qualquer regra nossa. Como o .resposta-form tem
   "display: flex", o campo de responder nascia ABERTO em todos os comentarios das tres
   telas, mesmo com o hidden no elemento. O alternarResposta() do comum.js ate ligava e
   desligava o atributo certinho, so que ele nao mudava nada na tela.

   Quando um elemento com hidden aparecer mesmo assim, e' sempre isso: alguma regra deu um
   display pra ele. Esta linha resolve pro arquivo inteiro, agora e no que vier depois. */
[hidden] { display: none !important; }


/* ==========================================================================
   1. BOTÃO: Figma "Button", variantes primário / secundário / texto
   ========================================================================== */

/* O que os três têm em comum. Repare que não tem margem nenhuma aqui: margem é
   posição, e posição é problema de quem coloca o botão na tela. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-family: inherit; font-weight: 700; font-size: var(--fs-legenda);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

/* Primário: dourado cheio. O texto usa --on-gold, não branco: branco em cima de
   dourado quase não dá pra ler. */
.btn-primario {
    background: var(--gold);
    color: var(--on-gold);
    border-color: var(--gold);
}
.btn-primario:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

/* Secundário: só o contorno. */
.btn-secundario {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
}
.btn-secundario:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* Texto: sem fundo e sem borda, pra ação secundária (Cancelar, Sair). */
.btn-texto {
    background: none;
    color: var(--text-dim);
    border-color: transparent;
}
.btn-texto:hover { color: var(--text); }

.btn-texto.ativo{
    color: var(--gold);
}

/* Desabilitado vale pros três. O :disabled só funciona em <button>; se um dia
   virar <a>, tem que usar [aria-disabled="true"] junto. */
.btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}


/* ==========================================================================
   2. BOTÃO SEGUIR: Figma "Botão Seguir", é um toggle: Seguir <-> Seguindo
   ==========================================================================
   Por que não é só um .btn-primario? Porque ele tem um comportamento próprio: o
   MESMO botão troca de estado quando você clica (o seguir() no comum.js já faz
   isso, ele só troca o texto). Componente com estado ganha classe própria, e o
   estado vira uma classe a mais em cima da base, não um segundo botão. */

.btn-seguir {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--on-gold);
    font-family: inherit; font-weight: 700; font-size: var(--fs-legenda);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.btn-seguir:hover { background: var(--gold-soft); }

/* Já sigo: vira contorno. É a mesma classe, só com .seguindo em cima. */
.btn-seguir.seguindo {
    background: transparent;
    color: var(--gold);
}
.btn-seguir.seguindo:hover { color: var(--gold-soft); border-color: var(--gold-soft); }


/* ==========================================================================
   3. AVATAR: Figma "Avatar", variantes com foto e sem foto
   ==========================================================================
   Um tamanho só não serve: no header ele é pequeno, no perfil é grande. Então a
   classe .avatar cuida do formato e os modificadores cuidam do tamanho. */

.avatar {
    width: 40px; height: 40px;          /* tamanho padrão, o do header e do card */
    border-radius: 50%;
    object-fit: cover;                  /* corta a foto no quadrado sem esticar */
    border: 1px solid var(--border);
    flex-shrink: 0;                     /* não deixa o flex espremer o círculo */
    background: var(--surface-header);  /* aparece enquanto a foto não carrega */
}

.avatar-grande { width: 96px; height: 96px; }   /* o do perfil, 96px no Figma */

/* Sem foto: o fundo dourado com a inicial no meio. Use quando o usuário não tem
   foto_perfil (é o mesmo caso do noimg.webp de hoje, só que sem baixar imagem). */
.avatar-vazio {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold);
    color: var(--on-gold);
    font-weight: 700; font-size: var(--fs-corpo);
    border-color: var(--gold);
}
.avatar-grande.avatar-vazio { font-size: var(--fs-logo); }


/* ==========================================================================
   4. BARRA DE BUSCA: Figma "Barra de busca" (pílula com a lupa dentro)
   ==========================================================================
   O Figma mostra 950px de largura. Isso NÃO é uma regra: é a largura que a
   barra ficou naquele frame, que é largo. Se você chumbar 950px (ou 1250px) no
   CSS, ela vai ficar cortada em tela pequena e sobrando em tela grande.

   O que copiar do Figma é a intenção: "a busca ocupa o meio, entre a logo e o
   avatar". Isso em CSS é flex:1 (cresce e toma o espaço que sobrar), com um
   max-width pra ela não virar uma faixa de dois metros num monitor ultrawide. */

.barra-busca {
    display: flex; align-items: center; gap: var(--sp-2);
    flex: 1;
    max-width: 720px;
    background: var(--surface-header);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
}

.barra-busca:focus-within { border-color: var(--gold); }  /* acende quando o input tem foco */

.barra-busca .lupa { width: 16px; height: 16px; opacity: .6; }

.busca-input {
    flex: 1;
    background: none; border: none; outline: none;
    color: var(--text); font-family: inherit; font-size: var(--fs-corpo);
}
.busca-input::placeholder { color: var(--text-dim); }

.btn-buscar {
    background: none; border: none;
    color: var(--text-dim);
    font-size: var(--fs-base);
    cursor: pointer;
}
.btn-buscar:hover { color: var(--gold); }


/* ==========================================================================
   5. CAMPO DE TEXTO: Figma "Campo de texto", estados default / foco / erro
   ==========================================================================
   Largura NÃO entra aqui, pelo mesmo motivo da busca: o mesmo input é estreito
   num modal e largo no formulário de postar. Quem manda na largura é o
   container. Aqui fica só a aparência e a altura. */

.campo, .campo-desc {
    width: 100%;
    background: var(--surface-header);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font); font-size: var(--fs-corpo);
    outline: none;
    transition: border-color .15s;
}

.campo::placeholder, .campo-desc::placeholder { color: var(--text-dim); }

.campo:focus, .campo-desc:focus { border-color: var(--gold); }

/* Erro. O aria-invalid não é enfeite: além de pintar a borda, ele é o que o
   leitor de tela anuncia pra quem não enxerga a borda vermelha. Uma coisa só
   resolvendo as duas. */
.campo[aria-invalid="true"], .campo-desc[aria-invalid="true"] { border-color: var(--downvote); }

.campo-desc { min-height: 96px; resize: vertical; }

/* A mensagem de erro embaixo do campo. */
.campo-erro { color: var(--downvote); font-size: var(--fs-legenda); }


/* ==========================================================================
   6. CONTROLE DE VOTO: Figma "Controle de voto", neutro / votou+ / votou−
   ==========================================================================
   O estado mora num data-voto no PAI. Assim o JS troca UM atributo e as três
   partes (seta de cima, número, seta de baixo) se pintam sozinhas, em vez de
   você ter que lembrar de mexer em três elementos na mão toda vez. */

.controle-voto {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2);
}

.contador-voto {
    font-weight: 700; font-size: var(--fs-corpo);
    color: var(--text);
    min-width: 3ch; text-align: center;   /* o número não empurra as setas quando muda de 9 pra 10 */
}

/* As setas são triângulos de CSS: um elemento sem largura nem altura, onde só
   três das quatro bordas existem: a de baixo colorida vira a ponta pra cima. */
.seta-cima, .seta-baixo,
.anterior, .proximo {          /* as setas do carrossel são o mesmo triângulo, ver componente 7 */
    width: 0; height: 0;
    background: none; border-style: solid; cursor: pointer;
    padding: 0;
}

.seta-cima {
    border-width: 0 8px 12px 8px;
    border-color: transparent transparent var(--text-dim) transparent;
}
.seta-cima:hover { border-bottom-color: var(--text-muted); }

.seta-baixo {
    border-width: 12px 8px 0 8px;
    border-color: var(--text-dim) transparent transparent transparent;
}
.seta-baixo:hover { border-top-color: var(--text-muted); }

/* Votou a favor */
.controle-voto[data-voto="mais"] .seta-cima { border-bottom-color: var(--upvote); }
.controle-voto[data-voto="mais"] .contador-voto { color: var(--upvote); }

/* Votou contra */
.controle-voto[data-voto="menos"] .seta-baixo { border-top-color: var(--downvote); }
.controle-voto[data-voto="menos"] .contador-voto { color: var(--downvote); }

/* Na horizontal, que é como o voto aparece dentro do comentário. */
.controle-voto.horizontal { flex-direction: row; padding: 0; }


/* ==========================================================================
   7. CARD DE POSTAGEM: Figma "Card de Postagem"
   ========================================================================== */

.card-post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-3);
}

/* Linha de cima: avatar + (nome, data) + botão seguir + tag "editado". */
.post-topo { display: flex; align-items: center; gap: var(--sp-3); }

.post-identidade { display: flex; flex-direction: column; }

.post-nome-linha { display: flex; align-items: center; gap: var(--sp-2); }

.post-autor { font-weight: 700; font-size: var(--fs-corpo); color: var(--text); }

.post-data { color: var(--text-dim); font-size: var(--fs-legenda); }

/* A tag "Editado" vai pra ponta direita. O margin-left:auto está AQUI, no
   elemento que de fato quer ficar na ponta, e não dentro do botão. */
.post-editado {
    margin-left: auto;
    background: var(--surface-header);
    color: var(--text-dim);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-legenda);
}

/* Editar, Excluir e a tag "Editado" na ponta direita do topo do card. Mesmo
   princípio do .header-acoes: o margin-left:auto mora no container, não nos
   botões, então quem decide a posição é um lugar só. */
.post-acoes {
    margin-left: auto;
    display: flex; align-items: center; gap: var(--sp-2);
}

/* O <a> que embrulha avatar + nome + data no topo do card. Ele é um link, mas não
   deve parecer um: herda a cor do texto e só sublinha no hover, senão o nome do
   autor fica azul de link no meio do card. */
.post-link-perfil {
    display: flex; align-items: center; gap: var(--sp-3);
    color: inherit; text-decoration: none;
}

.post-link-perfil:hover .post-autor { text-decoration: underline; }

.coment-link-perfil .post-autor{
    color: inherit; text-decoration: none;
}

.coment-link-perfil:hover .post-autor { text-decoration: underline; }

/* Miolo: título, descrição, imagens. */
.post-corpo { display: flex; flex-direction: column; gap: var(--sp-2); }

.post-titulo { color: var(--text); font-size: var(--fs-titulo); font-weight: 600; }

.post-desc { color: var(--text-muted); font-size: var(--fs-corpo); white-space: pre-wrap; }

.post-img { border-radius: var(--r-sm); border: 1px solid var(--border); max-height: 420px; object-fit: cover; }

/* Carrossel de imagens na postagem */
.carrossel {
    display: flex; align-items: center;
    width: 100%; gap: var(--sp-1);
}

.janela {
    width: 100%; overflow: hidden;
}

.slides {
    display: flex; transition: transform 0.3s ease;
}

/* Cada imagem ocupa a JANELA INTEIRA, e nao "o que couber".
   Esse era o motivo de o carrossel mostrar as tres imagens lado a lado em vez de uma por vez:
   sem largura definida, o flex divide o espaco entre os itens, e tres imagens viravam tres
   colunas de um terco cada. O iniciarCarrossel() desliza a faixa em multiplos da largura da
   janela, entao ele so acerta se cada imagem TIVER a largura da janela. As setas ate
   funcionavam, elas e' que pulavam pro lugar errado.
   O 0 0 quer dizer "nao cresce, nao encolhe": sem isso o flex espremeria tudo de novo. */
.slides img {
    flex: 0 0 100%;
    width: 100%;
}

/* Setas de Anterior e Próximo do carrossel.

   Henrique: essas quatro propriedades (width:0, height:0, background:none,
   border-style:solid, padding:0) são EXATAMENTE as mesmas do .seta-cima/.seta-baixo
   do componente 6, porque é a mesma técnica: um elemento sem tamanho onde só
   três bordas existem, e a quarta vira a ponta do triângulo. Em vez de escrever
   de novo aqui, eu adicionei .anterior e .proximo naquele seletor lá em cima.
   Regra repetida é regra que sai do lugar: no dia em que alguém mudar a
   espessura da borda no componente 6, essas aqui ficavam pra trás e o carrossel
   passava a ter seta de um tamanho diferente do voto, sem ninguém entender por quê.

   O que fica aqui embaixo é só o que de fato MUDA entre elas: a direção da ponta. */

.anterior {
    border-width: 8px 9px 8px 0; border-color: transparent var(--text-dim) transparent transparent;
}

.anterior:hover {
    border-right-color: var(--text-muted);
}

.proximo {
    border-width: 8px 0 8px 9px; border-color: transparent transparent transparent var(--text-dim);
}

.proximo:hover {
    border-left-color: var(--text-muted);
}

/* Rodapé: voto + contador de comentários. */
.post-stats { display: flex; align-items: center; gap: var(--sp-4); }

.stat-comentarios {
    display: flex; align-items: center; gap: var(--sp-1);
    color: var(--text-dim); font-size: var(--fs-legenda);
}

.icone-comentario {
    width: 14px; height: 14px;
    border: 2px solid currentColor;   /* currentColor = a cor do texto do pai, então
                                         o ícone acompanha sozinho quando o texto muda */
    border-radius: 50%;
}


/* ==========================================================================
   8. ITEM DE COMENTÁRIO: Figma "Item de comentário", raiz e aninhado
   ========================================================================== */

.msg-comentarios{
    color: var(--text-dim); font-size: var(--fs-legenda);
}

.card-comentarios {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-3);
}

/* Henrique: era font-weight: 600px. font-weight nao tem unidade, e o valor com "px" e
   invalido — o navegador descarta a declaracao inteira e o texto fica no peso normal (400).
   O F12 mostra isso na hora: propriedade invalida aparece riscada na aba Styles. */
.span-comentarios{
    color: var(--text); font-weight: 600; font-size: var(--fs-base);
    margin-right: auto;
}

/* A CAIXA que guarda a lista (plural) e UM comentário (singular) são coisas
   diferentes. A caixa só empilha; quem põe o avatar ao lado do texto é o item. */
.comentarios { display: flex; flex-direction: column; }

.comentario { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; }

.comentario-corpo { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }

.comentario-topo { display: flex; align-items: center; gap: var(--sp-2); }

.comentario-texto { color: var(--text-muted); font-size: var(--fs-corpo); white-space: pre-wrap; }

.comentario-acoes { display: flex; align-items: center; gap: var(--sp-4); }

.btn-responder {
    background: none; border: none; padding: 0;
    color: var(--gold); font-family: inherit; font-size: var(--fs-legenda); font-weight: 600;
    cursor: pointer;
}
.btn-responder:hover { color: var(--gold-soft); }

/* Campo de responder, que nasce com o atributo hidden e o botão Responder revela.
   O .campo aqui é o mesmo do componente 5, sem CSS novo: o flex:1 faz ele ocupar
   o espaço que sobra ao lado do botão. */
.resposta-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.resposta-form .campo { flex: 1; }

/* Aninhado: é o mesmo componente, com um recuo e um fiozinho na esquerda. Esse
   fio é o parent_id da tabela comentarios aparecendo na tela: ele mostra de
   quem aquela resposta é filha. Aninhar de novo dentro dele funciona sozinho,
   porque o recuo é relativo ao pai. */
.comentario.aninhado {
    margin-left: var(--sp-8);
    padding-left: var(--sp-4);
    border-left: 2px solid var(--border);

    margin-left: calc(var(--sp-6) * min(var(--nivel, 0), 5)); /* recuo relativo ao nível, limitado a 5 */
}


/* ==========================================================================
   9. HEADER / NAV: Figma "Header / Nav" (faixa de 68px)
   ==========================================================================
   Da esquerda pra direita: logo, busca no meio, e do lado direito Feed +
   avatar. Sem links soltos e sem os filtros grudados na busca. O filtro do
   feed desceu pro corpo da página (componente 10).

   sticky, não fixed. O fixed tira a faixa do fluxo e o conteúdo passa por baixo
   dela, que é exatamente o bug do header cobrindo o primeiro post. O sticky
   ocupa o lugar dele e gruda no topo ao rolar, sem precisar de padding-top
   compensando na mão. */

.header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: var(--sp-6);
    height: 68px;
    padding: 0 var(--sp-6);
    background: var(--surface-header);
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
}

.header-logo {
    font-weight: 800; font-size: var(--fs-logo); letter-spacing: -0.5px;
    color: var(--gold);
    flex-shrink: 0;
    font-family: var(--font-logo);
}

/* O bloco da direita. O margin-left:auto vive aqui, no container, e é ele que
   empurra o grupo todo pra ponta. */
.header-acoes { display: flex; align-items: center; gap: var(--sp-4); }

.header-link { color: var(--text-dim); font-size: var(--fs-corpo); font-weight: 600; }
.header-link:hover, .header-link.ativo { color: var(--text); }


/* ==========================================================================
   10. FILTRO DO FEED: Figma "Filtro do feed" (duas pills, Todos e Seguindo)
   ==========================================================================
   Mesma ideia do voto: o estado é uma classe (.ativo) em cima da classe base,
   não uma segunda classe inteira. */

.filtro-feed { display: flex; gap: var(--sp-2); }

.pill {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-header);
    color: var(--text-dim);
    font-family: inherit; font-size: var(--fs-corpo); font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.pill:hover { color: var(--text); }

.pill.ativo {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-gold);
}


/* ==========================================================================
   11. MODAL: Figma "Editar postagem" (node 27:162 do protótipo, issue #98)
   ==========================================================================
   Overlay escurecido cobrindo a tela + o card do dialog centralizado nele.
   Mesmo truque do .filtro-feed/.pill: o JS só liga/desliga a classe .show,
   quem decide o antes/depois (esconder/mostrar) é o CSS.

   Os campos de dentro do dialog são os MESMOS .campo/.campo-desc do
   componente 5, e os botões são os MESMOS .btn/.btn-primario/.btn-texto do
   componente 1 — um modal não inventa input nem botão novo, só organiza os
   que já existem.

   O Figma mede o padding do card em 28px/24px; não bate com nenhum degrau
   da escala de 8px do tokens.css (a mais perto é --sp-6, 24px). Fica
   --sp-6 nos dois eixos: a diferença de 4px não se vê, e não inventamos
   token novo pra um valor que só aparece uma vez. Mesma ideia pro título,
   o Figma pede 20px e usamos --fs-titulo (18px) por não termos esse
   degrau — se aparecer um segundo lugar pedindo 20px, aí sim vale criar
   o token. */

.overlay-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.overlay-modal.show { display: flex; }

.modal {
    width: 560px;
    max-width: calc(100vw - var(--sp-8));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Boa pegada essa, Henrique. O <dialog> nasce escondido pelo navegador, mas a nossa
   .modal declara display:flex, e essa regra ganha do padrão do navegador: resultado,
   o dialog aparecia na página mesmo fechado, e o close() não parecia funcionar.
   O :not([open]) devolve o display:none pro dialog que não está aberto, e aí o
   showModal()/close() voltam a mandar. */
dialog.modal:not([open]) {
    display: none;
}

.modal-topo { display: flex; align-items: center; }

.modal-titulo { font-size: var(--fs-titulo); font-weight: 700; color: var(--text); }

/* margin-left:auto mora aqui, no botão que quer ir pra ponta — mesma regra
   do .post-editado e do .header-acoes, não é o botão que decide a posição. */
.modal-fechar {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: var(--fs-base);
    cursor: pointer;
}
.modal-fechar:hover { color: var(--text); }

.modal-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* O dialog de criar postagem (issue #97) usa <dialog> nativo em vez do
   overlay-modal manual: showModal() ja poe o navegador pra remover o
   display:none e criar o ::backdrop sozinho - a caixa em si e o MESMO .modal
   aqui em cima (ja tem display:flex), so falta dizer a cor do fundo
   escurecido. A centralizacao (margin:auto) o UA stylesheet tambem daria de
   graca, mas o reset global "* { margin:0 }" la em cima (linha 45) zera ela
   pra TODO elemento, dialog incluso - entao ela precisa voltar aqui. */
dialog.modal {
    margin: auto;
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .75); }


/* ==========================================================================
   12. UPLOAD DE IMAGENS: dialog de criar postagem, area tracejada + prévia
   ==========================================================================
   Reaproveita .post-topo/.avatar/.post-autor do componente 3/7 pra linha
   "quem esta postando" - nao é um componente novo, so essa area tracejada e
   a lista de miniaturas sao. */

.dropzone-imagens {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: var(--sp-6);
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: inherit; font-size: var(--fs-corpo);
    cursor: pointer;
}
.dropzone-imagens:hover { border-color: var(--gold); color: var(--gold); }

.preview-imagens {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    list-style: none;
}
.preview-imagens li { position: relative; }
.preview-imagens img {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}
/* Botão de remover: redondo, encostado no canto da miniatura por cima dela. */
.preview-imagens button {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--surface-header);
    color: var(--text);
    font-size: 11px; line-height: 1;
    cursor: pointer;
}


/* ==========================================================================
   13. BARRA DE CRIAR POSTAGEM: Figma "Criar publicação" (issue #97)
   ==========================================================================
   Um <button> só, sem botão aninhado dentro: o "Postar" é só decoração (ver
   pointer-events abaixo), clicar em qualquer parte da barra abre o dialog. */

.barra-criar {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

/* Copiada da .barra-criar logo acima, e por isso veio com "cursor: pointer" junto. La faz
   sentido: a .barra-criar E um botao, a barra inteira e clicavel. Aqui dentro tem um input,
   e a mao no lugar do cursor de texto faz o campo parecer que nao da pra digitar. Tirei. */
.barra-comentar {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    margin-top: var(--sp-4);

    font-family: inherit;
    text-align: left;
}

/* o campo ocupa o espaco que sobra entre o avatar e o botao Enviar */
.barra-comentar .campo { flex: 1; }
.barra-criar:hover { border-color: var(--gold); }

.barra-criar-texto { flex: 1; color: var(--text-dim); font-size: var(--fs-corpo); }

.barra-criar .btn { pointer-events: none; }

/* ==========================================================================
   14. LIGHTBOX
   ========================================================================== */
.lightbox {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .75); align-items: center; justify-content: center;
    flex-direction: column; z-index: 100; gap: var(--sp-2);
}

.lightbox img {
    max-width: 70%; max-height: 70%; object-fit: contain;
}

.lightbox-fechar {
    background: none; border: none; color: var(--text);
    font-size: var(--fs-titulo); cursor: pointer;
}

/* ==========================================================================
   15. ITEM DE USUÁRIO: Figma "Item de seguidor" (telas de Seguidores/Seguindo)
   ==========================================================================
   Uma linha de uma lista de pessoas: avatar + (nome, @handle) + Botão Seguir
   na ponta. É basicamente o mesmo desenho do .post-topo (componente 7), só
   que sem post atrás — por isso reaproveita o MESMO .avatar e o MESMO
   .btn-seguir, e só a linha em si (espaçamento, divisória, o
   margin-left:auto do botão) é novo.

   O @handle já existe no banco (coluna username). Quem se cadastrou antes
   dela ganhou o handle na subida do servidor, mas o JS ainda deixa o
   .usuario-handle vazio quando o campo não vem, pra nunca sobrar um "@"
   sozinho na linha. A
   marcação já fica pronta pra receber o campo quando aquela issue fechar. */

.lista-usuarios {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0 var(--sp-4);
    list-style: none;
}

.item-usuario {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}

.item-usuario:last-child { border-bottom: none; }

/* Não é nem o .avatar padrão (40px) nem o .avatar-grande (96px) do
   componente 3 — 44px é o tamanho que este frame do Figma pediu. */
.avatar-md { width: 44px; height: 44px; }

.usuario-info { display: flex; flex-direction: column; }

.usuario-nome { font-weight: 700; font-size: var(--fs-corpo); color: var(--text); }

.usuario-handle { color: var(--text-dim); font-size: var(--fs-legenda); }

/* O botão Seguir na ponta direita. O margin-left:auto mora aqui, na linha
   que quer empurrar ele, não dentro do .btn-seguir — mesma regra do
   .post-acoes no componente 7. */
.item-usuario .btn-seguir { margin-left: auto; }


/* ==========================================================================
   16. AVISO: alerta que aparece na tela e some sozinho, no lugar do alert()
   ==========================================================================
   Substitui o alert() padrão do navegador (issue: tirar os alert() do
   site — login, cadastro, "nenhum resultado", falha ao excluir, etc). Quem
   cria/mostra/some com esse elemento é o mostrarAviso() de comum.js — o CSS
   aqui só cuida da aparência e da transição de entrada/saída.

   Duas variações, pelos tokens que a issue pediu:
     --gold      -> .aviso-sucesso (o padrão)
     --downvote  -> .aviso-erro

   mostrarAviso() cria o <div id="aviso"> sozinho na primeira vez que roda,
   então nenhuma página precisa ter essa div no HTML — só chamar a função
   no lugar de alert(). */

.aviso {
    position: fixed;
    left: 50%;
    bottom: var(--sp-6);
    transform: translate(-50%, 12px);

    max-width: 90vw;
    padding: var(--sp-3) var(--sp-4);

    background: var(--surface-header);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--r-sm);

    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-corpo);
    font-weight: 600;

    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 999;
}

.aviso-visivel {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.aviso-erro { border-left-color: var(--downvote); }
.aviso-sucesso { border-left-color: var(--gold); }


/* ==========================================================================
   LAYOUT: não é componente, é onde os componentes ficam na página
   ========================================================================== */

.feed { 
    max-width: 680px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); 
    display: flex; gap: var(--sp-4); flex-direction: column; /* gap para dar espaçamento entre o card de criar post, botões de filtro e o primeiro post do feed*/
}

.lista-posts { display: flex; flex-direction: column; gap: var(--sp-4); }


/* ==========================================================================
   EXTRAS: coisas do projeto que não estão no Design System
   ========================================================================== */

/* Círculo dourado da home. */
.circulo {
    width: 140px; height: 140px;
    background-image: radial-gradient(var(--gold), var(--surface));
    border: 2px solid var(--gold);
    border-radius: 50%;
}

/* Botão flutuante do "+" (nova postagem). */
.fab-button {
    width: 56px; height: 56px;
    border-radius: 50%; border: none;
    background: var(--gold); color: var(--on-gold);
    font-size: var(--fs-logo); font-weight: 700;
    cursor: pointer;
}
.fab-button:hover { background: var(--gold-soft); }