/* =========================================================
   TOLZE · Camada de componente
   Fonte: bundle "TOLZE Design System 2", pasta /components.

   O bundle entrega os componentes como React com estilo inline. O app
   é uma página só de JS puro, então não há o que importar: o que vale
   ali é a ESPECIFICAÇÃO, e é ela que está traduzida aqui em classe CSS.
   Cada bloco abaixo corresponde a um arquivo .jsx, e os números são os
   dele — não arredondei nada, inclusive os 13.5px e as bordas de 1.5px.

   Duas correções conscientes em relação ao bundle, anotadas no ponto
   onde aparecem: o Alert.jsx escreve #dc2626 cru onde existe
   --tolze-danger, e o BottomNav.jsx escreve rgba(247,244,252) onde
   existe --tolze-bg. Cor solta dentro de um design system é justamente
   o que a camada de token existe para eliminar.

   Nada aqui é aplicado sozinho: são classes esperando uso. Acrescentar
   este arquivo não muda um pixel do que já está no ar.
   ========================================================= */

/* ═══════════ BOTÃO — components/core/Button.jsx ═══════════
   Três famílias de forma, e elas não são intercambiáveis:
   app  — botão de folha/formulário, raio 14, Inter 700
   web  — botão do site no desktop, raio 10, Plus Jakarta Sans 700
   pill — a ação pequena das linhas do Studio e dos cartões de ingresso */
.tlz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-weight:700; cursor:pointer; border:0;
  transition:background .15s, transform .1s, border-color .15s, opacity .15s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  /* padrão = forma "app" */
  border-radius:var(--tolze-r-md); padding:13px 18px;
  font-family:var(--tolze-font-body); font-size:14px;
}
.tlz-btn:active{ transform:scale(.97); }
.tlz-btn[disabled], .tlz-btn:disabled{ cursor:not-allowed; opacity:.4; }
.tlz-btn--block{ display:flex; width:100%; }

/* Formas */
.tlz-btn--web{
  border-radius:var(--tolze-r-sm); padding:11px 20px;
  font-family:var(--tolze-font-display); font-size:13.5px; letter-spacing:-.01em;
}
.tlz-btn--pill{
  border-radius:var(--tolze-r-pill); padding:9px 15px;
  font-family:var(--tolze-font-body); font-size:12.5px;
}

/* Tamanhos — dependem da forma, por isso o par */
.tlz-btn--sm{ padding:10px 14px; font-size:13px; }
.tlz-btn--lg{ padding:15px 20px; font-size:15px; }
.tlz-btn--web.tlz-btn--sm{ padding:9px 16px;  font-size:12.5px; }
.tlz-btn--web.tlz-btn--lg{ padding:16px 34px; font-size:15.5px; border-radius:var(--tolze-r-md); }
.tlz-btn--pill.tlz-btn--sm{ padding:7px 12px;  font-size:11px; }
.tlz-btn--pill.tlz-btn--lg{ padding:11px 22px; font-size:13.5px; }

/* Variantes */
.tlz-btn--primary{
  background:var(--tolze-primary); color:var(--tolze-on-primary);
  box-shadow:var(--tolze-shadow-primary);
}
.tlz-btn--primary:hover{ background:var(--tolze-primary-hover); }
/* A régua âmbar embaixo é a assinatura da marca no CTA principal do app.
   Ela é o "3%": se aparecer em todo botão, deixa de significar. */
.tlz-btn--amber-rule{
  background:var(--tolze-primary); color:var(--tolze-on-primary);
  border-bottom:2.5px solid var(--tolze-gold);
  box-shadow:0 4px 20px rgba(71,0,133,.3);
}
.tlz-btn--amber-rule:hover{ background:var(--tolze-primary-hover); }
.tlz-btn--amber{
  background:linear-gradient(135deg,var(--tolze-gold),var(--tolze-gold-2));
  color:#fff; box-shadow:var(--tolze-shadow-amber);
}
.tlz-btn--ink{ background:var(--tolze-text); color:var(--tolze-surface); }
.tlz-btn--ghost{
  background:var(--tolze-surface-2); color:var(--tolze-text);
  border:1.5px solid var(--tolze-border-2);
}
.tlz-btn--ghost:hover{ border-color:var(--tolze-primary); }
.tlz-btn--quiet{
  background:var(--tolze-surface); color:var(--tolze-primary);
  border:1px solid var(--tolze-border-2);
}
.tlz-btn--quiet:hover{ border-color:var(--tolze-primary); }
.tlz-btn--danger{
  background:var(--tolze-surface); color:var(--tolze-danger);
  border:1px solid rgba(198,42,47,.3);
}

/* ═══════════ CARTÃO — components/core/Card.jsx ═══════════
   Três elevações, e elas também não são intercambiáveis:
   flat   — borda de fio de cabelo, sem sombra. Painéis do Studio.
   raised — borda 1.5px + shadow-1. Os cartões dentro do app.
   float  — shadow-2. O que flutua sobre o conteúdo: folha, ingresso-herói. */
