/* =====================================================================
   3Cumes - Sistema visual da comunidade
   Direção: rede social contemporânea, leve e orientada a conteúdo.
   A identidade de montanha vive nas imagens, nos dados técnicos e no
   acento laranja; a interface permanece familiar, clara e inclusiva.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fontes locais (sem CDN)
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variavel.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Tokens — tema escuro (padrão)
   --------------------------------------------------------------------- */
:root {
  /* Breu: a rocha à noite */
  --breu-1000: #060908;
  --breu-950: #0A0E0C;
  --breu-900: #101513;
  --breu-850: #151B19;
  --breu-800: #1B2320;
  --breu-750: #222B28;
  --breu-700: #2C3733;
  --breu-600: #3D4A45;
  --breu-500: #56645F;
  --breu-400: #7C8B85;
  --breu-300: #A6B3AD;
  --breu-200: #CBD5D0;
  --breu-100: #E8EEEB;

  /* Magma: ação, links, chamada principal */
  --magma-700: #B93A0C;
  --magma-600: #DF4A10;
  --magma: #FF5C1A;
  --magma-400: #FF8250;
  --magma-fraco: rgba(255, 92, 26, 0.14);

  /* Lima: o que está acontecendo agora */
  --lima: #C6F24E;
  --lima-600: #9BC72C;
  --lima-fraco: rgba(198, 242, 78, 0.14);

  /* Estados */
  --verde: #34C77B;
  --verde-fraco: rgba(52, 199, 123, 0.14);
  --vermelho: #F2555A;
  --vermelho-fraco: rgba(242, 85, 90, 0.14);

  /* Superfícies */
  --fundo: var(--breu-950);
  --superficie: var(--breu-900);
  --superficie-2: var(--breu-850);
  --superficie-3: var(--breu-800);
  --fio: rgba(255, 255, 255, 0.07);
  --fio-forte: rgba(255, 255, 255, 0.14);
  --tinta: var(--breu-100);
  --tinta-suave: var(--breu-300);
  --tinta-fraca: var(--breu-400);

  /* Tipografia */
  --fonte-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-tecnica: 'Barlow Condensed', 'Inter', system-ui, sans-serif;

  /* Ritmo */
  --raio: 4px;
  --raio-md: 8px;
  --raio-lg: 14px;
  --raio-pilula: 999px;
  --sombra: 0 8px 28px rgba(0, 0, 0, 0.45);
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.3);

  /* Bootstrap */
  --bs-font-sans-serif: var(--fonte-corpo);
  --bs-body-font-family: var(--fonte-corpo);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.6;
  --bs-body-bg: var(--fundo);
  --bs-body-color: var(--tinta);
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: var(--tinta-suave);
  --bs-tertiary-color: var(--tinta-fraca);
  --bs-border-color: var(--fio);
  --bs-border-color-translucent: var(--fio);
  --bs-border-radius: var(--raio);
  --bs-border-radius-sm: var(--raio);
  --bs-border-radius-lg: var(--raio-md);
  --bs-border-radius-xl: var(--raio-lg);
  --bs-primary: var(--magma);
  --bs-primary-rgb: 255, 92, 26;
  --bs-secondary-bg: var(--superficie-3);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-link-color: var(--tinta);
  --bs-link-color-rgb: 232, 238, 235;
  --bs-link-hover-color: var(--magma);
  --bs-link-decoration: none;
  --bs-heading-color: #FFFFFF;
  --bs-focus-ring-color: rgba(255, 92, 26, 0.4);
  --bs-focus-ring-width: 2px;
  --bs-dark-rgb: 10, 14, 12;
}

/* Tema claro opcional */
[data-bs-theme='claro'] {
  --fundo: #F4F6F4;
  --superficie: #FFFFFF;
  --superficie-2: #F7F9F7;
  --superficie-3: #EEF2EF;
  --fio: rgba(10, 14, 12, 0.1);
  --fio-forte: rgba(10, 14, 12, 0.2);
  --tinta: #101513;
  --tinta-suave: #4A5551;
  --tinta-fraca: #6E7A75;
  --magma-fraco: rgba(255, 92, 26, 0.1);
  --lima: #7FA717;
  --lima-fraco: rgba(127, 167, 23, 0.12);
  --verde: #1F8F52;
  --sombra: 0 8px 28px rgba(10, 20, 16, 0.1);
  --sombra-suave: 0 1px 4px rgba(10, 20, 16, 0.08);

  --bs-body-bg: var(--fundo);
  --bs-body-color: var(--tinta);
  --bs-emphasis-color: #000000;
  --bs-heading-color: #0A0E0C;
  --bs-secondary-color: var(--tinta-suave);
  --bs-tertiary-color: var(--tinta-fraca);
  --bs-border-color: var(--fio);
  --bs-border-color-translucent: var(--fio);
  --bs-secondary-bg: var(--superficie-3);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-link-color: var(--tinta);
  --bs-link-color-rgb: 16, 21, 19;
}

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--bs-heading-color);
  text-transform: uppercase;
}

h1,
.h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  font-weight: 800;
}

h2,
.h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
}

h3,
.h3 {
  font-size: 1.4rem;
}

h4,
.h4 {
  font-size: 1.15rem;
}

h5,
.h5 {
  font-size: 1.05rem;
}

h6,
.h6 {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* Títulos que precisam de leitura corrida (matérias, descrições) */
.titulo-texto {
  font-family: var(--fonte-corpo);
  font-weight: 650;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a {
  text-decoration: none;
  transition: color 0.14s ease;
}

a:hover {
  color: var(--magma);
}

:focus-visible {
  outline: 2px solid var(--magma);
  outline-offset: 2px;
  border-radius: var(--raio);
}

hr {
  border-color: var(--fio);
  opacity: 1;
}

::selection {
  background: var(--magma);
  color: #fff;
}

img {
  max-width: 100%;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--breu-700) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--breu-700);
  border-radius: var(--raio-pilula);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--breu-600);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------------------------------------------------------------
   4. Tipografia técnica
   --------------------------------------------------------------------- */
.tecnica {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.eyebrow {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magma);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--magma);
  flex: 0 0 auto;
}

.eyebrow-lima {
  color: var(--lima);
}

.eyebrow-lima::before {
  background: var(--lima);
}

.eyebrow-neutro {
  color: var(--tinta-fraca);
}

.eyebrow-neutro::before {
  background: var(--tinta-fraca);
}

.numero-dado {
  font-family: var(--fonte-tecnica);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.rotulo-dado {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.cabecalho-secao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.cabecalho-secao h1,
.cabecalho-secao h2,
.cabecalho-secao h3 {
  margin: 0;
}

/* A régua virou um traço de acento curto */
.regua {
  height: 3px;
  width: 46px;
  background: var(--magma);
  border: 0;
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------
   5. Assinatura: selo de graduação brasileira
   --------------------------------------------------------------------- */
.grau {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: var(--raio);
  background: rgba(10, 14, 12, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--fio-forte);
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
}

.grau>span {
  padding: 0.32rem 0.46rem;
  display: flex;
  align-items: center;
}

.grau>span+span {
  border-left: 1px solid var(--fio-forte);
}

.grau .grau-geral {
  color: rgba(255, 255, 255, 0.72);
}

.grau .grau-lance,
.grau .grau-boulder {
  color: var(--breu-950);
  background: var(--magma);
  font-weight: 800;
}

.grau .grau-extra {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.grau-lg {
  font-size: 1.45rem;
}

.grau-lg>span {
  padding: 0.45rem 0.7rem;
}

.grau-sm {
  font-size: 0.8rem;
}

.grau-sm>span {
  padding: 0.22rem 0.36rem;
}

[data-bs-theme='claro'] .grau {
  background: #fff;
  color: var(--tinta);
  border-color: var(--fio-forte);
}

[data-bs-theme='claro'] .grau .grau-geral {
  color: var(--tinta-suave);
}

[data-bs-theme='claro'] .grau .grau-extra {
  color: var(--tinta-fraca);
}

.grau-vazio {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------------
   6. Shell de rede social: três colunas
   --------------------------------------------------------------------- */
.app-shell {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 992px) {
  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}

@media (min-width: 1300px) {
  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr) 320px;
  }
}

.coluna-fixa {
  position: sticky;
  top: 78px;
}

@media (max-width: 991.98px) {
  .app-lateral-esq {
    display: none;
  }
}

@media (max-width: 1299.98px) {
  .app-lateral-dir {
    display: none;
  }
}

/* Menu lateral do app */
.menu-lateral {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-lateral a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--raio-md);
  color: var(--tinta-suave);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.menu-lateral a i {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
  flex: 0 0 auto;
}

.menu-lateral a:hover {
  background: var(--superficie-2);
  color: var(--tinta);
}

.menu-lateral a.active {
  background: var(--magma-fraco);
  color: var(--magma);
  box-shadow: inset 3px 0 0 var(--magma);
}

.menu-lateral .conta {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   7. Publicação do feed
   --------------------------------------------------------------------- */
.publicacao {
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: border-color 0.16s ease;
}

.publicacao:hover {
  border-color: var(--fio-forte);
}

.publicacao-topo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
}

.publicacao-topo .identidade {
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.publicacao-topo .nome {
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--tinta);
}

.publicacao-topo .contexto {
  font-size: 0.82rem;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.publicacao-acao {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: var(--raio-pilula);
  background: var(--superficie-3);
  color: var(--tinta-suave);
  white-space: nowrap;
}

.publicacao-acao.via {
  background: var(--magma-fraco);
  color: var(--magma);
}

.publicacao-acao.encadenamento {
  background: var(--lima-fraco);
  color: var(--lima);
}

.publicacao-acao.evento {
  background: var(--verde-fraco);
  color: var(--verde);
}

.publicacao-acao.noticia {
  background: rgba(255, 255, 255, .08);
  color: var(--tinta-suave);
}

.publicacao-acao.topico {
  background: rgba(255, 255, 255, .08);
  color: var(--tinta-suave);
}

.publicacao-corpo {
  padding: 0 1rem 0.85rem;
}

.publicacao-corpo p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.publicacao-figura {
  display: block;
  position: relative;
  background: var(--breu-1000);
  overflow: hidden;
  max-height: 620px;
}

.publicacao-figura img,
.publicacao-figura video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 620px;
  object-fit: cover;
}

.publicacao-figura .grau {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
}

.publicacao-figura .marca-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.6rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ---- Carrossel: uma leva de fotos/vídeos vira uma publicação só ------ */
.publicacao-carrossel {
  position: relative;
  background: var(--breu-1000);
}

.publicacao-carrossel .trilha {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.publicacao-carrossel .trilha::-webkit-scrollbar {
  display: none;
}

.publicacao-carrossel .quadro {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  max-height: 620px;
  display: flex;
}

.publicacao-carrossel .quadro a {
  display: block;
  width: 100%;
  line-height: 0;
}

.publicacao-carrossel .quadro img,
.publicacao-carrossel .quadro video {
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
}

.carrossel-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(10, 13, 12, .55);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

.publicacao-carrossel:hover .carrossel-seta,
.carrossel-seta:focus-visible {
  opacity: 1;
}

.carrossel-seta:hover {
  background: var(--magma);
  border-color: var(--magma);
}

.carrossel-seta.anterior {
  left: 0.6rem;
}

.carrossel-seta.proximo {
  right: 0.6rem;
}

.carrossel-contador {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--raio-pilula);
  background: rgba(10, 13, 12, .6);
  color: #fff;
  font-family: var(--fonte-tecnica);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.carrossel-pontos {
  position: absolute;
  bottom: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.32rem;
}

.carrossel-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: background-color .15s ease, transform .15s ease;
}

.carrossel-ponto.ativo {
  background: #fff;
  transform: scale(1.2);
}

/* Sem hover real (toque), as setas ficam sempre visíveis */
@media (hover: none) {
  .carrossel-seta {
    opacity: 1;
  }
}

/* Bloco destacado dentro da publicação (via, anúncio, evento, notícia) */
.publicacao-cartao {
  margin: 0 1rem 0.85rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie-2);
  padding: 0.8rem 0.9rem;
  display: flex;
  gap: 0.85rem;
  align-items: center;
  color: inherit;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.publicacao-cartao:hover {
  border-color: var(--magma);
  background: var(--superficie-3);
  color: inherit;
}

.publicacao-cartao .corpo {
  min-width: 0;
  flex: 1;
}

.publicacao-cartao .titulo {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--tinta);
  display: block;
  line-height: 1.1;
}

.publicacao-cartao .apoio {
  font-size: 0.84rem;
  color: var(--tinta-fraca);
}

.publicacao-rodape {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--fio);
}

/* ---------------------------------------------------------------------
   8. Composer
   --------------------------------------------------------------------- */
.composer {
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-lg);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}

.composer-linha {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.composer textarea {
  border: 0;
  background: transparent;
  resize: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--tinta);
  min-height: 44px;
  width: 100%;
}

.composer textarea:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--tinta);
}

.composer textarea::placeholder {
  color: var(--tinta-fraca);
}

.composer-ferramentas {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--fio);
  flex-wrap: wrap;
}

.composer-atalho {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--raio-pilula);
  color: var(--tinta-suave);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.composer-atalho:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

.composer-atalho i {
  font-size: 1.05rem;
  color: var(--magma);
}

/* ---------------------------------------------------------------------
   9. Cartões
   --------------------------------------------------------------------- */
.card,
.cartao,
.painel {
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
}

.cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.cartao:hover {
  border-color: var(--fio-forte);
  transform: translateY(-2px);
}

.cartao-figura {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--breu-1000);
}

