/* components.css */

/* ===== Cabeçalho ===== */
.cabecalho {
  padding: var(--esp-lg) 0 var(--esp-md);
}

.localizacao {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--tam-caption);
  font-weight: 600;
  color: var(--cor-clay-escuro);
  margin-top: var(--esp-xs);
}

.localizacao svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ===== Faixa superior (marca + favoritos + busca) ===== */
.barra-topo {
  background: var(--cor-pine-escuro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--esp-md);
}

.barra-topo-marca {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--cor-paper);
  letter-spacing: -0.01em;
}

.barra-topo-icone {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-paper);
  background: none;
  border: none;
}
.barra-topo-icone svg { width: 22px; height: 22px; }

.busca-container {
  margin-top: var(--esp-md);
}

.busca-container[hidden] {
  display: none;
}

.busca {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  padding: 10px 16px;
  margin-top: var(--esp-md);
}

.busca input {
  border: none;
  background: none;
  font-size: var(--tam-corpo);
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  width: 100%;
}

.busca input:focus { outline: none; }
.busca input::placeholder { color: var(--cor-texto-fraco); }

/* ===== Resposta rápida "onde tem forró hoje" ===== */
.condicao-especial {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--cor-gold-claro);
  color: var(--cor-gold-escuro);
  border-radius: var(--raio-campo);
  padding: 10px 12px;
  font-size: var(--tam-caption);
}

.condicao-especial-icone {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.3;
}

.resposta-hoje {
  background: var(--bg-destaque);
  color: var(--texto-sobre-destaque);
  border-radius: var(--raio-card);
  padding: var(--esp-lg) var(--esp-md);
  margin-top: var(--esp-md);
}

.resposta-hoje h2 {
  font-size: var(--tam-titulo-md);
  margin-bottom: var(--esp-xs);
}

.resposta-hoje p {
  opacity: 0.85;
  font-size: var(--tam-corpo);
}

/* ===== Pills de filtro ===== */
.pills {
  display: flex;
  gap: var(--esp-sm);
  overflow-x: auto;
  padding: var(--esp-xs) 0 var(--esp-sm);
  scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }

.pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--bg-card);
  color: var(--cor-texto-suave);
  font-size: var(--tam-caption);
  font-weight: 500;
}

.pill[aria-pressed="true"] {
  background: var(--cor-pine);
  color: var(--cor-paper);
  border-color: var(--cor-pine);
}

/* ===== Card de evento ===== */
.grade-eventos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-md);
}

@media (min-width: 560px) {
  .grade-eventos { grid-template-columns: 1fr 1fr; }
}

.card-evento {
  display: block;
  background: var(--bg-card);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}

.midia {
  background: linear-gradient(180deg, rgba(20, 47, 38, 0) 40%, rgba(20, 47, 38, 0.7) 100%), var(--cor-clay);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--esp-sm) var(--esp-md);
}

.card-evento .midia {
  height: 140px;
}

.marca-nome {
  font-family: var(--fonte-display);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.card-evento .marca-nome {
  font-size: var(--tam-titulo-sm);
}

.badge {
  position: absolute;
  top: var(--esp-sm);
  left: var(--esp-sm);
  background: var(--cor-gold);
  color: var(--cor-gold-escuro);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--raio-pilula);
}

.badge.badge-hoje {
  background: var(--cor-clay);
  color: #fff;
}

.card-evento .corpo {
  padding: var(--esp-sm) var(--esp-md) var(--esp-md);
}

.card-evento .titulo-evento {
  font-weight: 500;
  font-size: var(--tam-corpo);
  margin-bottom: 4px;
}

.card-evento .meta {
  font-size: var(--tam-caption);
  color: var(--cor-texto-suave);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== Tira de Dias (fileira de destaque com os próximos 7 dias) ===== */
.tira-dias {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
}

.cards-semana {
  display: flex;
  gap: var(--esp-md);
  overflow-x: auto;
  padding: var(--esp-sm) 2px var(--esp-md);
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.cards-semana::-webkit-scrollbar { display: none; }

.seta-tira {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-pine);
}
.seta-tira svg { width: 16px; height: 16px; }

.seta-tira[hidden] {
  display: none;
}

.controle-direita {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--bg-card);
  color: var(--cor-pine);
  font-size: 12px;
  font-weight: 600;
  transition: padding 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.controle-direita svg { width: 16px; height: 16px; flex-shrink: 0; }
.controle-direita .controle-direita-texto { white-space: nowrap; }

.controle-direita--fim {
  min-width: auto;
  padding: 0 12px 0 14px;
  background: var(--cor-pine);
  color: var(--cor-paper);
  border-color: var(--cor-pine);
}

.card-dia {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.card-dia-badge {
  position: absolute;
  top: -4px;
  left: 2px;
  z-index: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cor-clay);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-pagina);
}