.tlz-card{
  background:var(--tolze-surface); border-radius:var(--tolze-r-md);
  padding:16px; display:block;
  border:1px solid var(--tolze-border); box-shadow:none;
}
.tlz-card--raised{ border-width:1.5px; box-shadow:var(--tolze-shadow-1); }
.tlz-card--float{ box-shadow:var(--tolze-shadow-2); }
.tlz-card--sm{ border-radius:var(--tolze-r-sm); }
.tlz-card--lg{ border-radius:var(--tolze-r-lg); }
.tlz-card--xl{ border-radius:var(--tolze-r-xl); }

/* Cartão clicável: vira <button>, então precisa desfazer o que o
   navegador impõe a um botão — centralização e fonte própria. */
.tlz-card--tap{
  width:100%; text-align:left; cursor:pointer;
  font-family:inherit; font-size:inherit; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.tlz-card--tap:hover{
  border-color:rgba(71,0,133,.32);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(19,0,42,.35);
}

/* ═══════════ CHIP DE FILTRO — components/core/Chip.jsx ═══════════
   Quatro cascas. A do desktop ("web") liga em TINTA, não em roxo:
   uma fileira de chips roxos competiria com o botão primário ao lado. */
.tlz-chip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--tolze-font-body); white-space:nowrap; cursor:pointer;
  touch-action:manipulation; transition:.15s;
  background:var(--tolze-surface); color:var(--tolze-text-2);
  border:1.5px solid var(--tolze-border-2);
  height:36px; padding:6px 13px; font-size:13.5px; font-weight:600;
  border-radius:var(--tolze-r-pill);
}
.tlz-chip--map{ height:auto; padding:5px 12px; font-size:11px; font-weight:700; border-radius:20px; }
.tlz-chip--cat{ height:auto; padding:5px 14px; font-size:11px; font-weight:700; border-radius:20px; }
.tlz-chip--web{
  height:auto; padding:8px 16px; font-size:12.5px; font-weight:400;
  background:transparent; border-width:1px;
}
.tlz-chip[aria-pressed="true"], .tlz-chip.is-on{
  background:var(--tolze-primary); border-color:var(--tolze-primary); color:#fff;
}
.tlz-chip--cat[aria-pressed="true"], .tlz-chip--cat.is-on{ box-shadow:0 2px 12px rgba(71,0,133,.3); }
.tlz-chip--web[aria-pressed="true"], .tlz-chip--web.is-on{
  background:var(--tolze-text); border-color:var(--tolze-text);
  color:var(--tolze-surface); font-weight:500;
}

/* ═══════════ SELO DE STATUS — components/core/Pill.jsx ═══════════
   O mapa de tom é o do produto, não uma escala genérica:
   válido / ao vivo / esgotado / usado / estornado / últimos ingressos. */
.tlz-pill{
  flex:none; display:inline-block;
  font-family:var(--tolze-font-mono); font-weight:700; text-transform:uppercase;
  border-radius:var(--tolze-r-pill); white-space:nowrap;
  font-size:9px; padding:4px 8px; letter-spacing:.1em;
  background:var(--tolze-surface-2); color:var(--tolze-text-2);
  border:1px solid var(--tolze-border-2);
}
.tlz-pill--xs{ font-size:8.5px; padding:4px 8px; }
.tlz-pill--md{ font-size:9.5px; padding:5px 10px; }
/* mono=false: o selo passa a ser lido como palavra, não como etiqueta */
.tlz-pill--text{ font-family:var(--tolze-font-body); text-transform:none; }

.tlz-pill--valid{  background:var(--tolze-chip-ok-bg);   color:var(--tolze-chip-ok-fg);   border-color:var(--tolze-chip-ok-bd); }
.tlz-pill--warn{   background:var(--tolze-chip-warn-bg); color:var(--tolze-chip-warn-fg); border-color:var(--tolze-chip-warn-bd); }
.tlz-pill--danger{ background:var(--tolze-chip-bad-bg);  color:var(--tolze-chip-bad-fg);  border-color:var(--tolze-chip-bad-bd); }
.tlz-pill--used{   background:var(--tolze-surface-2);    color:var(--tolze-text-3);       border-color:var(--tolze-border); }
.tlz-pill--primary{background:var(--tolze-primary-soft); color:var(--tolze-on-soft);      border-color:transparent; }
/* Sobre a capa do evento, onde não há superfície: o fundo escuro é o
   que garante o contraste do texto branco em cima de foto qualquer. */