.cartao-figura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 9, 8, 0.75) 0%, rgba(6, 9, 8, 0) 55%);
  pointer-events: none;
}

.cartao-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.cartao:hover .cartao-figura img {
  transform: scale(1.06);
}

.cartao-figura .grau {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
}

.cartao-corpo {
  padding: 0.85rem 0.95rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
}

.cartao-titulo {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--tinta);
}

.cartao-titulo a {
  color: inherit;
}

.cartao-titulo a:hover {
  color: var(--magma);
}

.cartao-local {
  font-family: var(--fonte-tecnica);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cartao-rodape {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--fio);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--tinta-fraca);
}

.cartao-rodape .item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.preco {
  font-family: var(--fonte-tecnica);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--lima);
  font-variant-numeric: tabular-nums;
}

.preco-grande {
  font-size: 2.2rem;
}

.cartao-figura .croqui-tracado {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cartao-figura .croqui-tracado polyline,
.cartao-figura .croqui-tracado path {
  fill: none;
  stroke: var(--magma);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
}

/* ---------------------------------------------------------------------
   10. Selos
   --------------------------------------------------------------------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: var(--raio-pilula);
  color: var(--tinta-suave);
  background: var(--superficie-3);
  border: 1px solid transparent;
  white-space: nowrap;
}

.selo-ferro,
.selo-magma {
  color: var(--magma);
  background: var(--magma-fraco);
}

.selo-lima {
  color: var(--lima);
  background: var(--lima-fraco);
}

.selo-verde {
  color: var(--verde);
  background: var(--verde-fraco);
}

.selo-vermelho {
  color: var(--vermelho);
  background: var(--vermelho-fraco);
}

.selo-corda {
  color: var(--lima);
  background: var(--lima-fraco);
}

.selo-solido {
  color: var(--breu-950);
  background: var(--magma);
  font-weight: 700;
}

.selo-vidro {
  color: #fff;
  background: rgba(10, 14, 12, 0.65);
  backdrop-filter: blur(6px);
  border-color: var(--fio-forte);
}

.selo-aovivo::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lima);
  animation: pulso 1.8s ease-in-out infinite;
}

@keyframes pulso {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--lima-fraco);
  }

  50% {
    opacity: .45;
    transform: scale(.7);
    box-shadow: 0 0 0 5px transparent;
  }
}

/* ---------------------------------------------------------------------
   11. Navegação
   --------------------------------------------------------------------- */
.topo {
  background: rgba(10, 14, 12, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fio);
  position: sticky;
  top: 0;
  z-index: 1030;
}

[data-bs-theme='claro'] .topo {
  background: rgba(255, 255, 255, 0.9);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-tecnica);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1;
}

.marca:hover {
  color: var(--tinta);
}

.marca img {
  height: 32px;
  width: auto;
  display: block;
}

/* A marca acompanha o tema definido pela propria plataforma. */
.logo-tema {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.logo-tema > img {
  grid-area: 1 / 1;
}

.logo-tema-escuro {
  display: none !important;
}

[data-bs-theme="escuro"] .logo-tema-claro {
  display: none !important;
}

[data-bs-theme="escuro"] .logo-tema-escuro {
  display: block !important;
}

.marca .marca-3 {
  color: var(--magma);
}

.menu-principal {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.menu-link {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0.45rem 0.7rem;
  border-radius: var(--raio);
  position: relative;
  white-space: nowrap;
}

.menu-link:hover {
  color: var(--tinta);
}

.menu-link.active {
  color: var(--tinta);
}

.menu-link.active::after {
  content: '';
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0;
  height: 3px;
  background: var(--magma);
}

.contador-badge {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--raio-pilula);
  background: var(--magma);
  color: #fff;
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 17px;
  text-align: center;
}

.acao-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-pilula);
  color: var(--tinta-suave);
  border: 0;
  background: none;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.acao-icone:hover {
  color: var(--tinta);
  background: var(--superficie-3);
}

.acao-icone i {
  font-size: 1.2rem;
}

.barra-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  display: flex;
  background: rgba(10, 14, 12, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--fio);
  padding-bottom: env(safe-area-inset-bottom);
}

[data-bs-theme='claro'] .barra-mobile {
  background: rgba(255, 255, 255, 0.96);
}

.barra-mobile a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0.5rem 0.25rem 0.45rem;
  color: var(--tinta-fraca);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

.barra-mobile a i {
  font-size: 1.3rem;
}

.barra-mobile a.active {
  color: var(--magma);
}

@media (min-width: 992px) {
  .barra-mobile {
    display: none;
  }
}

@media (max-width: 991.98px) {
  body {
    padding-bottom: 64px;
  }
}

/* ---------------------------------------------------------------------
   12. Botões
   --------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--raio-pilula);
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.5rem 1.15rem;
  border-width: 1px;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-lg {
  font-size: 1.12rem;
  padding: 0.7rem 1.7rem;
}

.btn-sm {
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  letter-spacing: 0.07em;
}

.btn-primary {
  --bs-btn-bg: var(--magma);
  --bs-btn-border-color: var(--magma);
  --bs-btn-hover-bg: var(--magma-600);
  --bs-btn-hover-border-color: var(--magma-600);
  --bs-btn-active-bg: var(--magma-700);
  --bs-btn-active-border-color: var(--magma-700);
  --bs-btn-disabled-bg: var(--magma-700);
  --bs-btn-disabled-border-color: var(--magma-700);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-lima {
  --bs-btn-bg: var(--lima);
  --bs-btn-border-color: var(--lima);
  --bs-btn-hover-bg: var(--lima-600);
  --bs-btn-hover-border-color: var(--lima-600);
  --bs-btn-color: var(--breu-950);
  --bs-btn-hover-color: var(--breu-950);
}

.btn-escuro {
  --bs-btn-bg: var(--superficie-3);
  --bs-btn-border-color: var(--fio-forte);
  --bs-btn-hover-bg: var(--breu-700);
  --bs-btn-hover-border-color: var(--breu-600);
  --bs-btn-color: var(--tinta);
  --bs-btn-hover-color: #fff;
}

.btn-contorno,
.btn-outline-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--fio-forte);
  --bs-btn-color: var(--tinta);
  --bs-btn-hover-bg: var(--superficie-3);
  --bs-btn-hover-border-color: var(--tinta-fraca);
  --bs-btn-hover-color: var(--tinta);
  --bs-btn-active-bg: var(--superficie-3);
  --bs-btn-active-color: var(--tinta);
}

.btn-interacao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  border-radius: var(--raio-pilula);
  padding: 0.42rem 0.7rem;
  color: var(--tinta-fraca);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}

.btn-interacao:hover {
  color: var(--tinta);
  background: var(--superficie-3);
}

.btn-interacao i {
  font-size: 1.1rem;
}

.btn-interacao.curtido {
  color: var(--magma);
}

/* ---------------------------------------------------------------------
   13. Formulários
   --------------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--superficie-2);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  color: var(--tinta);
  font-size: 0.9375rem;
  padding: 0.55rem 0.8rem;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--superficie-2);
  border-color: var(--magma);
  color: var(--tinta);
  box-shadow: 0 0 0 3px var(--magma-fraco);
}

.form-control::placeholder {
  color: var(--tinta-fraca);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--superficie-3);
  color: var(--tinta-suave);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237C8B85' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--tinta-fraca);
  font-size: 0.82rem;
}

.form-check-input {
  border-color: var(--fio-forte);
  background-color: var(--superficie-2);
}

.form-check-input:checked {
  background-color: var(--magma);
  border-color: var(--magma);
}

.form-check-input:focus {
  border-color: var(--magma);
  box-shadow: 0 0 0 3px var(--magma-fraco);
}

.input-group-text {
  background: var(--superficie-3);
  border-color: var(--fio);
  color: var(--tinta-fraca);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
}

.is-invalid {
  border-color: var(--vermelho) !important;
}

.invalid-feedback {
  color: var(--vermelho);
  font-size: 0.82rem;
}

.opcoes-cartao {
  display: grid;
  gap: 0.6rem;
}

.opcao-cartao {
  display: block;
  position: relative;
  cursor: pointer;
}

.opcao-cartao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcao-cartao>.corpo {
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  padding: 0.8rem 0.95rem;
  background: var(--superficie-2);
  height: 100%;
  transition: border-color .14s ease, background-color .14s ease;
}

.opcao-cartao:hover>.corpo {
  border-color: var(--fio-forte);
}

.opcao-cartao input:checked+.corpo {
  border-color: var(--magma);
  background: var(--magma-fraco);
}

.opcao-cartao input:focus-visible+.corpo {
  outline: 2px solid var(--magma);
  outline-offset: 2px;
}

.opcao-cartao .titulo {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.opcao-cartao .apoio {
  font-size: 0.84rem;
  color: var(--tinta-fraca);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------
   14. Wizard de cadastro de via
   --------------------------------------------------------------------- */
.wizard {
  max-width: 1100px;
  margin-inline: auto;
}

.wizard-cabecalho {
  margin-bottom: 1.5rem;
}

.wizard-cabecalho h1 {
  margin: 0 0 0.4rem;
}

.wizard-cabecalho .apoio {
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: 0;
}

/* Trilha: bolinhas ligadas por uma linha que preenche conforme avança */
.wizard-trilha {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 1.5rem 0 2rem;
}

.wizard-trilha::before,
.wizard-trilha::after {
  content: '';
  position: absolute;
  top: 15px;
  height: 2px;
  left: calc(50% / var(--passos));
  right: calc(50% / var(--passos));
  background: var(--fio-forte);
  z-index: 0;
}

.wizard-trilha::after {
  right: auto;
  width: calc((100% - 100% / var(--passos)) * var(--progresso));
  background: var(--magma);
  transition: width .3s ease;
}

.wizard-passo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  color: var(--tinta-fraca);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0 0.25rem;
}

.wizard-passo .indice {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--superficie);
  border: 2px solid var(--fio-forte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.wizard-passo .rotulo {
  line-height: 1.15;
}

a.wizard-passo:hover {
  color: var(--tinta);
}

a.wizard-passo:hover .indice {
  border-color: var(--tinta-fraca);
}

.wizard-passo.concluido {
  color: var(--tinta-suave);
}

.wizard-passo.concluido .indice {
  background: var(--magma);
  border-color: var(--magma);
  color: #fff;
}

.wizard-passo.atual {
  color: var(--magma);
}

.wizard-passo.atual .indice {
  background: var(--magma);
  border-color: var(--magma);
  color: #fff;
  box-shadow: 0 0 0 5px var(--magma-fraco);
}

@media (max-width: 767.98px) {
  .wizard-passo .rotulo {
    display: none;
  }

  .wizard-passo.atual .rotulo {
    display: block;
    position: absolute;
    top: 40px;
    white-space: nowrap;
  }

  .wizard-trilha {
    margin-bottom: 3rem;
  }
}

/* Corpo em duas colunas: formulário e prévia */
.wizard-corpo {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 992px) {
  .wizard-corpo {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .wizard-corpo.largo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wizard-secao {
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  margin-bottom: 1.25rem;
}

.wizard-secao>header {
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--fio);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wizard-secao>header h2 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  flex: 1;
}

.wizard-secao>header i {
  color: var(--magma);
  font-size: 1.1rem;
}

.wizard-secao>.corpo {
  padding: 1.15rem;
}

/* Rodapé fixo de navegação */
.wizard-rodape {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  margin-top: 1.5rem;
  background: rgba(10, 14, 12, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
}

[data-bs-theme='claro'] .wizard-rodape {
  background: rgba(255, 255, 255, 0.93);
}

@media (max-width: 991.98px) {
  .wizard-rodape {
    bottom: 64px;
  }
}

.wizard-rodape .espaco {
  flex: 1;
}

/* Prévia ao vivo */
.wizard-previa {
  position: sticky;
  top: 84px;
}

.wizard-previa .rotulo-dado {
  display: block;
  margin-bottom: 0.5rem;
}

.wizard-previa-vazia {
  border: 1px dashed var(--fio-forte);
  border-radius: var(--raio-md);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 0.85rem;
}

/* Aviso de campo que não se aplica ao tipo escolhido */
.wizard-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--raio);
  background: var(--superficie-2);
  border-left: 3px solid var(--magma);
  font-size: 0.86rem;
  color: var(--tinta-suave);
}

.wizard-nota i {
  color: var(--magma);
  margin-top: 0.1rem;
}

.wizard-nota.sucesso {
  border-left-color: var(--lima);
}

.wizard-nota.sucesso i {
  color: var(--lima);
}

/* ---- Rack de equipamentos (etapa 5) ---------------------------------- */
.rack-busca {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.rack-busca>div {
  min-width: 0;
}

.rack-busca .btn {
  height: 38px;
}

.rack-sugestoes {
  position: absolute;
  z-index: 1080;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 264px;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  padding: 0.25rem;
}

.rack-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.rack-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--raio);
  background: var(--superficie-2);
  border-left: 3px solid var(--magma);
}