.card-dia-badge[hidden] {
  display: none;
}

.card-dia .cartao-borda {
  width: 56px;
  height: 84px;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(135deg, var(--cor-clay), var(--cor-gold));
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-dia .cartao-conteudo {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto);
}

.cartao-dia-numero {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--tam-titulo-sm);
  line-height: 1.1;
}

.cartao-dia-mes {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 1px;
}

.card-dia .rotulo-dia {
  font-size: 11px;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-align: center;
  white-space: nowrap;
}

.card-dia.ativo .cartao-borda {
  background: var(--cor-pine);
}

.card-dia.ativo .cartao-conteudo {
  color: var(--cor-pine);
}

.card-dia.ativo .rotulo-dia {
  color: var(--cor-pine);
  font-weight: 700;
}

/* ===== Mini card de localização (usado na página de evento) ===== */
.local-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
  background: var(--cor-pine-claro);
  color: var(--cor-pine-escuro);
  border-radius: var(--raio-campo);
  padding: 12px 14px;
}

.local-mini[hidden] {
  display: none;
}

.local-mini a {
  font-size: var(--tam-caption);
  font-weight: 600;
  color: var(--cor-pine);
  white-space: nowrap;
}

/* ===== Botões ===== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--raio-pilula);
  padding: 13px 24px;
  font-size: var(--tam-corpo);
  font-weight: 600;
  border: none;
  width: 100%;
}

.botao-primario {
  background: var(--cor-pine);
  color: var(--cor-paper);
}

.botao-secundario {
  background: transparent;
  color: var(--cor-pine);
  border: 1px solid var(--cor-pine);
}

/* Seguir, estado ativo — versão padrão, pra fundos claros (ex: o card
   "Conheça a Marca" em evento.html). */
.botao-seguir.ativo {
  background: var(--cor-pine);
  color: var(--cor-paper);
  border-color: var(--cor-pine);
}

/* Seguir (marca.html): o botão fica dentro do .perfil-header, que tem fundo
   --cor-pine escuro — o .botao-secundario padrão (texto/borda pine) ficaria
   invisível ali. Sobrescreve especificamente nesse contexto (e também o
   .ativo acima, por ter seletor mais específico). */
.perfil-header .botao-seguir {
  background: transparent;
  color: var(--cor-paper);
  border: 1px solid var(--cor-paper);
}

.perfil-header .botao-seguir.ativo {
  background: var(--cor-clay);
  color: var(--cor-paper);
  border-color: var(--cor-clay);
}

/* Ações flutuantes sobre o banner do evento (compartilhar, favoritar).
   .midia já é position: relative, então isso ancora certinho. */
.midia-acoes {
  position: absolute;
  top: var(--esp-md);
  right: var(--esp-md);
  display: flex;
  gap: var(--esp-sm);
}

.botao-midia {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.35);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-paper);
}

.botao-midia svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao-favoritar.ativo {
  color: var(--cor-clay);
}

.botao-favoritar.ativo svg {
  fill: currentColor;
}

/* Cabeçalho da Marca: logo ao lado do título (a capa vai de fundo, inline). */
.perfil-header-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
}

.marca-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--cor-paper);
  background: var(--cor-pine-claro);
}

/* Link da Marca na página do evento: mini-logo + nome. */
.marca-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.marca-logo-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cor-paper-linha);
}

/* Aviso rápido (ex: "Link copiado!"). */
.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 8px);
  background: var(--cor-pine-escuro);
  color: var(--cor-paper);
  padding: 10px 18px;
  border-radius: var(--raio-pilula);
  font-size: var(--tam-caption);
  font-weight: 600;
  box-shadow: var(--sombra-flutuante);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
  pointer-events: none;
}

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

