/* ============================================================================
   ticket-paper.css — ESGOTOU · TEMA "PAPEL DE INGRESSO"
   ----------------------------------------------------------------------------
   Substitui o antigo luxe.css ("Obsidian & Ember" — tema escuro, com brilho
   e grão de textura). O usuário achou o visual anterior carregado e confuso;
   este redesign tem um objetivo simples: bonito, limpo, organizado, fácil de
   entender. Camada 100% ADITIVA (mesmo princípio do arquivo antigo) — não
   altera nenhuma regra de funcionalidade/estrutura HTML/JS, só reveste a
   marca via variáveis + um punhado de acréscimos pontuais.

   Direção:
   - Fundo claro "papel de ingresso" (kraft/creme quente) com cartões brancos
     — reforça literalmente o produto (ingresso de papel), não é um clichê
     genérico: a tipografia e a cor de destaque fogem do padrão usual.
   - Um único acento de cor com convicção (dourado de bilheteria), roxo como
     secundário/premium — nada de gradientes múltiplos ou textura de ruído.
   - Tipografia: Sora continua no comando da interface densa (nav, botões,
     dados) — precisão e legibilidade em telas pequenas. Fraunces (serifada)
     aparece só nos títulos de destaque (hero, nome do evento) — carisma sem
     comprometer a leitura de dado denso. JetBrains Mono nos preços/valores —
     reforça a sensação de "dado verificado", apropriado a um marketplace com
     proteção por escrow.
   - Assinatura: cada card de evento é uma via de ingresso de verdade — a
     borda entre a capa e as informações tem a perfuração picotada clássica
     do talão de ingresso, e a imagem principal da tela de detalhe ganha as
     reentrâncias semicirculares dos dois lados, como o rasgo de retirada de
     uma entrada física.
   ============================================================================ */

:root{
  /* Tinta — grafite quente (nunca preto puro, nunca frio) */
  --ink:#1B1720;--ink2:#3A3442;--ink3:#615B68;--ink4:#767087;

  /* Papel — bege de talão de ingresso + cartão branco */
  --bg:#F7F3EA;--bg2:#FFFFFF;--bg3:#EFEAE0;--bg4:#E3DCCB;

  --bdr:rgba(27,23,32,.09);--bdr2:rgba(27,23,32,.15);

  /* Dourado de bilheteria — acento único, com convicção, sem brilho/glow */
  --acc:#C1790C;--acc2:#95600A;--acc-bg:#FBF0D9;--acc-bdr:#E8BE72;

  /* Semânticos — mantidos do tema original (já auditados p/ contraste AA) */
  --grn:#0A7A35;--grn-bg:#EDFAF3;--grn-bdr:#7FD9A5;
  --amb:#8A6000;--amb-bg:#FFF8E0;--amb-bdr:#F0CD6A;
  --red:#B82418;--red-bg:#FFF0EE;--red-bdr:#F2A89E;
  --blu:#0E44A8;--blu-bg:#EBF2FF;--blu-bdr:#96B8F5;
  /* Roxo — secundário/premium, levemente refinado */
  --vlt:#6E4CB8;--vlt-bg:#F1ECFB;--vlt-bdr:#CBB8ED;
  --teal:#0A7A6A;--teal-bg:#E8FAF7;--teal-bdr:#7FD9CF;

  /* Tipografia de destaque */
  --display:'Fraunces',var(--sora),serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Sombras suaves — profundidade discreta, sem glow colorido */
  --shadow-card:0 1px 2px rgba(27,23,32,.05),0 10px 22px -14px rgba(27,23,32,.16);
  --shadow-panel:0 2px 4px rgba(27,23,32,.06),0 22px 46px -22px rgba(27,23,32,.24);
}

html,body{background:var(--bg)}
::selection{background:rgba(193,121,12,.25);color:var(--ink)}
.sa::-webkit-scrollbar-thumb{background:rgba(27,23,32,.12)}

/* ────────────────────────────────────────────────────────────────────────
   TIPOGRAFIA — a serifada só entra nos momentos de destaque, nunca na UI
   densa (listas, botões, chips continuam em Sora, para legibilidade).
   ──────────────────────────────────────────────────────────────────────── */