.rack-item .corpo {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.rack-item .nome {
  display: block;
  font-weight: 650;
  font-size: 0.94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rack-item .categoria {
  display: block;
  font-family: var(--fonte-tecnica);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.rack-item input {
  width: 128px;
  flex: none;
}

.rack-remover {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

.rack-remover:hover {
  background: var(--magma-fraco);
  color: var(--magma);
}

.rack-vazio {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 0.88rem;
  border: 1px dashed var(--fio);
  border-radius: var(--raio-md);
}

.rack-vazio i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  opacity: 0.6;
}

@media (max-width: 575.98px) {

  .rack-busca>div,
  .rack-busca .btn {
    width: 100%;
  }

  .rack-item input {
    width: 92px;
  }
}

/* ---------------------------------------------------------------------
   15. Hero com foto e corte diagonal
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--breu-1000);
  border-radius: var(--raio-lg);
  overflow: hidden;
  margin-bottom: 1.75rem;
  isolation: isolate;
}

.hero-figura {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.hero-figura > .logo-tema {
  width: 100%;
  height: 100%;
}

.hero-figura::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 9, 8, .95) 0%, rgba(6, 9, 8, .78) 45%, rgba(6, 9, 8, .35) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 46px);
}

.hero-conteudo {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 5vw, 4rem);
}

.hero h1 {
  color: #fff;
  max-width: 16ch;
}

.hero p {
  color: rgba(255, 255, 255, 0.76);
  max-width: 56ch;
}

/* Corte diagonal na base — a assinatura estrutural do tema */
.hero-diagonal {
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.hero-diagonal::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(28px, 5vw, 60px);
  background: var(--fundo);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
}

.hero-compacto .hero-conteudo {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.hero-compacto h1 {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
}

/* Trilha de navegação sobre o hero */
.trilha {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.75rem;
}

.trilha a {
  color: rgba(255, 255, 255, 0.55);
}

.trilha a:hover {
  color: var(--magma);
}

/* ---------------------------------------------------------------------
   16. Perfil e escaladores
   --------------------------------------------------------------------- */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--superficie-3);
}

.avatar-xs {
  width: 24px;
  height: 24px;
}

.avatar-sm {
  width: 34px;
  height: 34px;
}

.avatar-md {
  width: 46px;
  height: 46px;
}

.avatar-lg {
  width: 68px;
  height: 68px;
}

/* Capa do perfil, com o mesmo corte diagonal dos heros */
.perfil-topo {
  position: relative;
  margin-bottom: 1rem;
}

.perfil-capa-foto {
  position: relative;
  height: clamp(150px, 26vw, 280px);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  overflow: hidden;
  background: linear-gradient(150deg, var(--breu-750), var(--breu-1000));
}

.perfil-capa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}

.perfil-capa-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--fundo) 0%, rgba(6, 9, 8, 0.35) 55%, rgba(6, 9, 8, 0.1) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 46px);
}

.perfil-capa-foto::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(24px, 4vw, 46px);
  background: var(--fundo);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
}

.perfil-identidade {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(-64px, -9vw, -46px);
  padding: 0 0.25rem;
}

.perfil-avatar-caixa {
  position: relative;
  flex: 0 0 auto;
}

.perfil-foto {
  width: clamp(92px, 16vw, 136px);
  height: clamp(92px, 16vw, 136px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--fundo);
  background: var(--superficie-2);
  display: block;
  transition: filter .15s ease;
}

.perfil-avatar-caixa:hover .perfil-foto,
.perfil-avatar-caixa:focus-within .perfil-foto {
  filter: brightness(.72);
}

.perfil-presenca {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lima);
  border: 3px solid var(--fundo);
}

/* ---- Trocar foto: gatilho sobre o avatar --------------------------- */
.editor-foto-avatar {
  position: absolute;
  right: 0;
  bottom: 4px;
  z-index: 4;
}

.editor-foto-badge {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--fundo);
  background: var(--breu-800);
  color: #fff;
  font-size: 0.94rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

.editor-foto-badge:hover,
.editor-foto-badge:focus {
  background: var(--magma);
}

.perfil-avatar-caixa:hover .editor-foto-badge,
.perfil-avatar-caixa:focus-within .editor-foto-badge {
  opacity: 1;
  transform: scale(1);
}

/* ---- Trocar foto: gatilho sobre a capa ------------------------------ */
.editor-foto-capa {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(6, 9, 8, 0);
  transition: background-color .15s ease;
}

.perfil-capa-foto:hover .editor-foto-capa,
.perfil-capa-foto:focus-within .editor-foto-capa {
  background: rgba(6, 9, 8, .45);
}

.editor-foto-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--raio-pilula);
  background: rgba(10, 13, 12, .55);
  color: #fff;
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

.perfil-capa-foto:hover .editor-foto-botao,
.perfil-capa-foto:focus-within .editor-foto-botao,
.editor-foto-botao:focus {
  opacity: 1;
  transform: none;
}

.editor-foto-botao:hover {
  background: var(--magma);
  border-color: var(--magma);
}

/* Em telas sem "hover" real (toque), o gatilho fica sempre visível:
   exigir passar o mouse antes deixaria a função inacessível no celular,
   justamente o aparelho de onde a câmera é usada. */
@media (hover: none) {
  .editor-foto-badge {
    opacity: 1;
    transform: scale(1);
  }

  .editor-foto-capa {
    background: rgba(6, 9, 8, .32);
  }

  .editor-foto-botao {
    opacity: 1;
    transform: none;
  }
}

.perfil-nome-bloco {
  flex: 1 1 240px;
  min-width: 0;
  padding-bottom: 0.35rem;
}

.perfil-nome-bloco h1 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
}

.perfil-nick {
  font-family: var(--fonte-tecnica);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.perfil-acoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.35rem;
}

/* Faixa de números, clicável */
.perfil-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  overflow: hidden;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .perfil-numeros {
    grid-template-columns: repeat(6, 1fr);
  }
}

.perfil-numero {
  background: var(--superficie);
  padding: 0.7rem 0.5rem;
  text-align: center;
  color: var(--tinta);
  transition: background-color .14s ease;
}

.perfil-numero:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

.perfil-numero .numero-dado {
  font-size: 1.4rem;
  display: block;
}

.perfil-numero .rotulo-dado {
  font-size: 0.68rem;
}

.perfil-sobre {
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.perfil-bio {
  margin: 0 0 0.8rem;
  color: var(--tinta-suave);
  line-height: 1.6;
}

.perfil-bio:last-child {
  margin-bottom: 0;
}

/* Barra de abas — gruda no topo ao rolar */
.perfil-abas {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.35rem;
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-pilula);
  position: sticky;
  top: 72px;
  z-index: 20;
  margin-bottom: 1.5rem;
  scrollbar-width: none;
}

.perfil-abas::-webkit-scrollbar {
  display: none;
}

.perfil-aba {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}

.perfil-aba i {
  font-size: 1rem;
}

.perfil-aba:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

.perfil-aba.ativa {
  background: var(--magma);
  color: #fff;
}

.perfil-aba .conta {
  opacity: .7;
  font-size: 0.85em;
}

.perfil-aba.ativa .conta {
  opacity: .85;
}

@media (max-width: 575.98px) {
  .perfil-aba span:not(.conta) {
    display: none;
  }

  .perfil-aba {
    padding: 0.5rem 0.7rem;
  }

  .perfil-aba.ativa span:not(.conta) {
    display: inline;
  }
}

.perfil-secoes {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Troca de aba: some por um instante em vez de piscar */
[data-perfil-conteudo] {
  transition: opacity .16s ease;
}

[data-perfil-conteudo][aria-busy='true'] {
  opacity: .45;
  pointer-events: none;
}

/* Cartão de escalador (diretório de escaladores) */
.cartao-pessoa {
  position: relative;
  display: block;
  border-radius: var(--raio-md);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--fio);
  transition: border-color .16s ease, transform .16s ease;
  height: 100%;
}

.cartao-pessoa:hover {
  border-color: var(--magma);
  transform: translateY(-3px);
}

.cartao-pessoa .foto {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--breu-1000);
  position: relative;
}

.cartao-pessoa .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.cartao-pessoa:hover .foto img {
  transform: scale(1.05);
}

.cartao-pessoa .foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 9, 8, .92) 0%, rgba(6, 9, 8, .15) 55%, transparent 100%);
}

.cartao-pessoa .identidade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem;
  z-index: 1;
}

.cartao-pessoa .nome {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.08;
  display: block;
}

.cartao-pessoa .funcao {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magma);
}

.cartao-pessoa .numeros {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.5rem;
  font-family: var(--fonte-tecnica);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.72);
}

.cartao-pessoa .numeros b {
  color: #fff;
  font-weight: 700;
}

/* Abas */
.abas {
  display: flex;
  border-bottom: 1px solid var(--fio);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.abas a {
  padding: 0.65rem 0.95rem;
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.abas a:hover {
  color: var(--tinta);
}

.abas a.active {
  color: var(--tinta);
  border-bottom-color: var(--magma);
}

.abas a .conta {
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------------
   17. Galeria
   --------------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

@media (min-width: 768px) {
  .galeria { gap: 6px; }
  .galeria-colunas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria-colunas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galeria-colunas-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.galeria-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--breu-1000);
  display: block;
  border-radius: var(--raio);
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2, .6, .2, 1);
}

.galeria-item:hover img {
  transform: scale(1.07);
}

.galeria-video-thumb,
.galeria-midia-indisponivel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--tinta);
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 92, 26, .34), transparent 34%),
    linear-gradient(145deg, var(--breu-900), var(--breu-1000));
}

.galeria-video-thumb > i {
  color: var(--magma);
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .4));
  transition: transform .2s ease;
}

.galeria-video-thumb > span,
.galeria-midia-indisponivel > span {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.galeria-item:hover .galeria-video-thumb > i {
  transform: scale(1.08);
}

.galeria-item-indisponivel {
  cursor: pointer;
}

.galeria-midia-indisponivel {
  color: var(--tinta-fraca);
  background: repeating-linear-gradient(135deg, var(--breu-900) 0 12px, var(--breu-1000) 12px 24px);
  text-align: center;
  padding: 1rem;
}

.galeria-midia-indisponivel > i {
  font-size: 2.25rem;
}

.galeria-item .sobreposicao {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 9, 8, .9), rgba(6, 9, 8, 0) 55%);
  opacity: 0;
  transition: opacity .2s ease;
  display: flex;
  align-items: flex-end;
  padding: 0.6rem;
  color: #fff;
  font-size: 0.83rem;
  line-height: 1.35;
}

.galeria-item:hover .sobreposicao,
.galeria-item:focus-visible .sobreposicao {
  opacity: 1;
}

.galeria-item .marca-video {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  color: #fff;
  background: rgba(6, 9, 8, 0.7);
  border-radius: var(--raio-pilula);
  padding: 0.1rem 0.45rem;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------
   17b. Visualizador de foto/vídeo (modal no idioma visual da plataforma)
   --------------------------------------------------------------------- */
.visor-dialog {
  max-width: 1120px;
  height: 88vh;
  margin: 6vh auto;
}

.visor-midia-indisponivel {
  width: min(420px, 84%);
  margin: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  color: var(--tinta-fraca);
  text-align: center;
}

.visor-midia-indisponivel > i {
  color: var(--magma);
  font-size: 3.5rem;
}

.visor-midia-indisponivel > strong {
  color: var(--tinta);
  font-family: var(--fonte-tecnica);
  font-size: 1.4rem;
  text-transform: uppercase;
}

.visor-conteudo {
  height: 100%;
  flex-direction: row;
  background: var(--superficie);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.visor-midia-area {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--breu-1000);
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor-midia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor-midia img,
.visor-midia video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Botões flutuantes sobre a foto: fechar e setas usam o mesmo idioma
   visual das outras camadas de controle sobre imagem (croqui, carrossel) */
.visor-controle {
  position: absolute;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fio-forte);
  border-radius: 50%;
  background: rgba(6, 9, 8, .6);
  color: #fff;
  transition: background-color .14s ease, border-color .14s ease;
}

.visor-controle:hover {
  background: var(--magma);
  border-color: var(--magma);
}

.visor-fechar {
  top: 0.75rem;
  right: 0.75rem;
}

.visor-seta {
  top: 50%;
  transform: translateY(-50%);
}

.visor-seta.anterior {
  left: 0.85rem;
}

.visor-seta.proximo {
  right: 0.85rem;
}

.visor-lateral {
  flex: 0 0 380px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-left: 1px solid var(--fio);
  min-height: 0;
}

/* O cabeçalho é o mesmo `publicacao-topo` do cartão do feed — mesma
   informação (quem publicou, há quanto tempo), mesma cara */
.visor-cabecalho {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--magma), transparent 65%) 1;
}

.visor-cabecalho .contexto span[data-visor-autor-slug] {
  color: var(--tinta-suave);
}

.visor-acoes-dono {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--fio);
}

.visor-acoes-dono[hidden],
.visor-painel-dono[hidden] {
  display: none;
}

.visor-acao-dono {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  background: var(--superficie);
  color: var(--tinta-suave);
  font-family: var(--fonte-tecnica);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .035em;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.visor-acao-dono i {
  color: var(--magma);
  font-size: 1.05rem;
}

.visor-acao-dono:hover,
.visor-acao-dono:focus-visible,
.visor-acao-dono[aria-expanded="true"] {
  color: var(--tinta);
  border-color: var(--magma);
  background: var(--magma-fraco);
}

.visor-acao-dono.perigo {
  padding-inline: .8rem;
}

.visor-acao-dono.perigo i,
.visor-acao-dono.perigo:hover,
.visor-acao-dono.perigo:focus-visible,
.visor-acao-dono.perigo[aria-expanded="true"] {
  color: var(--vermelho);
  border-color: rgba(242, 85, 90, .45);
  background: var(--vermelho-fraco);
}

.visor-painel-dono {
  flex: 0 0 auto;
  padding: .85rem 1rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--fio-forte);
  box-shadow: inset 3px 0 0 var(--magma);
}