.tlz-pill--on-dark{ background:rgba(12,3,24,.72); color:#fff; border-color:transparent; }

/* ═══════════ OVERLINE — components/core/Eyebrow.jsx ═══════════
   O .tolze-eyebrow do tolze-tokens.css já é o tamanho md. Aqui entram
   os outros dois e os tons, que hoje são escritos em style inline. */
.tolze-eyebrow.tlz-eb--sm{ font-size:9.5px; letter-spacing:.14em; }
.tolze-eyebrow.tlz-eb--lg{ font-size:11px;  letter-spacing:.18em; }
.tolze-eyebrow.tlz-eb--primary{ color:var(--tolze-primary); }
.tolze-eyebrow.tlz-eb--gold{    color:var(--tolze-gold-text); }
.tolze-eyebrow.tlz-eb--on-dark{ color:rgba(255,255,255,.92); }

/* ═══════════ SEGMENTADO — components/core/Segmented.jsx ═══════════ */
.tlz-seg{
  display:inline-flex; background:var(--tolze-surface-2);
  border:1px solid var(--tolze-border-2); border-radius:var(--tolze-r-sm); padding:3px;
}
.tlz-seg > button{
  font-family:var(--tolze-font-body); font-size:12.5px; padding:7px 16px;
  border-radius:8px; border:0; cursor:pointer; white-space:nowrap;
  background:transparent; color:var(--tolze-text-2);
}
.tlz-seg > button[aria-pressed="true"], .tlz-seg > button.is-on{
  background:var(--tolze-primary-soft); color:var(--tolze-text);
}

/* ═══════════ BOTÃO DE ÍCONE — components/core/IconButton.jsx ═══════════ */
.tlz-iconbtn{
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s; touch-action:manipulation;
  background:var(--tolze-surface); color:var(--tolze-text);
  border-radius:50%; border:1.5px solid var(--tolze-border-2);
  box-shadow:var(--tolze-shadow-1);
}
.tlz-iconbtn--square{ border-radius:11px; }
.tlz-iconbtn--web{ border-radius:var(--tolze-r-sm); border-width:1px; box-shadow:none; }
/* Cabeçalho do feed: sem borda, preenche no hover. Os 44px são o alvo
   mínimo de toque — abaixo disso o dedo erra. */
.tlz-iconbtn--bare{
  width:var(--tolze-tap); height:var(--tolze-tap);
  border:0; background:transparent; color:var(--tolze-text-2);
  border-radius:var(--tolze-r-pill); box-shadow:none;
}
.tlz-iconbtn--bare:hover{ background:var(--tolze-surface-2); color:var(--tolze-text); }
.tlz-iconbtn--table{
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--tolze-border-2); color:var(--tolze-text-2); box-shadow:none;
}

/* ═══════════ VAZIO — components/core/EmptyState.jsx ═══════════ */
.tlz-empty{
  text-align:center; padding:40px 22px;
  color:var(--tolze-text-2); font-size:13px; line-height:1.6;
}
.tlz-empty > b{
  display:block; font-family:var(--tolze-font-display);
  font-size:16px; font-weight:800; letter-spacing:-.02em;
  color:var(--tolze-text); margin-bottom:6px;
}
.tlz-empty > div{ max-width:380px; margin:0 auto; }
.tlz-empty--web{
  padding:56px 24px; background:var(--tolze-surface);
  border:1px solid var(--tolze-border); border-radius:var(--tolze-r-lg);
}
.tlz-empty--web > b{ font-size:20px; }

/* ═══════════ PROGRESSO — components/core/ProgressBar.jsx ═══════════ */
.tlz-progress{
  height:7px; border-radius:var(--tolze-r-pill);
  background:var(--tolze-surface-3); overflow:hidden;
}
.tlz-progress > i{
  display:block; height:100%; width:0;
  background:var(--tolze-primary); border-radius:var(--tolze-r-pill);
  transition:width .3s;
}
.tlz-progress--gold > i{    background:var(--tolze-gold); }
.tlz-progress--success > i{ background:var(--tolze-success); }

/* ═══════════ ALERTA — components/data/Alert.jsx ═══════════
   A régua da esquerda é quem carrega a urgência: âmbar = resolva hoje,
   vermelho = resolva agora. */
.tlz-alert{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--tolze-surface); border:1px solid var(--tolze-border);
  border-left:3px solid var(--tolze-gold); border-radius:12px; padding:13px 14px;
}
/* O bundle escreve #dc2626 aqui. Trocado por --tolze-danger: é a mesma
   intenção, e uma cor crua dentro do sistema volta a divergir na
   primeira vez que alguém acertar o vermelho num arquivo só. */
.tlz-alert--urgent{ border-left-color:var(--tolze-danger); }
.tlz-alert--info{   border-left-color:var(--tolze-primary); }
.tlz-alert__body{ flex:1; min-width:0; }
.tlz-alert__body > b{ display:block; font-size:13px; font-weight:700; color:var(--tolze-text); line-height:1.4; }
.tlz-alert__body > span{ display:block; font-size:12px; color:var(--tolze-text-2); line-height:1.5; margin-top:3px; }
.tlz-alert__action{ flex:none; align-self:center; }

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion:reduce){
  .tlz-btn, .tlz-card--tap, .tlz-chip, .tlz-iconbtn, .tlz-progress > i{
    transition:none;
  }
  .tlz-btn:active, .tlz-card--tap:hover{ transform:none; }
}