.hero-blk h1,.det-name,.ob-h{font-family:var(--display);font-weight:700;letter-spacing:-.012em}
.hero-blk h1 em{font-style:italic;color:var(--acc-lt,#D99B2E)}

/* Preços em mono — alinhamento tabular, leitura rápida de valor */
.ev-price,.eg-price,.oc-price,.sb-price,.hs-n,.lb-pk-n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* ────────────────────────────────────────────────────────────────────────
   CARDS — sombra suave e uniforme substitui a borda/realce anteriores
   sempre que o card já não tiver estilo próprio mais específico.
   ──────────────────────────────────────────────────────────────────────── */
.ev-card,.eg,.fc,.qa,.cmp-card,.mini-trust-card,.tc{box-shadow:var(--shadow-card)}
.hero-blk,.loy-banner{box-shadow:var(--shadow-panel)}

/* ────────────────────────────────────────────────────────────────────────
   ASSINATURA — perfuração de talão de ingresso.
   Linha picotada (círculos "vazados" na cor do fundo do app) separando a
   capa/imagem da faixa de informações — em TODO card de evento (leve) e,
   com reentrâncias laterais completas, na imagem principal da tela de
   detalhe (o momento de maior destaque, onde vale gastar o "ousado").
   ──────────────────────────────────────────────────────────────────────── */
.ev-placeholder,.eg-ph{position:relative;overflow:visible}
.ev-placeholder::after,.eg-ph::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:9px;z-index:3;
  background-image:radial-gradient(circle 3.5px, var(--bg) 3.4px, transparent 3.5px);
  background-size:14px 9px;background-position:0 -4.5px;background-repeat:repeat-x;
}

.det-ph{position:relative;overflow:visible}
.det-ph::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:11px;z-index:3;
  background-image:radial-gradient(circle 4.5px, var(--bg) 4.4px, transparent 4.5px);
  background-size:17px 11px;background-position:0 -5.5px;background-repeat:repeat-x;
}
/* Reentrâncias semicirculares nas laterais — o "rasgo" de retirada do talão */
.det-ph::before{
  content:'';position:absolute;bottom:-9px;left:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--bg);z-index:4;box-shadow:none;
}
.det-info::before{
  content:'';position:absolute;top:-9px;right:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--bg);z-index:4;
}
.det-info{position:relative}

/* ────────────────────────────────────────────────────────────────────────
   CORRIGIDO: capa real do evento (foto) ficou sem estilo nenhum depois que
   o redesign trocou luxe.css (tema escuro, removido) por este arquivo — a
   tag <img class="ev-cover-img"> gerada por coverImgTag()/app.js existia,
   mas sem CSS ela renderizava no tamanho natural da foto, quebrando o
   layout do card/faixa assim que algum evento ganhasse uma capa real
   (hoje nenhum tem — todos com img:null — por isso nunca apareceu em tela).

   object-fit:contain (a pedido do usuário) em vez de cover: mostra a foto
   inteira, sem cortar nada, centralizada — sobra um respiro nas laterais
   ou em cima/baixo quando a proporção da foto não bate exatamente com a
   caixa, preenchido pelo fundo --bg3 (neutro, combina com o tema Papel de
   Ingresso). O ícone de fallback (♦/ticket) some via .has-cover quando a
   imagem carrega (classe adicionada por wireCoverImgs em app.js).
   ──────────────────────────────────────────────────────────────────────── */
.ev-placeholder img.ev-cover-img,.eg-ph img.ev-cover-img,.det-ph img.ev-cover-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0;
  background:var(--bg3);
}
.ev-placeholder.has-cover i,.eg-ph.has-cover i,.det-ph.has-cover i{display:none}

/* ────────────────────────────────────────────────────────────────────────
   Pequenos ajustes de clareza/hierarquia — nada decorativo, só legibilidade.
   ──────────────────────────────────────────────────────────────────────── */
.sec-hdr h2{color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink)}
.hero-sub{color:rgba(255,255,255,.62)}