.visor-painel-dono-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.visor-painel-dono-topo label,
.visor-excluir-confirmacao strong {
  color: var(--tinta);
  font-family: var(--fonte-tecnica);
  font-size: .9rem;
  font-weight: 700;
}

.visor-painel-dono-topo > span {
  color: var(--tinta-fraca);
  font-size: .75rem;
}

.visor-painel-dono textarea {
  width: 100%;
  min-height: 94px;
  max-height: 180px;
  resize: vertical;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  padding: .7rem .8rem;
  outline: 0;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
}

.visor-painel-dono textarea:focus {
  border-color: var(--magma);
  box-shadow: 0 0 0 3px var(--magma-fraco);
}

.visor-painel-dono-botoes {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .65rem;
}

.visor-excluir-confirmacao {
  box-shadow: inset 3px 0 0 var(--vermelho);
}

.visor-excluir-confirmacao > div:first-child {
  display: grid;
  gap: .2rem;
}

.visor-excluir-confirmacao > div:first-child span {
  color: var(--tinta-suave);
  font-size: .82rem;
  line-height: 1.45;
}

.visor-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1rem;
  min-height: 0;
}

.visor-legenda-publicacao {
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--fio-forte);
}

.visor-legenda-publicacao p {
  margin: 0;
  color: var(--tinta);
  font-size: .96rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.visor-legenda-vazia {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px dashed var(--fio-forte);
  border-radius: var(--raio-md);
  padding: .7rem .8rem;
  background: var(--superficie-2);
  color: var(--tinta-fraca);
  text-align: left;
}

.visor-legenda-vazia[hidden] {
  display: none;
}

.visor-legenda-vazia > i {
  color: var(--magma);
  font-size: 1.3rem;
}

.visor-legenda-vazia > span {
  display: grid;
  font-size: .8rem;
}

.visor-legenda-vazia strong {
  color: var(--tinta);
  font-size: .88rem;
}

.visor-legenda-vazia:hover,
.visor-legenda-vazia:focus-visible {
  border-color: var(--magma);
  background: var(--magma-fraco);
}

.visor-comentarios-secao {
  padding-top: .9rem;
}

.visor-comentarios-cabecalho {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .35rem;
}

.visor-comentarios-cabecalho h3 {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fonte-tecnica);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.visor-comentarios-cabecalho span {
  color: var(--tinta-fraca);
  font-size: .76rem;
}

.visor-rodape {
  flex: 0 0 auto;
  border-top: 1px solid var(--fio);
  padding: 0.85rem 1rem;
}

.visor-acoes {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}

.visor-acoes .btn-interacao {
  padding: 0.3rem;
}

.visor-acoes .btn-interacao i {
  font-size: 1.4rem;
}

.visor-acoes .btn-interacao.curtido i {
  color: var(--magma);
}

.visor-curtidas {
  margin-bottom: 0.65rem;
}

.visor-curtidas-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pilha de avatares de quem curtiu, como um selo de "prova social" */
.visor-curtidas-pilha {
  display: flex;
  flex-shrink: 0;
}

.visor-curtidas-pilha .avatar {
  border: 2px solid var(--superficie);
  margin-left: -10px;
}

.visor-curtidas-pilha .avatar:first-child {
  margin-left: 0;
}

.visor-curtidas-resumo {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  cursor: pointer;
  text-align: left;
}

.visor-curtidas-resumo strong {
  color: var(--tinta);
  font-weight: 650;
}

.visor-curtidas-lista {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.5rem;
  max-height: 160px;
  overflow-y: auto;
}

.visor-curtidas-lista a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinta-suave);
  font-size: 0.85rem;
}

.visor-curtidas-lista a:hover {
  color: var(--tinta);
}

/* Campo de comentário no formato pílula, como os demais campos de busca
   e filtro da plataforma */
.visor-form-comentario {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--superficie-2);
  border: 1px solid var(--fio);
  border-radius: var(--raio-pilula);
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  transition: border-color .14s ease;
}

.visor-form-comentario:focus-within {
  border-color: var(--magma);
}

.visor-form-comentario input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 0.88rem;
  color: var(--tinta);
  outline: none;
}

.visor-form-comentario input::placeholder {
  color: var(--tinta-fraca);
}

.visor-form-comentario button {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--raio-pilula);
  padding: 0.4rem 0.9rem;
  background: var(--magma);
  color: #fff;
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color .14s ease;
}

.visor-form-comentario button:hover:not(:disabled) {
  background: var(--magma-600);
}

.visor-form-comentario button:disabled {
  background: none;
  color: var(--tinta-fraca);
  cursor: default;
}

.visor-comentario-vazio {
  padding: 1.2rem 0;
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 0.88rem;
}

@media (max-width: 991.98px) {
  .visor-dialog {
    height: 100vh;
    margin: 0;
    max-width: 100%;
  }

  .visor-conteudo {
    flex-direction: column;
    border-radius: 0;
    border-width: 0;
  }

  .visor-midia-area {
    flex: 0 1 46vh;
  }

  .visor-lateral {
    flex: 1 1 auto;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--fio);
  }
}

@media (max-width: 575.98px) {
  .visor-acoes-dono {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: .75rem;
  }

  .visor-acao-dono.perigo {
    padding-inline: .5rem;
  }

  .visor-painel-dono {
    padding: .75rem;
  }

  .visor-painel-dono-botoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visor-painel-dono-botoes .btn {
    min-height: 42px;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------
   18. Chat
   --------------------------------------------------------------------- */
.chat-painel {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  border: 1px solid var(--fio);
  border-radius: var(--raio-lg);
  background: var(--superficie);
  overflow: hidden;
  height: calc(100vh - 190px);
  min-height: 470px;
}

@media (max-width: 767.98px) {
  .chat-painel {
    grid-template-columns: 1fr;
    height: calc(100vh - 150px);
  }

  .chat-painel.mostrando-conversa .chat-lista {
    display: none;
  }

  .chat-painel:not(.mostrando-conversa) .chat-conversa {
    display: none;
  }
}

.chat-lista {
  border-right: 1px solid var(--fio);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-lista-topo {
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--fio);
  flex: 0 0 auto;
}

.chat-lista-itens {
  overflow-y: auto;
  flex: 1 1 auto;
}

.chat-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--fio);
  color: var(--tinta);
  align-items: center;
}

.chat-item:hover {
  background: var(--superficie-2);
  color: var(--tinta);
}

.chat-item.ativo {
  background: var(--magma-fraco);
  box-shadow: inset 3px 0 0 var(--magma);
}

.chat-item .conteudo {
  min-width: 0;
  flex: 1;
}

.chat-item .nome {
  font-weight: 650;
  font-size: 0.93rem;
}

.chat-item .previa {
  font-size: 0.84rem;
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item .quando {
  font-family: var(--fonte-tecnica);
  font-size: 0.76rem;
  color: var(--tinta-fraca);
  flex: 0 0 auto;
}

.chat-conversa {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-cabecalho {
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--fio);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.chat-mensagens {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.1rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--fundo);
}

.chat-balao {
  max-width: min(74%, 540px);
  padding: 0.55rem 0.8rem;
  border-radius: var(--raio-lg);
  border: 1px solid var(--fio);
  background: var(--superficie-2);
  font-size: 0.93rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-balao.meu {
  align-self: flex-end;
  background: var(--magma);
  border-color: var(--magma);
  color: #fff;
}

.chat-balao.meu a {
  color: #fff;
  text-decoration: underline;
}

.chat-balao .hora {
  display: block;
  font-family: var(--fonte-tecnica);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
  margin-top: 0.18rem;
  text-align: right;
}

.chat-balao.meu .hora {
  color: rgba(255, 255, 255, 0.75);
}

.chat-balao img.anexo {
  border-radius: var(--raio);
  margin-bottom: 0.35rem;
  display: block;
  max-height: 300px;
  width: auto;
}

.chat-dia {
  align-self: center;
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: var(--superficie-2);
  border-radius: var(--raio-pilula);
  padding: 0.18rem 0.7rem;
  margin: 0.45rem 0;
}

.chat-envio {
  flex: 0 0 auto;
  border-top: 1px solid var(--fio);
  padding: 0.65rem 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  background: var(--superficie);
}

.chat-envio textarea {
  resize: none;
  max-height: 130px;
  min-height: 42px;
  border-radius: var(--raio-lg);
}

/* ---------------------------------------------------------------------
   19. Mapa
   --------------------------------------------------------------------- */
.mapa {
  height: 440px;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  z-index: 1;
}

.mapa-alto {
  height: calc(100vh - 220px);
  min-height: 440px;
}

.mapa-baixo {
  height: 260px;
}

.leaflet-container {
  font-family: var(--fonte-corpo);
  background: var(--breu-900);
}

/* Resultados da busca de endereço */
.lista-lugares {
  padding: 0.25rem;
  max-height: 300px;
  overflow-y: auto;
}

.lugar-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
}

.lugar-item:hover {
  background: var(--magma-fraco);
}

.lugar-item .principal {
  display: block;
  font-weight: 650;
  font-size: 0.92rem;
}

.lugar-item .apoio {
  display: block;
  font-family: var(--fonte-tecnica);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* Escurece os tiles para casar com o tema noturno */
.leaflet-tile-pane {
  filter: brightness(0.72) saturate(0.72) contrast(1.06) hue-rotate(-8deg);
}

[data-bs-theme='claro'] .leaflet-tile-pane {
  filter: none;
}

.leaflet-popup-content-wrapper {
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
}

.leaflet-popup-tip {
  background: var(--superficie);
}

.leaflet-popup-content {
  margin: 0.8rem 0.95rem;
  font-size: 0.88rem;
}

.leaflet-popup-content .titulo {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
  color: var(--tinta);
}

.leaflet-popup-close-button {
  color: var(--tinta-fraca) !important;
}

.leaflet-bar a {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--fio);
}

.leaflet-bar a:hover {
  background: var(--superficie-3);
  color: var(--magma);
}

.leaflet-control-attribution {
  background: rgba(10, 14, 12, .7) !important;
  color: var(--tinta-fraca);
}

.leaflet-control-attribution a {
  color: var(--tinta-suave);
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgba(255, 92, 26, 0.25);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--magma);
  color: #fff;
  font-family: var(--fonte-tecnica);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   20. Editor de croqui
   --------------------------------------------------------------------- */
.croqui-editor {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  overflow: hidden;
  background: var(--breu-1000);
  line-height: 0;
}

.croqui-editor img {
  display: block;
  max-width: 100%;
  height: auto;
}

.croqui-editor canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.croqui-ferramentas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie-2);
}

.croqui-ferramentas .grupo {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.croqui-separador {
  width: 1px;
  height: 26px;
  background: var(--fio-forte);
  flex: 0 0 auto;
}

.croqui-ferramenta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--raio);
  border: 1px solid transparent;
  background: var(--superficie);
  color: var(--tinta-suave);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.croqui-ferramenta i {
  font-size: 0.95rem;
}

.croqui-ferramenta:hover {
  color: var(--tinta);
  border-color: var(--fio-forte);
}

.btn-check:checked+.croqui-ferramenta {
  background: var(--magma);
  border-color: var(--magma);
  color: #fff;
}

.btn-check:focus-visible+.croqui-ferramenta {
  outline: 2px solid var(--magma);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .croqui-ferramenta span {
    display: none;
  }

  .croqui-ferramenta {
    padding: 0.45rem 0.55rem;
  }
}

/* Cores do traçado */
.croqui-cor {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cor);
  border: 2px solid var(--fio-forte);
  cursor: pointer;
  display: inline-block;
  transition: transform .14s ease, box-shadow .14s ease;
}

.croqui-cor:hover {
  transform: scale(1.1);
}

.btn-check:checked+.croqui-cor {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px var(--cor);
}

.btn-check:focus-visible+.croqui-cor {
  outline: 2px solid var(--magma);
  outline-offset: 3px;
}

.croqui-visor {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.croqui-visor img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--raio-md);
}

.croqui-visor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   21. Blocos auxiliares
   --------------------------------------------------------------------- */
.painel-corpo {
  padding: 1.05rem 1.15rem;
}

.painel-topo {
  padding: 0.8rem 1.15rem;
  border-bottom: 1px solid var(--fio);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.painel-topo h2,
.painel-topo h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.09em;
}

.ficha {
  border-top: 1px solid var(--fio);
}

.ficha .linha {
  display: flex;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--fio);
  align-items: baseline;
}

.ficha .rotulo {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  flex: 0 0 42%;
  max-width: 200px;
}

.ficha .valor {
  flex: 1;
  font-size: 0.93rem;
}

.vazio {
  text-align: center;
  padding: 3rem 1.25rem;
  border: 1px dashed var(--fio-forte);
  border-radius: var(--raio-md);
  background: var(--superficie);
  color: var(--tinta-suave);
}

.vazio i {
  font-size: 2.2rem;
  color: var(--tinta-fraca);
  display: block;
  margin-bottom: 0.7rem;
}

.vazio .titulo {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--tinta);
}

.alert {
  border-radius: var(--raio-md);
  border: 1px solid var(--fio);
  border-left: 3px solid var(--tinta-fraca);
  font-size: 0.92rem;
  padding: 0.8rem 1rem;
  background: var(--superficie-2);
  color: var(--tinta-suave);
}

.alert-sucesso {
  border-left-color: var(--verde);
  background: var(--verde-fraco);
  color: var(--verde);
}

.alert-erro {
  border-left-color: var(--vermelho);
  background: var(--vermelho-fraco);
  color: var(--vermelho);
}

.alert-aviso {
  border-left-color: var(--lima);
  background: var(--lima-fraco);
  color: var(--lima);
}