/* ===== Navegação inferior ===== */
.nav-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--borda);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}

.nav-inferior a,
.nav-inferior button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--cor-texto-fraco);
  padding: 4px 12px;
  background: none;
  border: none;
}

.nav-inferior svg { width: 22px; height: 22px; }

/* ===== Menu lateral (drawer) ===== */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.45);
  z-index: 20;
}

.menu-overlay[hidden] {
  display: none;
}

.menu-lateral {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(78%, 320px);
  background: var(--bg-pagina);
  z-index: 21;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-flutuante);
}

.menu-lateral.aberto {
  transform: translateX(0);
}

.menu-lateral-topo {
  background: var(--cor-pine-escuro);
  color: var(--cor-paper);
  padding: var(--esp-xl) var(--esp-md) var(--esp-lg);
}

.menu-lateral-topo p {
  font-size: var(--tam-caption);
  opacity: 0.8;
  margin-bottom: 2px;
}

.menu-lateral-topo h2 {
  font-size: var(--tam-titulo-lg);
}

.menu-lateral-acao-auth {
  margin-top: var(--esp-sm);
  padding: 6px 14px;
  font-size: var(--tam-caption);
  font-weight: 600;
  color: var(--cor-paper);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  cursor: pointer;
}

.menu-lateral-acao-auth:hover {
  background: rgba(255, 255, 255, 0.2);
}

.menu-lateral-links {
  display: flex;
  flex-direction: column;
  padding: var(--esp-sm) 0;
}

.menu-lateral-links a {
  padding: 14px var(--esp-md);
  font-weight: 600;
  font-size: var(--tam-corpo);
  color: var(--cor-texto);
  border-bottom: 1px solid var(--borda);
}

.nav-inferior a[aria-current="page"] {
  color: var(--cor-clay);
}

/* ===== Visualizador de Stories (eventos do dia, tela cheia) ===== */
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--cor-pine-escuro);
  display: flex;
  flex-direction: column;
}

.story-viewer[hidden] {
  display: none;
}

.story-progress {
  display: flex;
  gap: 4px;
  padding: calc(env(safe-area-inset-top) + 10px) var(--esp-md) 0;
}

.story-progress-segmento {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 239, 225, 0.3);
  overflow: hidden;
}

.story-progress-segmento.preenchido {
  background: var(--cor-paper);
}

.story-fechar {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  right: var(--esp-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 15, 10, 0.4);
  color: var(--cor-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  z-index: 2;
}
.story-fechar svg { width: 18px; height: 18px; }

.story-conteudo {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.story-slide {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.story-arte {
  flex: 1;
  background: var(--cor-clay);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: var(--esp-lg) var(--esp-md);
}

.story-info {
  color: var(--cor-paper);
}

.story-info .story-marca {
  font-size: var(--tam-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.story-info .story-titulo {
  font-family: var(--fonte-display);
  font-size: var(--tam-titulo-lg);
  margin: 4px 0 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.story-info .story-dado {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tam-caption);
  margin-top: 6px;
  opacity: 0.9;
}
.story-info .story-dado svg { width: 15px; height: 15px; flex-shrink: 0; }

.story-cta {
  width: auto;
  margin: var(--esp-md);
}

/* ===== Cabeçalho de perfil (Marca / Local) ===== */
.perfil-header {
  background: var(--bg-destaque);
  color: var(--texto-sobre-destaque);
  padding: var(--esp-xl) var(--esp-md) var(--esp-lg);
  border-radius: 0 0 var(--raio-card) var(--raio-card);
}

.perfil-header .rotulo-eyebrow { color: var(--cor-gold); }

.perfil-header h1 { margin-top: var(--esp-xs); }

.tag-categoria {
  display: inline-block;
  background: rgba(245, 239, 225, 0.15);
  padding: 4px 12px;
  border-radius: var(--raio-pilula);
  font-size: 12px;
  margin-top: var(--esp-sm);
  margin-right: 6px;
}

/* ===== Estado vazio ===== */
.estado-vazio {
  text-align: center;
  padding: var(--esp-xl) var(--esp-md);
  color: var(--cor-texto-suave);
}