.alert-info {
  border-left-color: var(--magma);
  background: var(--magma-fraco);
  color: var(--magma-400);
}

[data-bs-theme='claro'] .alert-info {
  color: var(--magma-700);
}

.filtros {
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  padding: 0.95rem;
}

.filtro-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filtro-pilula {
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--raio-pilula);
  color: var(--tinta-suave);
  background: var(--superficie-3);
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}

.filtro-pilula:hover {
  background: var(--breu-700);
  color: var(--tinta);
}

.filtro-pilula.ativo {
  background: var(--magma);
  color: #fff;
}

.paginacao {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  flex-wrap: wrap;
}

.paginacao a,
.paginacao span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.55rem;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  background: var(--superficie-2);
}

.paginacao a:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

.paginacao .atual {
  background: var(--magma);
  color: #fff;
}

.paginacao .desabilitado {
  opacity: 0.35;
  pointer-events: none;
}

.comentario {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--fio);
}

.comentario:last-child {
  border-bottom: 0;
}

.comentario:target,
.comentario.comentario-destacado {
  background: var(--magma-fraco);
  border-radius: var(--raio);
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
}

.comentario .corpo {
  flex: 1;
  min-width: 0;
}

.comentario .autor {
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--tinta);
}

.comentario .quando {
  font-family: var(--fonte-tecnica);
  font-size: 0.79rem;
  color: var(--tinta-fraca);
}

.comentario .texto {
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0.2rem 0 0.3rem;
  color: var(--tinta-suave);
}

.comentario .respostas {
  margin-top: 0.7rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--fio);
}

/* Notícia */
.noticia-corpo {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tinta-suave);
}

.noticia-corpo p {
  margin-bottom: 1.15rem;
}

.noticia-corpo p:first-of-type {
  font-size: 1.18rem;
  color: var(--tinta);
}

.noticia-destaque .cartao-figura {
  aspect-ratio: 16 / 9;
}

@media (min-width: 992px) {
  .noticia-destaque {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
  }

  .noticia-destaque .cartao-figura {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }
}

.rodape {
  border-top: 1px solid var(--fio);
  background: var(--superficie);
  margin-top: 3.5rem;
  padding: 2.5rem 0 1.75rem;
}

.rodape h4 {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 0.7rem;
}

.rodape a {
  color: var(--tinta-suave);
  font-size: 0.91rem;
  display: block;
  padding: 0.18rem 0;
}

.rodape a:hover {
  color: var(--magma);
}

.dropdown-menu {
  background: var(--superficie);
  border-color: var(--fio-forte);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  font-size: 0.92rem;
  padding: 0.35rem;
  --bs-dropdown-link-color: var(--tinta-suave);
  --bs-dropdown-link-hover-color: var(--tinta);
  --bs-dropdown-link-hover-bg: var(--superficie-3);
  --bs-dropdown-link-active-bg: var(--magma);
  --bs-dropdown-link-active-color: #fff;
}

.dropdown-item {
  border-radius: var(--raio);
  padding: 0.48rem 0.65rem;
}

.dropdown-header {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.dropdown-divider {
  border-color: var(--fio);
}

.modal-content {
  background: var(--superficie);
  border-color: var(--fio-forte);
  border-radius: var(--raio-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--fio);
}

.btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

[data-bs-theme='claro'] .btn-close {
  filter: none;
}

/* ---- Recorte de foto (perfil e capa) --------------------------------- */
.cropper-area {
  position: relative;
  margin: 0 auto;
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--raio-md);
  background: var(--breu-950);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.cropper-area:active {
  cursor: grabbing;
}

.cropper-area.circular {
  border-radius: 50%;
}

.cropper-area.retangular {
  width: min(560px, 100%);
  aspect-ratio: 16 / 5;
  border-radius: var(--raio-md);
}

.cropper-area canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cropper-controles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 420px;
  margin: 1rem auto 0.5rem;
  color: var(--tinta-fraca);
}

.cropper-controles .form-range {
  flex: 1;
}

.offcanvas {
  background: var(--superficie);
  color: var(--tinta);
}

.offcanvas-header {
  border-bottom: 1px solid var(--fio);
}

.table {
  --bs-table-border-color: var(--fio);
  --bs-table-color: var(--tinta);
  --bs-table-bg: transparent;
  font-size: 0.91rem;
}

.table>thead th {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom-width: 1px;
  white-space: nowrap;
}

.table-hover>tbody>tr:hover>* {
  --bs-table-accent-bg: var(--superficie-2);
  color: var(--tinta);
}

.progress {
  background: var(--superficie-3);
  border-radius: var(--raio-pilula);
  height: 7px;
}

.progress-bar {
  background: var(--magma);
}

.collapse .painel-corpo {
  background: var(--superficie-2);
}

/* ---------------------------------------------------------------------
   22. Envio de arquivos (FilePond)
   --------------------------------------------------------------------- */
.filepond--root {
  font-family: var(--fonte-corpo);
  margin-bottom: 0;
}

.filepond--panel-root {
  background: var(--superficie-2);
  border: 1px dashed var(--fio-forte);
  border-radius: var(--raio-md);
  transition: border-color .16s ease, background-color .16s ease;
}

.filepond--root:hover .filepond--panel-root,
.filepond--root.filepond--drop-label-hover .filepond--panel-root {
  border-color: var(--magma);
  background: var(--magma-fraco);
}

.filepond--drop-label {
  color: var(--tinta-suave);
  min-height: 108px;
}

.filepond--drop-label label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1rem;
  cursor: pointer;
}

.filepond--icone {
  font-size: 1.8rem;
  color: var(--magma);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.filepond--principal {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
}

.filepond--apoio {
  font-size: 0.85rem;
  color: var(--tinta-fraca);
}

.filepond--label-action {
  color: var(--magma);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.filepond--item-panel {
  background: var(--breu-700);
  border-radius: var(--raio);
}

.filepond--file {
  color: #fff;
}

.filepond--file-info-main {
  font-weight: 600;
}

.filepond--file-info-sub {
  opacity: .7;
}

.filepond--file-action-button {
  background: rgba(6, 9, 8, 0.7);
  color: #fff;
  cursor: pointer;
}

.filepond--file-action-button:hover {
  background: var(--magma);
}

.filepond--file-action-button:focus-visible {
  box-shadow: 0 0 0 2px var(--magma);
}

.filepond--image-preview-overlay-idle {
  color: rgba(6, 9, 8, 0.6);
}

.filepond--image-preview-overlay-success {
  color: var(--verde);
}

.filepond--image-preview-overlay-failure {
  color: var(--vermelho);
}

.filepond--image-preview {
  background: var(--breu-1000);
}

.filepond--credits {
  display: none;
}

/* Avatar redondo */
.filepond--root[data-style-panel-layout~='circle'] {
  width: 168px;
  margin-inline: auto;
}

.filepond--root[data-style-panel-layout~='circle'] .filepond--drop-label {
  min-height: 0;
}

.filepond--root[data-style-panel-layout~='circle'] .filepond--principal {
  font-size: 0.95rem;
}

.filepond--root[data-style-panel-layout~='circle'] .filepond--apoio {
  font-size: 0.76rem;
}

/* Capa integrada */
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
  min-height: 0;
}

[data-bs-theme='claro'] .filepond--item-panel {
  background: var(--breu-500);
}

/* ---------------------------------------------------------------------
   23. Citações (@pessoa, /via, #pico e &evento)
   --------------------------------------------------------------------- */
.citacao {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.06em 0.34em;
  border-radius: var(--raio);
  font-weight: 600;
  line-height: inherit;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline;
}

.citacao-pessoa {
  color: var(--magma);
  background: var(--magma-fraco);
}

.citacao-pessoa:hover {
  color: #fff;
  background: var(--magma);
}

.citacao-via {
  color: var(--lima);
  background: var(--lima-fraco);
}

.citacao-via:hover {
  color: var(--breu-950);
  background: var(--lima);
}

.citacao-via i {
  font-size: 0.9em;
  opacity: 0.8;
}

.citacao-pico {
  color: var(--verde);
  background: var(--verde-fraco);
}

.citacao-pico:hover {
  color: #fff;
  background: var(--verde);
}

.citacao-evento {
  color: var(--vermelho);
  background: var(--vermelho-fraco);
}

.citacao-evento:hover {
  color: #fff;
  background: var(--vermelho);
}

.citacao-pico i,
.citacao-evento i {
  font-size: .86em;
  opacity: .85;
}

.citacao-grau {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.88em;
  opacity: 0.75;
}

/* Dentro do balão do chat que já é laranja, a citação precisa contrastar */
.chat-balao.meu .citacao-pessoa {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.chat-balao.meu .citacao-via {
  color: var(--breu-950);
  background: var(--lima);
}

.chat-balao.meu .citacao-pico,
.chat-balao.meu .citacao-evento {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

/* Lista de autocompletar */
.mencoes-lista {
  position: absolute;
  z-index: 1080;
  max-height: 296px;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  padding: 0.25rem;
}

.mencoes-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

.mencoes-item:hover,
.mencoes-item.ativo {
  background: var(--magma-fraco);
}

.mencoes-item.ativo {
  box-shadow: inset 2px 0 0 var(--magma);
}

.mencoes-item .corpo {
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.mencoes-item .principal {
  display: block;
  font-weight: 650;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mencoes-item .apoio {
  display: block;
  font-size: 0.78rem;
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mencoes-icone {
  width: 34px;
  height: 34px;
  border-radius: var(--raio);
  background: var(--lima-fraco);
  color: var(--lima);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mencoes-icone.pico {
  color: var(--verde);
  background: var(--verde-fraco);
}

.mencoes-icone.evento {
  color: var(--vermelho);
  background: var(--vermelho-fraco);
}

.mencoes-grau {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--magma);
  background: var(--magma-fraco);
  padding: 0.1rem 0.35rem;
  border-radius: var(--raio);
  flex: 0 0 auto;
}

.mencoes-vazio {
  padding: 0.7rem 0.6rem;
  font-size: 0.85rem;
  color: var(--tinta-fraca);
}

/* Dica de atalho embaixo dos campos que aceitam citação */
.dica-citacao {
  font-size: 0.78rem;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.dica-citacao kbd {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--superficie-3);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio);
  padding: 0 0.3rem;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------
   24. Chat flutuante
   --------------------------------------------------------------------- */
.chat-doca {
  position: fixed;
  right: 1rem;
  bottom: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;
}

.chat-doca>* {
  pointer-events: auto;
}

@media (max-width: 991.98px) {
  .chat-doca {
    bottom: 62px;
    right: 0.5rem;
  }
}

/* Botão fixo */
.chat-lancador {
  position: relative;
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border: 0;
  border-radius: 50%;
  background: var(--magma);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease;
  flex: 0 0 auto;
}

.chat-lancador:hover {
  background: var(--magma-600);
  transform: translateY(-2px);
}

.chat-lancador .contador-badge {
  top: 0;
  right: 0;
  border: 2px solid var(--fundo);
}

/* Janela */
.chat-janela {
  width: 320px;
  height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--fio-forte);
  border-bottom: 0;
  border-radius: var(--raio-md) var(--raio-md) 0 0;
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: subir-janela .22s cubic-bezier(.2, .8, .3, 1);
}

@keyframes subir-janela {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.chat-janela.minimizada {
  height: auto;
}

.chat-janela.minimizada .chat-janela-mensagens,
.chat-janela.minimizada .chat-janela-envio {
  display: none;
}

.chat-janela.chamando {
  animation: chamar .5s ease 2;
}

@keyframes chamar {

  0%,
  100% {
    transform: none;
  }

  25% {
    transform: translateY(-5px);
  }

  75% {
    transform: translateY(2px);
  }
}

@media (max-width: 575.98px) {
  .chat-doca {
    left: 0.5rem;
    right: 0.5rem;
  }

  .chat-janela {
    width: 100%;
    height: min(70vh, 440px);
  }

  /* No celular só faz sentido uma janela por vez */
  .chat-janela:not(:first-of-type) {
    display: none;
  }
}

.chat-janela-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--superficie-3);
  border-bottom: 1px solid var(--fio);
  cursor: pointer;
  flex: 0 0 auto;
}

.chat-janela-topo .identidade {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  color: var(--tinta);
}

.chat-janela-topo .textos {
  min-width: 0;
  line-height: 1.2;
}

.chat-janela-topo .nome {
  display: block;
  font-weight: 650;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-janela-topo .estado {
  display: block;
  font-size: 0.74rem;
  color: var(--tinta-fraca);
}

.chat-janela-topo .estado.online {
  color: var(--lima);
}

.chat-janela-topo .estado.online::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lima);
  margin-right: 0.3rem;
  vertical-align: middle;
}

.chat-janela-acao {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 0.82rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.chat-janela-acao:hover {
  background: var(--breu-700);
  color: var(--tinta);
}

.chat-janela-badge {
  min-width: 20px;
  padding: 0 0.35rem;
  border-radius: var(--raio-pilula);
  background: var(--magma);
  color: #fff;
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 20px;
  text-align: center;
  flex: 0 0 auto;
}

.chat-janela-mensagens {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--fundo);
}

.chat-janela-mensagens .chat-balao {
  max-width: 84%;
  font-size: 0.88rem;
  padding: 0.45rem 0.65rem;
}

.chat-janela-mensagens .chat-balao img.anexo {
  max-height: 170px;
}

.chat-janela-envio {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0.5rem;
  border-top: 1px solid var(--fio);
  background: var(--superficie);
}

.chat-janela-envio textarea {
  resize: none;
  min-height: 36px;
  max-height: 90px;
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
  border-radius: var(--raio-lg);
}

.chat-janela-anexo {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--tinta-fraca);
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
}

.chat-janela-anexo:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

.chat-janela-anexo.tem-anexo {
  color: var(--magma);
  background: var(--magma-fraco);
}

.chat-janela-envio .btn {
  flex: 0 0 auto;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
}

/* Lista de conversas da doca */
.chat-lista-flutuante {
  position: absolute;
  right: 0;
  bottom: 4.75rem;
  width: min(320px, calc(100vw - 2rem));
  max-height: min(460px, 65vh);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: subir-janela .2s cubic-bezier(.2, .8, .3, 1);
}

.chat-lista-flutuante .topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--fio);
  flex: 0 0 auto;
}

.chat-lista-flutuante .topo .titulo {
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.chat-lista-flutuante .itens {
  overflow-y: auto;
  flex: 1 1 auto;
}

.chat-lista-flutuante .chat-item {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  background: transparent;
}

/* ---------------------------------------------------------------------
   25. Avisos flutuantes
   --------------------------------------------------------------------- */
.pilha-avisos {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(370px, calc(100vw - 2rem));
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .pilha-avisos {
    bottom: 130px;
  }
}

.aviso-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--raio-md);
  border: 1px solid var(--fio-forte);
  border-left: 3px solid var(--magma);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: var(--tinta);
  pointer-events: auto;
  animation: entrar-aviso .28s cubic-bezier(.2, .8, .3, 1);
}

.aviso-toast.saindo {
  animation: sair-aviso .24s ease forwards;
}

.aviso-toast .corpo {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.aviso-toast .titulo {
  display: block;
  font-family: var(--fonte-tecnica);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magma);
  margin-bottom: 0.1rem;
}

.aviso-toast .texto {
  font-size: 0.9rem;
}

.aviso-toast .fechar {
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  padding: 0;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.aviso-toast .fechar:hover {
  color: var(--tinta);
}

.aviso-toast.sucesso {
  border-left-color: var(--verde);
}

.aviso-toast.sucesso .titulo {
  color: var(--verde);
}

.aviso-toast.erro {
  border-left-color: var(--vermelho);
}

.aviso-toast.erro .titulo {
  color: var(--vermelho);
}

.aviso-toast.aviso {
  border-left-color: var(--lima);
}

.aviso-toast.aviso .titulo {
  color: var(--lima);
}

@keyframes entrar-aviso {
  from {
    opacity: 0;
    transform: translateX(16px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sair-aviso {
  to {
    opacity: 0;
    transform: translateX(16px);
  }
}

/* ---------------------------------------------------------------------
   28. Redesenho social 2026
   --------------------------------------------------------------------- */
:root {
  --raio: 10px;
  --raio-md: 14px;
  --raio-lg: 18px;
  --sombra: 0 16px 42px rgba(8, 15, 12, .16);
  --sombra-suave: 0 2px 10px rgba(8, 15, 12, .08);
  --bs-body-font-size: .95rem;
  --bs-body-line-height: 1.5;
}

[data-bs-theme='claro'] {
  --fundo: #F2F4F7;
  --superficie: #FFFFFF;
  --superficie-2: #F7F8FA;
  --superficie-3: #ECEFF3;
  --fio: #E3E6EA;
  --fio-forte: #D2D7DD;
  --tinta: #17201C;
  --tinta-suave: #47534E;
  --tinta-fraca: #738079;
  --magma: #F4511E;
  --magma-600: #DB4315;
  --magma-fraco: rgba(244, 81, 30, .1);
  --lima: #5D8D20;
  --lima-fraco: rgba(93, 141, 32, .12);
  --verde: #248A52;
  --sombra: 0 16px 42px rgba(20, 29, 25, .1);
  --sombra-suave: 0 2px 8px rgba(20, 29, 25, .055);
}

[data-bs-theme='escuro'] {
  --fundo: #0F1412;
  --superficie: #171D1A;
  --superficie-2: #1D2421;
  --superficie-3: #28312D;
  --fio: rgba(255, 255, 255, .09);
  --fio-forte: rgba(255, 255, 255, .16);
  --tinta: #F2F5F3;
  --tinta-suave: #BEC7C2;
  --tinta-fraca: #87938D;
}

body {
  letter-spacing: -.006em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--fonte-corpo);
  font-weight: 720;
  letter-spacing: -.025em;
  line-height: 1.18;
  text-transform: none;
}

h1,
.h1 {
  font-size: clamp(1.85rem, 1.4rem + 2vw, 3rem);
}

h2,
.h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
}

h3,
.h3 {
  font-size: 1.3rem;
}

h4,
.h4 {
  font-size: 1.12rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: .95rem;
  letter-spacing: -.01em;
}

.pagina-principal>.container,
.topo>.container {
  max-width: 1320px;
}

/* Cabeçalho enxuto, com busca global no centro */
.topo {
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  box-shadow: 0 1px 0 var(--fio);
  border-bottom: 0;
}

.topo-miolo {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.marca {
  font-family: var(--fonte-corpo);
  font-size: 1.3rem;
  font-weight: 790;
  letter-spacing: -.045em;
  text-transform: none;
}

.marca img {
  width: 31px;
  height: 31px;
}

.topo-busca {
  width: min(460px, 42vw);
  margin-inline: auto;
}

.topo-busca .input-group {
  flex-wrap: nowrap;
}

.topo-busca .input-group-text,
.topo-busca .form-control {
  min-height: 40px;
  border-color: transparent;
  background: var(--superficie-2);
}

.topo-busca .input-group-text {
  border-radius: var(--raio-pilula) 0 0 var(--raio-pilula);
  padding-left: .9rem;
  color: var(--tinta-fraca);
}

.topo-busca .form-control {
  border-radius: 0 var(--raio-pilula) var(--raio-pilula) 0;
  padding-left: .25rem;
}

.topo-busca .form-control:focus {
  box-shadow: none;
  border-color: transparent;
  background: var(--superficie-2);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: .18rem;
  margin-left: auto;
}

.acao-icone {
  width: 40px;
  height: 40px;
  color: var(--tinta-suave);
}

.acao-icone:hover {
  background: var(--superficie-3);
}

.topo-perfil img {
  border: 2px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--fio-forte);
}

.topo-criar {
  gap: .42rem;
  padding-inline: 1rem;
}

.dropdown-menu {
  border-radius: var(--raio-md);
  border-color: var(--fio);
  box-shadow: var(--sombra);
  padding: .45rem;
}

.dropdown-item {
  border-radius: 9px;
  padding: .55rem .7rem;
}

/* Colunas com largura de leitura semelhante a X/VK */
.app-shell {
  gap: 1.5rem;
  justify-content: center;
}

@media (min-width: 992px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 720px);
  }
}

@media (min-width: 1300px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 680px) minmax(280px, 320px);
  }
}

.coluna-fixa {
  top: 76px;
}

.menu-perfil {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .55rem .85rem;
  margin-bottom: .45rem;
  border-bottom: 1px solid var(--fio);
  color: var(--tinta);
}

.menu-perfil img {
  width: 42px;
  height: 42px;
}

.menu-perfil strong,
.menu-perfil small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-perfil strong {
  font-size: .91rem;
}

.menu-perfil small {
  color: var(--tinta-fraca);
  font-size: .79rem;
}

.menu-lateral {
  gap: .15rem;
}

.menu-lateral a {
  min-height: 46px;
  padding: .62rem .75rem;
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-size: .96rem;
  font-weight: 590;
  letter-spacing: -.01em;
  text-transform: none;
}

.menu-lateral a i {
  width: 24px;
  font-size: 1.22rem;
}

.menu-lateral a.active {
  background: var(--magma-fraco);
  color: var(--magma);
  box-shadow: none;
  font-weight: 690;
}

/* Cabeçalho e seletor do feed */
.feed-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem .15rem 1rem;
}

.feed-cabecalho h1 {
  margin: 0;
  font-size: 1.45rem;
}

.feed-cabecalho>div>span {
  color: var(--tinta-fraca);
  font-size: .84rem;
}

.feed-abas {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem;
  background: var(--superficie-3);
  border-radius: var(--raio-pilula);
}

.feed-abas a {
  padding: .42rem .8rem;
  border-radius: var(--raio-pilula);
  color: var(--tinta-fraca);
  font-size: .83rem;
  font-weight: 620;
  white-space: nowrap;
}

.feed-abas a.ativo {
  color: var(--tinta);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}

/* Composer no padrão de postagem rápida */
.composer {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-suave);
}

.composer-titulo {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding-bottom: .85rem;
}

.composer-titulo strong {
  font-size: .95rem;
}

.composer-titulo span {
  color: var(--tinta-fraca);
  font-size: .78rem;
}

.composer textarea {
  min-height: 44px;
  padding: .72rem 1rem;
  border-radius: var(--raio-pilula);
  background: var(--superficie-2);
  font-size: .96rem;
}

.composer textarea:focus {
  background: var(--superficie-2);
  box-shadow: 0 0 0 3px var(--magma-fraco);
}

.composer-ferramentas {
  margin-top: .8rem;
  padding-top: .7rem;
  gap: .2rem;
}

.composer-atalho {
  padding: .42rem .65rem;
  font-family: var(--fonte-corpo);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}

.composer-atalho i {
  font-size: 1.12rem;
}

.composer-atalho:nth-of-type(1) i {
  color: #2F9D63;
}

.composer-atalho:nth-of-type(2) i {
  color: var(--magma);
}

.composer-atalho:nth-of-type(3) i {
  color: #5079D8;
}

/* Check-ins em formato de histórias, sem fingir conteúdo efêmero */
.momentos {
  padding: .9rem 1rem 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-suave);
}

.momentos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.momentos-topo strong {
  font-size: .91rem;
}

.momentos-topo span {
  color: var(--verde);
  font-size: .77rem;
  font-weight: 620;
}

.momentos-trilha {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 .1rem .2rem;
  scrollbar-width: none;
}

.momentos-trilha::-webkit-scrollbar {
  display: none;
}

.momento {
  width: 76px;
  flex: 0 0 76px;
  color: var(--tinta);
  text-align: center;
  min-width: 0;
}

.momento-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto .4rem;
  border: 2px solid var(--magma);
  border-radius: 50%;
  padding: 2px;
}

.momento-avatar img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--superficie);
}

.momento strong,
.momento small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.momento strong {
  font-size: .77rem;
}

.momento small {
  color: var(--tinta-fraca);
  font-size: .69rem;
}

/* Conteúdo do feed */
.publicacao {
  margin-bottom: 1rem;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-suave);
  transition: box-shadow .16s ease, border-color .16s ease;
}

.publicacao:hover {
  border-color: var(--fio);
  box-shadow: 0 6px 20px rgba(20, 29, 25, .08);
}

.publicacao-topo {
  padding: .95rem 1rem .8rem;
  gap: .72rem;
}

.publicacao-topo .avatar-md {
  width: 44px;
  height: 44px;
}

.publicacao-topo .identidade-linha {
  display: flex;
  align-items: baseline;
  gap: .32rem;
  min-width: 0;
}

.publicacao-topo .nome {
  font-weight: 680;
  font-size: .93rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publicacao-verbo {
  color: var(--tinta-fraca);
  font-size: .82rem;
  white-space: nowrap;
}

.publicacao-topo .contexto {
  gap: .28rem;
  font-size: .77rem;
}

.publicacao-mais {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--tinta-fraca);
}

.publicacao-mais:hover {
  color: var(--tinta);
  background: var(--superficie-3);
}

.publicacao-corpo {
  padding: .05rem 1rem .9rem;
}

.publicacao-corpo p {
  color: var(--tinta);
  line-height: 1.55;
  font-size: .94rem;
}

.publicacao-figura,
.publicacao-carrossel {
  background: #111614;
}

.publicacao-cartao {
  margin: .85rem 1rem;
  background: var(--superficie-2);
  border-radius: 12px;
}

.publicacao-cartao .titulo {
  font-family: var(--fonte-corpo);
  font-size: .96rem;
  letter-spacing: -.015em;
  text-transform: none;
}

.publicacao-rodape {
  min-height: 50px;
  gap: .3rem;
  padding: .38rem .65rem;
}

.publicacao-rodape .btn-interacao {
  flex: 0 1 auto;
  justify-content: center;
  padding: .48rem .62rem;
  font-family: var(--fonte-corpo);
  font-size: .8rem;
  font-weight: 570;
  letter-spacing: 0;
}

.publicacao-rodape .acao-texto {
  color: inherit;
}

.publicacao-abrir {
  flex: 0 0 auto !important;
}

/* Widgets, cartões e formulários */
.card,
.cartao,
.painel,
.filtros,
.perfil-sobre,
.perfil-numeros {
  border-radius: var(--raio-md);
}

.painel {
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.painel-topo {
  padding: .85rem 1rem;
}

.painel-topo h2,
.painel-topo h3 {
  font-family: var(--fonte-corpo);
  font-size: .93rem;
  letter-spacing: -.015em;
}

.painel-topo .tecnica {
  font-family: var(--fonte-corpo);
  font-weight: 600;
}

.cartao {
  box-shadow: var(--sombra-suave);
  transition: box-shadow .18s ease, transform .18s ease;
}

.cartao:hover {
  border-color: var(--fio);
  box-shadow: 0 10px 26px rgba(20, 29, 25, .1);
}

.filtros {
  box-shadow: var(--sombra-suave);
}

.filtro-pilula {
  font-family: var(--fonte-corpo);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.filtro-pilula:hover {
  background: var(--fio-forte);
}

.form-control,
.form-select {
  border-radius: var(--raio);
  background: var(--superficie);
}

.form-label {
  font-family: var(--fonte-corpo);
  letter-spacing: 0;
  text-transform: none;
}

.btn {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  font-weight: 670;
  letter-spacing: -.01em;
  text-transform: none;
}

/* Perfil mais próximo de Instagram/VK */
.perfil-capa-foto {
  border-radius: var(--raio-lg);
  height: clamp(170px, 25vw, 290px);
}

.perfil-capa-foto img {
  opacity: .9;
}

.perfil-capa-foto::after {
  background: linear-gradient(to top, rgba(8, 14, 11, .42), transparent 60%);
}

.perfil-capa-foto::before {
  display: none;
}

.perfil-identidade {
  margin-top: -56px;
  padding-inline: 1.25rem;
}

.perfil-foto {
  border-color: var(--superficie);
  box-shadow: 0 0 0 1px var(--fio);
}

.perfil-presenca {
  border-color: var(--superficie);
}

.perfil-nome-bloco h1 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
}

.perfil-nick {
  font-family: var(--fonte-corpo);
  font-size: .94rem;
  letter-spacing: 0;
}

.perfil-numeros {
  gap: 0;
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}

.perfil-numero {
  border-right: 1px solid var(--fio);
}

.perfil-numero:last-child {
  border-right: 0;
}

.perfil-numero .rotulo-dado {
  letter-spacing: .02em;
  text-transform: none;
}

.perfil-abas {
  gap: 0;
  padding: 0;
  border-radius: var(--raio-md);
}

.perfil-aba {
  flex: 1;
  justify-content: center;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--fonte-corpo);
  font-size: .84rem;
  letter-spacing: 0;
  text-transform: none;
}

.perfil-aba.ativa {
  color: var(--magma);
  background: transparent;
  border-bottom-color: var(--magma);
}

/* Navegação móvel de cinco ações */
.barra-mobile {
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  min-height: 62px;
}

.barra-mobile a {
  padding: .5rem .2rem .42rem;
  font-family: var(--fonte-corpo);
  font-size: .66rem;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
}

.barra-mobile a i {
  font-size: 1.26rem;
}

.barra-mobile-mais {
  width: 31px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--magma);
  color: #fff;
}

.barra-mobile .barra-mobile-criar i {
  font-size: 1.05rem;
}

@media (max-width: 767.98px) {
  .topo-miolo {
    min-height: 56px;
  }

  .pagina-principal {
    padding-top: .8rem !important;
  }

  .feed-cabecalho {
    align-items: flex-start;
    padding-inline: .1rem;
  }

  .feed-cabecalho>div>span {
    display: none;
  }

  .feed-cabecalho h1 {
    font-size: 1.25rem;
  }

  .feed-abas a {
    padding: .38rem .66rem;
    font-size: .78rem;
  }

  .composer-titulo span {
    display: none;
  }

  .composer-atalho {
    padding-inline: .5rem;
  }

  .composer-atalho span {
    display: none;
  }

  .composer-atalho:first-child span {
    display: inline;
  }
}

@media (max-width: 575.98px) {
  .pagina-feed .pagina-principal>.container {
    padding-inline: 0;
  }

  .feed-cabecalho {
    padding-inline: 1rem;
  }

  .composer,
  .momentos,
  .publicacao,
  .vazio {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .publicacao:hover {
    box-shadow: none;
  }

  .publicacao-rodape .acao-texto {
    display: none;
  }

  .publicacao-rodape .btn-interacao {
    flex: 1;
  }

  .publicacao-abrir {
    display: none;
  }

  .perfil-topo,
  .perfil-sobre,
  .perfil-numeros,
  .perfil-abas {
    margin-inline: .75rem;
  }

  .perfil-capa-foto {
    border-radius: var(--raio-md);
  }
}

/* ---------------------------------------------------------------------
   29. Shell global e módulos
   --------------------------------------------------------------------- */
.layout-modulos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.navegacao-global {
  display: none;
  min-width: 0;
}

.conteudo-modulo {
  width: 100%;
}

@media (min-width: 992px) {
  .layout-modulos {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .navegacao-global {
    display: block;
  }
}

.navegacao-social {
  /* max-height: calc(100vh - 90px); */
  overflow-y: auto;
  padding: 0 .25rem .75rem 0;
  scrollbar-width: none;
}

.navegacao-social::-webkit-scrollbar {
  display: none;
}

.offcanvas .navegacao-social {
  position: static;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.navegacao-social .menu-perfil {
  margin-bottom: .25rem;
}

.navegacao-social .menu-lateral {
  gap: .05rem;
}

.navegacao-social .menu-lateral a {
  min-height: 40px;
  padding-block: .48rem;
  font-size: .9rem;
}

.navegacao-social .menu-lateral a i {
  font-size: 1.08rem;
}

.menu-grupo {
  display: block;
  padding: .8rem .72rem .28rem;
  color: var(--tinta-fraca);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.menu-grupo:first-of-type {
  padding-top: .35rem;
}

.menu-contador {
  min-width: 20px;
  margin-left: auto;
  padding: .08rem .38rem;
  border-radius: var(--raio-pilula);
  background: var(--magma);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}

/* Cabeçalhos de páginas e trilhas */
.conteudo-modulo>.cabecalho-secao:first-child,
.conteudo-modulo>nav:first-child+.d-flex {
  padding: .2rem 0 .25rem;
}

.cabecalho-secao {
  align-items: center;
  margin-bottom: 1.15rem;
}

.cabecalho-secao h1 {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
}

.cabecalho-secao h2,
.cabecalho-secao h3 {
  font-size: 1.08rem;
}

.regua {
  display: none;
}

.eyebrow {
  gap: 0;
  margin-bottom: .28rem;
  font-family: var(--fonte-corpo);
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .07em;
  color: var(--magma);
}

.eyebrow::before {
  display: none;
}

.rotulo-dado {
  letter-spacing: .06em;
}

/* Heróis passam a funcionar como capas sociais compactas */
.conteudo-modulo .hero {
  margin-bottom: 1.25rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-suave);
}

.conteudo-modulo .hero-compacto {
  min-height: 210px;
}

.conteudo-modulo .hero-compacto .hero-conteudo {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.conteudo-modulo .hero-diagonal {
  padding-bottom: 0;
}

.conteudo-modulo .hero-diagonal::after {
  display: none;
}

.conteudo-modulo .hero-figura::after {
  background: linear-gradient(90deg, rgba(6, 10, 8, .9), rgba(6, 10, 8, .58) 58%, rgba(6, 10, 8, .25));
}

.conteudo-modulo .hero h1 {
  max-width: 22ch;
  font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.35rem);
}

.conteudo-modulo .hero p {
  line-height: 1.5;
}

.trilha {
  font-family: var(--fonte-corpo);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: none;
}

/* Filtros consistentes em todos os diretórios */
.conteudo-modulo .filtros {
  padding: 1rem;
  border-radius: var(--raio-md);
}

.filtros-gatilho {
  display: none;
}

@media (min-width: 992px) {
  .conteudo-modulo aside .filtros {
    position: sticky;
    top: 76px;
  }
}

.form-label {
  margin-bottom: .35rem;
  color: var(--tinta-suave);
  font-size: .78rem;
  font-weight: 650;
}

.form-control,
.form-select,
.input-group-text {
  min-height: 40px;
}

.form-control-sm,
.form-select-sm {
  min-height: 36px;
}

.filtro-pilulas {
  gap: .3rem;
}

.filtro-pilula {
  padding: .4rem .75rem;
  background: var(--superficie);
  border: 1px solid var(--fio);
}

.filtro-pilula.ativo {
  border-color: var(--magma);
}

/* Grades e cartões de vias, picos, escaladores, locais, bazar e eventos */
.cartao {
  border-radius: var(--raio-md);
}

.cartao-figura::after {
  background: linear-gradient(to top, rgba(6, 9, 8, .5), transparent 50%);
}

.cartao-titulo {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 680;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-transform: none;
}

.cartao-local {
  font-family: var(--fonte-corpo);
  font-size: .79rem;
  letter-spacing: 0;
}

.cartao-corpo {
  padding: .9rem;
  gap: .42rem;
}

.cartao-rodape {
  margin-top: .35rem;
}

.cartao-pessoa .numeros {
  font-family: var(--fonte-corpo);
  letter-spacing: 0;
}

.noticia-destaque {
  overflow: hidden;
}

/* Painéis de detalhes e formulários */
.painel {
  border-radius: var(--raio-md);
}

.painel-topo {
  min-height: 52px;
}

.painel-corpo {
  padding: 1.1rem;
}

.ficha .rotulo {
  font-family: var(--fonte-corpo);
  font-size: .75rem;
  letter-spacing: .03em;
}

.vazio {
  border-style: solid;
  border-color: var(--fio);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-suave);
}

.vazio .titulo {
  font-family: var(--fonte-corpo);
  font-size: 1.08rem;
  letter-spacing: -.015em;
  text-transform: none;
}

.alert {
  border-radius: var(--raio-md);
}

.modal-content,
.offcanvas {
  background: var(--superficie);
  border-color: var(--fio);
  border-radius: var(--raio-lg);
}

/* Abas secundárias: conta, administração, perfis, grupos e eventos */
.abas {
  gap: .15rem;
  padding: .28rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}

.abas a {
  padding: .52rem .75rem;
  border: 0;
  border-radius: 9px;
  font-family: var(--fonte-corpo);
  font-size: .82rem;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
}

.abas a.active {
  color: var(--magma);
  background: var(--magma-fraco);
}

/* Cadastros guiados e telas densas */
.wizard {
  max-width: none;
}

.wizard-cabecalho h1 {
  font-size: 1.65rem;
}

.wizard-passo {
  font-family: var(--fonte-corpo);
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
}

.wizard-secao {
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-suave);
}

.wizard-secao>header h2 {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  letter-spacing: -.01em;
}

.wizard-rodape {
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
}

.opcao-cartao .titulo {
  font-family: var(--fonte-corpo);
  letter-spacing: -.01em;
  text-transform: none;
}

.table-responsive {
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie);
}

.table {
  margin-bottom: 0;
}

/* Chat e mapas seguem o mesmo contêiner social */
.chat-painel {
  height: calc(100vh - 126px);
  min-height: 540px;
  box-shadow: var(--sombra-suave);
}

.chat-item.ativo {
  background: var(--magma-fraco);
}

.mapa {
  border-radius: var(--raio-md);
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .conteudo-modulo .hero-compacto {
    min-height: 190px;
  }

  .chat-painel {
    height: calc(100vh - 150px);
  }
}

@media (max-width: 575.98px) {
  .cabecalho-secao {
    padding-inline: .1rem;
  }

  .cabecalho-secao>.d-flex {
    width: 100%;
  }

  .cabecalho-secao>.d-flex .btn {
    flex: 1;
  }

  .conteudo-modulo .hero {
    border-radius: var(--raio-md);
  }

  .conteudo-modulo .hero-conteudo {
    padding: 1.25rem;
  }

  .conteudo-modulo .filtros {
    padding: .85rem;
  }

  .filtros-gatilho {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: .65rem .85rem;
    border: 1px solid var(--fio);
    border-radius: 11px;
    background: var(--superficie);
    color: var(--tinta);
    font-size: .86rem;
    font-weight: 650;
  }

  .filtros-gatilho b {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: .25rem;
    border-radius: 50%;
    background: var(--magma-fraco);
    color: var(--magma);
    font-size: .7rem;
  }

  .filtros-recolhiveis:not(.filtros-abertos) {
    display: none;
  }

  .abas {
    border-radius: 11px;
  }

  .abas a {
    padding-inline: .62rem;
  }

  .painel-corpo {
    padding: 1rem;
  }
}

/* ---------------------------------------------------------------------
   30. Cadastro de vias — modalidade e editor de croqui
   --------------------------------------------------------------------- */
.wizard-secao>header {
  align-items: flex-start;
  gap: .75rem;
}

.wizard-secao>header>div {
  min-width: 0;
  flex: 1;
}

.wizard-secao>header p {
  margin: .22rem 0 0;
  color: var(--tinta-fraca);
  font-size: .78rem;
  line-height: 1.45;
}

.wizard-secao-indice {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--magma-fraco);
  color: var(--magma);
  font-size: .75rem;
  font-weight: 800;
}

.tipo-via-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.tipo-via-cartao {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  gap: .75rem;
  min-height: 132px;
  padding: .9rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie-2);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tipo-via-cartao:hover {
  border-color: var(--fio-forte);
  box-shadow: var(--sombra-suave);
  transform: translateY(-1px);
}

.tipo-via-cartao>input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tipo-via-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--superficie);
  border: 1px solid var(--fio);
  color: var(--tinta-suave);
  font-size: 1.08rem;
}

.tipo-via-conteudo {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.tipo-via-titulo {
  color: var(--tinta);
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.25;
}

.tipo-via-apoio {
  display: -webkit-box;
  margin-top: .22rem;
  overflow: hidden;
  color: var(--tinta-fraca);
  font-size: .76rem;
  line-height: 1.38;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tipo-via-tracos {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .65rem;
  margin-top: auto;
  padding-top: .55rem;
  color: var(--tinta-suave);
  font-size: .68rem;
}

.tipo-via-tracos>span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.tipo-via-tracos i {
  color: var(--magma);
}

.tipo-via-check {
  display: grid;
  place-items: center;
  align-self: start;
  width: 22px;
  height: 22px;
  border: 1px solid var(--fio-forte);
  border-radius: 50%;
  color: transparent;
  font-size: .74rem;
}

.tipo-via-cartao:has(input:checked) {
  border-color: var(--magma);
  background: var(--magma-fraco);
  box-shadow: 0 0 0 1px var(--magma);
}

.tipo-via-cartao:has(input:checked) .tipo-via-icone {
  border-color: transparent;
  background: var(--magma);
  color: #fff;
}

.tipo-via-cartao:has(input:checked) .tipo-via-check {
  border-color: var(--magma);
  background: var(--magma);
  color: #fff;
}

.tipo-via-cartao:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--magma) 40%, transparent);
  outline-offset: 2px;
}

.tipo-via-especializadas {
  margin-top: .8rem;
  padding: .18rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie);
}

.tipo-via-especializadas>summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  color: var(--tinta-suave);
  font-size: .82rem;
  font-weight: 680;
  cursor: pointer;
  list-style: none;
}

.tipo-via-especializadas>summary::-webkit-details-marker {
  display: none;
}

.tipo-via-especializadas>summary:hover {
  background: var(--superficie-2);
  color: var(--tinta);
}

.tipo-via-especializadas>summary small {
  color: var(--tinta-fraca);
  font-size: .68rem;
  font-weight: 600;
}

.tipo-via-especializadas>summary .seta {
  transition: transform .16s ease;
}

.tipo-via-especializadas[open]>summary .seta {
  transform: rotate(180deg);
}

.tipo-via-especializadas[open] {
  padding-bottom: .8rem;
}

.tipo-via-especializadas[open]>.tipo-via-grade {
  padding-inline: .6rem;
}

.tipo-via-selecionado {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: .8rem;
  padding: .7rem .8rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--lima) 13%, var(--superficie));
  color: var(--tinta);
}

.tipo-via-selecionado[hidden] {
  display: none;
}

.tipo-via-selecionado>i {
  margin-top: .08rem;
  color: var(--lima);
}

.tipo-via-selecionado span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.tipo-via-selecionado strong {
  font-size: .8rem;
}

.tipo-via-selecionado small {
  margin-top: .08rem;
  color: var(--tinta-fraca);
  font-size: .72rem;
  line-height: 1.4;
}

.croqui-instrucao {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .8rem;
  padding: .7rem .8rem;
  border-radius: 11px;
  background: var(--magma-fraco);
  color: var(--tinta-suave);
  font-size: .78rem;
  line-height: 1.45;
}

.croqui-instrucao i {
  color: var(--magma);
  font-size: 1rem;
}

.croqui-instrucao strong {
  color: var(--tinta);
}

.croqui-ferramentas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  padding: .8rem;
  align-items: stretch;
}

.croqui-bloco {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .45rem;
  padding: .65rem;
  border: 1px solid var(--fio);
  border-radius: 11px;
  background: var(--superficie);
}

.croqui-bloco-rotulo {
  color: var(--tinta-fraca);
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.croqui-ferramentas .grupo {
  flex-wrap: nowrap;
  min-width: 0;
}

.croqui-ferramenta {
  justify-content: center;
  flex: 1 1 auto;
  min-height: 36px;
  font-family: var(--fonte-corpo);
  font-size: .74rem;
  letter-spacing: 0;
}

.croqui-bloco-aparencia .form-select {
  width: auto;
  min-width: 92px;
}

.croqui-historico .btn {
  min-width: 38px;
}

.croqui-palco {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: clamp(.5rem, 2vw, 1.25rem);
  overflow: auto;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: repeating-conic-gradient(from 45deg, var(--superficie-2) 0 25%, var(--superficie) 0 50%) 50% / 20px 20px;
}

.croqui-area.carregando .croqui-palco {
  opacity: .55;
}

.croqui-area.carregando .croqui-ferramentas {
  opacity: .7;
  pointer-events: none;
}

.croqui-area.carregando .croqui-instrucao span::after {
  content: ' Preparando a foto…';
  color: var(--magma);
  font-weight: 700;
}

.croqui-foto-atual .corpo {
  padding: .8rem;
  background: repeating-conic-gradient(from 45deg, var(--superficie-2) 0 25%, var(--superficie) 0 50%) 50% / 20px 20px;
}

.croqui-foto-atual-imagem {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-md);
  object-fit: contain;
}

.croqui-upload-dicas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-top: .75rem;
  color: var(--tinta-fraca);
  font-size: .72rem;
}

.croqui-upload-dicas span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.croqui-upload-dicas i {
  color: var(--magma);
}

.croqui-etapa-desenho .croqui-palco {
  min-height: 520px;
}

.croqui-etapa-desenho .croqui-editor img {
  width: auto;
  max-width: 100%;
  max-height: 680px;
  object-fit: contain;
}

.croqui-desenho-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .65rem;
}

/* Croqui publicado: controle de camada do traçado */
.croqui-camada-switch {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 34px;
  margin-left: auto;
  padding: .3rem .45rem .3rem .7rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-pilula);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  cursor: pointer;
  user-select: none;
}

.croqui-camada-switch:hover {
  border-color: var(--fio-forte);
  color: var(--tinta);
}

.croqui-camada-texto {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 680;
}

.croqui-camada-texto i {
  color: var(--magma);
}

.croqui-camada-switch .form-check-input {
  margin: 0;
  cursor: pointer;
}

.croqui-visor svg {
  transition: opacity .2s ease, visibility .2s ease;
}

.croqui-visor.croqui-tracado-oculto svg {
  visibility: hidden;
  opacity: 0;
}

/* Publicação em lote na galeria da via */
.envio-galeria {
  background:
    radial-gradient(circle at 95% 0, color-mix(in srgb, var(--magma) 9%, transparent), transparent 34%),
    var(--superficie-2) !important;
}

.envio-galeria-cabecalho {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}

.envio-galeria-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--magma-fraco);
  color: var(--magma);
  font-size: 1.25rem;
}

.envio-galeria-cabecalho h3 {
  margin: 0;
  font-size: .98rem;
}

.envio-galeria-cabecalho p {
  margin: .16rem 0 0;
  color: var(--tinta-fraca);
  font-size: .76rem;
  line-height: 1.45;
}

.envio-galeria-form {
  padding: .8rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  background: var(--superficie);
}

.envio-galeria-form .filepond--drop-label {
  min-height: 138px;
}

.envio-galeria-form .filepond--panel-root {
  background: var(--superficie-2);
}

.envio-galeria-form .filepond--principal {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  letter-spacing: -.01em;
  text-transform: none;
}

.envio-galeria-cadastro {
  padding: .9rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
}

.envio-galeria-cadastro .envio-galeria-form {
  padding: .7rem;
}

.envio-galeria-alerta {
  margin-top: .6rem;
  padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, var(--vermelho) 35%, var(--fio));
  border-radius: 10px;
  background: color-mix(in srgb, var(--vermelho) 8%, var(--superficie));
  color: var(--vermelho);
  font-size: .72rem;
}

.envio-galeria-alerta[hidden] {
  display: none;
}

.envio-grade .filepond--item {
  width: calc(50% - .5em);
}

.envio-grade .filepond--file-info {
  min-width: 0;
}

.envio-grade .filepond--file-info-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envio-grade .filepond--item-panel {
  border-radius: 11px;
}

.envio-galeria-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .65rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: var(--superficie-2);
}

.envio-galeria-contagem {
  display: inline-flex;
  align-items: baseline;
  gap: .32rem;
  white-space: nowrap;
}

.envio-galeria-contagem strong {
  color: var(--magma);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.envio-galeria-contagem span {
  color: var(--tinta-suave);
  font-size: .72rem;
}

.envio-galeria-contagem.limite-excedido strong,
.envio-galeria-contagem.limite-excedido span {
  color: var(--vermelho);
}

.envio-galeria-limites {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem .7rem;
  color: var(--tinta-fraca);
  font-size: .68rem;
}

.envio-galeria-limites span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.envio-galeria-limites i {
  color: var(--magma);
}

.envio-galeria-rodape {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .9rem;
  margin-top: .85rem;
}

.envio-galeria-rodape .btn {
  min-width: 180px;
  min-height: 42px;
}

@media (min-width: 768px) {
  .envio-grade .filepond--item {
    width: calc(33.333% - .5em);
  }
}

@media (min-width: 1200px) {
  .envio-grade .filepond--item {
    width: calc(25% - .5em);
  }
}

@media (max-width: 767.98px) {
  .tipo-via-grade {
    grid-template-columns: 1fr;
  }

  .tipo-via-cartao {
    min-height: 118px;
  }

  .croqui-etapa-desenho>header {
    flex-wrap: wrap;
  }

  .croqui-etapa-desenho>header .btn {
    width: 100%;
  }

  .croqui-ferramentas {
    grid-template-columns: 1fr;
    padding: .65rem;
  }

  .croqui-ferramenta span {
    display: inline;
  }

  .croqui-ferramenta {
    padding: .45rem .55rem;
  }

  .croqui-palco {
    min-height: 210px;
    padding: .35rem;
  }

  .croqui-etapa-desenho .croqui-palco {
    min-height: 320px;
  }

  .croqui-etapa-desenho .croqui-editor img {
    max-height: none;
  }

  .croqui-desenho-rodape {
    align-items: flex-start;
    flex-direction: column;
  }

  .croqui-upload-dicas {
    flex-direction: column;
  }

  .croqui-camada-texto span {
    display: none;
  }

  .envio-galeria-cabecalho {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .envio-galeria-cabecalho>.selo {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .envio-galeria-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .envio-galeria-limites {
    justify-content: flex-start;
  }

  .envio-galeria-rodape {
    grid-template-columns: 1fr;
  }

  .envio-galeria-rodape .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .tipo-via-cartao {
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    padding: .75rem;
  }

  .tipo-via-icone {
    width: 34px;
    height: 34px;
  }

  .tipo-via-tracos {
    flex-direction: column;
  }

  .croqui-ferramentas .grupo {
    overflow-x: auto;
    padding-bottom: .15rem;
    scrollbar-width: thin;
  }

  .croqui-ferramenta {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Utilitários */
.linha-fina {
  border-top: 1px solid var(--fio);
}

.texto-suave {
  color: var(--tinta-suave) !important;
}

.texto-fraco {
  color: var(--tinta-fraca) !important;
}

.texto-ferro,
.texto-magma {
  color: var(--magma) !important;
}

.texto-lima {
  color: var(--lima) !important;
}

.fundo-superficie {
  background: var(--superficie) !important;
}

.fundo-superficie-2 {
  background: var(--superficie-2) !important;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.min-width-0 {
  min-width: 0;
}

.recortar-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recortar-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {

  .topo,
  .barra-mobile,
  .rodape,
  .btn,
  .filtros,
  .abas,
  .composer,
  .app-lateral-esq,
  .app-lateral-dir {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .painel,
  .cartao,
  .publicacao {
    border-color: #999;
    break-inside: avoid;
  }
}

/* Publicidades comerciais nas barras laterais direitas. */
.publicidades-lateral {
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: var(--raio-lg);
  background: var(--superficie);
}

.publicidades-lateral-topo {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--fio);
  color: var(--tinta-fraca);
}

.publicidades-lateral-topo h2 {
  margin: 0;
  font-family: var(--fonte-tecnica);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.publicidades-lateral-lista {
  display: grid;
  gap: 1px;
  background: var(--fio);
}

.publicidade-cartao {
  min-width: 0;
  background: var(--superficie);
}

.publicidade-cartao > a {
  display: block;
  color: var(--tinta);
}

.publicidade-cartao img {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  background: var(--superficie-2);
}

.publicidade-cartao-corpo {
  display: grid;
  gap: .25rem;
  padding: .75rem .85rem .85rem;
}

.publicidade-cartao-corpo small {
  color: var(--tinta-fraca);
  font-size: .68rem;
}

.publicidade-cartao-corpo strong {
  font-size: .9rem;
  line-height: 1.3;
}

.publicidade-cartao-corpo > span {
  color: var(--magma);
  font-family: var(--fonte-tecnica);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.publicidade-cartao > a:hover .publicidade-cartao-corpo strong,
.publicidade-cartao > a:focus-visible .publicidade-cartao-corpo strong {
  color: var(--magma);
}

.publicidade-admin-miniatura {
  width: 48px;
  height: 60px;
  flex: 0 0 auto;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  object-fit: cover;
}

.publicidade-form-preview {
  width: min(100%, 280px);
  aspect-ratio: 4 / 5;
  display: block;
  margin: 0 auto 1rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio-md);
  object-fit: cover;
}

/* Feed da Home: dados e mídias só entram no documento em lotes sob demanda. */
.feed-sob-demanda {
  min-height: 180px;
}

.feed-carregando,
.feed-erro,
.feed-fim {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  color: var(--tinta-fraca);
  font-size: .84rem;
  text-align: center;
}

.feed-carregando[hidden],
.feed-erro[hidden],
.feed-fim[hidden],
.feed-sentinela[hidden] {
  display: none;
}

.feed-erro {
  flex-wrap: wrap;
  padding: 1rem;
  border: 1px dashed var(--fio-forte);
  border-radius: var(--raio-md);
  background: var(--superficie-2);
}

.feed-erro > i {
  color: var(--magma);
  font-size: 1.15rem;
}

.feed-fim {
  min-height: 92px;
  font-family: var(--fonte-tecnica);
  letter-spacing: .04em;
}

.feed-sentinela {
  width: 100%;
  height: 2px;
}

@media (max-width: 991.98px) {
  .publicidades-lateral-lista {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}