/* ============================================================
   Naq Tickets — Design tokens (gerado a partir do design system)
   Arquivo único para uso direto via <link> em qualquer página,
   React ou não. Não editar à mão — fonte de verdade é o projeto
   Claude Design "Naq Tickets Design System".
   ============================================================ */

/* ── Fontes ─────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Fascinate&family=Raleway:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap");

:root{
  --font-display:"Fascinate",'Trebuchet MS',cursive; /* logo + raros acentos de display */
  --font-ui:"Raleway",system-ui,sans-serif;          /* títulos, botões, labels */
  --font-body:"Open Sans",system-ui,sans-serif;      /* corpo de texto */
}

/* ── Paleta base — quatro valores, nada além disso ─────────── */
:root{
  --ink:#0A0A0A;
  --paper:#FCFCFC;
  --lime:#D4F817;
  --red:#FF0000;

  --ink-70:rgba(10,10,10,.70);
  --ink-55:rgba(10,10,10,.55);
  /* Texto apagado sobre papel: .55 fica em 4,36:1, abaixo do mínimo AA.
     .60 sobe para 5,19:1 sem mudar a leitura da hierarquia. */
  --ink-60:rgba(10,10,10,.60);
  --ink-30:rgba(10,10,10,.30);
  --ink-14:rgba(10,10,10,.14);
  --ink-06:rgba(10,10,10,.06);

  --paper-70:rgba(252,252,252,.70);
  --paper-55:rgba(252,252,252,.55);
  --paper-30:rgba(252,252,252,.30);
  --paper-18:rgba(252,252,252,.18);
  --paper-08:rgba(252,252,252,.08);

  --lime-dim:#B9DA0E;
  /* Grafite: a área do produtor, entre o admin (quase preto) e o site
     público (papel). Mantém texto claro, então os componentes escuros
     continuam válidos ali. */
  --slate:#232327;
  --slate-raised:#2C2C31;
  --lime-16:rgba(212,248,23,.16);
  --red-12:rgba(255,0,0,.12);
}

/* ── Tipografia ─────────────────────────────────────────── */
:root{
  --text-3xs:11px; --text-2xs:12px; --text-xs:13px; --text-sm:14px; --text-md:16px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px; --text-3xl:36px; --text-4xl:48px;
  --text-5xl:64px; --text-6xl:88px; --text-display:120px;

  --leading-tight:0.98; --leading-snug:1.14; --leading-normal:1.5; --leading-loose:1.65;

  --weight-body:400; --weight-ui:500; --weight-strong:600; --weight-heavy:700;

  --tracking-display:-0.03em; --tracking-tight:-0.015em; --tracking-normal:0em;
  --tracking-wide:0.06em; --tracking-caps:0.16em;
}

/* ── Espaçamento ────────────────────────────────────────── */
:root{
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --space-40:160px;

  --gutter:24px; --page-max:1240px; --page-pad:32px; --section-y:112px;
}

/* ── Forma ──────────────────────────────────────────────── */
:root{
  --radius-0:0px; --radius-xs:8px; --radius-sm:12px; --radius-md:16px;
  --radius-lg:24px; --radius-xl:32px; --radius-pill:999px; --radius-circle:50%;

  --border-hair:1px; --border-thick:2px;
  --border-ink:1px solid var(--ink); --border-ink-soft:1px solid var(--ink-14);
  --border-paper:1px solid var(--paper); --border-paper-soft:1px solid var(--paper-18);

  --shadow-none:none;
  --shadow-hard:4px 4px 0 var(--ink);
  --shadow-hard-sm:2px 2px 0 var(--ink);
  --shadow-hard-lime:4px 4px 0 var(--lime);
  --shadow-hard-paper:4px 4px 0 var(--paper);
  --shadow-focus:0 0 0 3px var(--lime);
  /* Anel de foco de campo pendente/inválido — espelha o lime. */
  --shadow-focus-error:0 0 0 3px var(--red);
}

/* ── Movimento ──────────────────────────────────────────── */
:root{
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.5,0,.2,1);
  --dur-instant:90ms; --dur-fast:160ms; --dur-base:240ms; --dur-slow:480ms; --dur-marquee:26s;
  --press-shift:2px;
}

/* ── Aliases semânticos ─────────────────────────────────── */
:root{
  --surface-page:var(--paper); --surface-card:var(--paper); --surface-raised:var(--paper);
  --surface-inverse:var(--ink); --surface-accent:var(--lime);
  /* Preenchimento de controle desativado. Precisa de um valor por escopo:
     tinta sobre papel some no painel escuro, e vice-versa. */
  --surface-quiet:var(--ink-06);

  --text-title:var(--ink); --text-body:var(--ink-70); --text-muted:var(--ink-60);
  --text-faint:var(--ink-30);
  --text-on-accent:var(--ink); --text-on-inverse:var(--paper);
  --text-link:var(--ink); --text-link-hover:var(--red);

  --border-default:var(--ink-14); --border-strong:var(--ink); --focus-ring:var(--shadow-focus);

  --accent:var(--lime); --accent-quiet:var(--lime-16); --brand-detail:var(--red);

  --price:var(--ink); --sold-out:var(--ink-30); --live:var(--red);
}

.on-ink,[data-surface="ink"]{
  --surface-page:var(--ink); --surface-card:var(--ink); --surface-raised:var(--ink);
  --surface-inverse:var(--paper);
  --surface-quiet:var(--paper-08);
  --text-title:var(--paper); --text-body:var(--paper-70); --text-muted:var(--paper-55);
  --text-faint:var(--paper-30);
  --text-on-inverse:var(--ink); --text-on-accent:var(--ink);
  --text-link:var(--paper); --text-link-hover:var(--lime);
  --border-default:var(--paper-18); --border-strong:var(--paper);
  --price:var(--paper); --sold-out:var(--paper-30);
  color:var(--text-title); background:var(--surface-page);
}

/* Grafite — área do produtor. Mesma família de texto do .on-ink (claro sobre
   escuro), só que sobre uma superfície mais alta. Assim os componentes já
   escritos para o escuro funcionam sem alteração, e as três áreas internas
   ficam distinguíveis à primeira vista: admin quase preto, produtor grafite,
   comprador papel. */
.on-slate,[data-surface="slate"]{
  --surface-page:var(--slate); --surface-card:var(--slate); --surface-raised:var(--slate-raised);
  --surface-inverse:var(--paper);
  --surface-quiet:var(--paper-08);
  --text-title:var(--paper); --text-body:var(--paper-70); --text-muted:var(--paper-55);
  --text-faint:var(--paper-30);
  --text-on-inverse:var(--ink); --text-on-accent:var(--ink);
  --text-link:var(--paper); --text-link-hover:var(--lime);
  --border-default:var(--paper-18); --border-strong:var(--paper);
  --price:var(--paper); --sold-out:var(--paper-30);
  color:var(--text-title); background:var(--surface-page);
}

/* Contra-escopo do .on-ink: uma superfície de papel dentro de uma área escura
   (o diálogo dentro do painel, por exemplo) precisa devolver os tokens
   semânticos ao valor claro — senão --text-title continua branco e o texto
   some no papel. */
.on-paper,[data-surface="paper"]{
  --surface-page:var(--paper); --surface-card:var(--paper); --surface-raised:var(--paper);
  --surface-inverse:var(--ink);
  --surface-quiet:var(--ink-06);
  --text-title:var(--ink); --text-body:var(--ink-70); --text-muted:var(--ink-60);
  --text-faint:var(--ink-30);
  --text-on-inverse:var(--paper); --text-on-accent:var(--ink);
  --text-link:var(--ink); --text-link-hover:var(--red);
  --border-default:var(--ink-14); --border-strong:var(--ink);
  --price:var(--ink); --sold-out:var(--ink-30);
  color:var(--text-title);
}

/* Realce do lime sobre papel. Lime cru em fundo claro dá ~1,1:1 — some.
   A tarja escura devolve o contraste e mantém a cor da marca; os cantos
   desiguais e a inclinação mínima evitam o ar de etiqueta de sistema.
   Em superfície escura o lime já se vira sozinho, então a tarja sai. */
.naq-lime-mark{
  display:inline-block;background:var(--ink);color:var(--lime);
  padding:3px 10px 4px;border-radius:12px 3px 10px 4px;
  transform:rotate(-.7deg);transform-origin:left center;
}
.on-ink .naq-lime-mark,.on-slate .naq-lime-mark{
  background:transparent;padding:0;border-radius:0;transform:none;
}
/* A marca é preta no arquivo. Superfície escura precisa dela invertida;
   superfície clara, não. Fixar invert(1) no elemento fazia a logo sumir
   quando a área do comprador virou clara. */
.naq-mark{filter:none}
.on-ink .naq-mark,.on-slate .naq-mark{filter:invert(1)}

/* O popup do <select> nativo não herda tokens: no escuro o navegador desenha
   as opções com o fundo do sistema e o texto some. */
.on-ink select option,.on-ink select optgroup{background:#0A0A0A;color:#FCFCFC}
.on-slate select option,.on-slate select optgroup{background:#232327;color:#FCFCFC}

/* ── Base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-title);font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{font-family:var(--font-ui);font-weight:var(--weight-strong);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);margin:0}
h1{font-size:var(--text-4xl);letter-spacing:var(--tracking-display);line-height:var(--leading-tight)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}

.naq-eyebrow{font-family:var(--font-ui);font-weight:var(--weight-strong);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.naq-display{font-family:var(--font-display);font-weight:400;letter-spacing:0;line-height:.95}
.naq-page{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-pad)}
.naq-perforation{height:1px;background:repeating-linear-gradient(90deg,var(--border-strong) 0 6px,transparent 6px 12px)}

/* ════════════════════════════════════════════════════════════
   RESPONSIVO
   O site é acessado majoritariamente no celular. Estas regras
   valem para o site público e para as três áreas internas.
   ════════════════════════════════════════════════════════════ */

/* Nada pode empurrar a página para os lados.
   `clip` em vez de `hidden`: hidden faz de html/body um contêiner de rolagem
   e quebra o position:sticky do cabeçalho. Quem não conhece clip cai no
   hidden da primeira regra. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img, svg, video { max-width: 100%; }

/* Carrossel do hero — variáveis que encolhem junto com a tela. */
:root { --hero-card-w: min(58vw, 700px); --hero-h: 420px; }

/* ── Site público ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --page-pad: 24px; --section-y: 72px; }
  :root { --hero-card-w: min(70vw, 560px); --hero-h: 340px; }
  .naq-header-search { display: none !important; }
}

/* Botão do menu do celular: só existe abaixo de 720px. */
.naq-menu-btn { display: none; }

@media (max-width: 720px) {
  /* 16px deixava cartão com borda de tinta e bloco escuro colados na
     borda da tela. 20px respira sem perder largura útil num aparelho
     de 390px. Vale para o site inteiro, para nenhuma página destoar. */
  :root { --page-pad: 20px; --section-y: 56px; }
  :root { --hero-card-w: 78vw; --hero-h: 232px; }

  /* Topo: só logo + ações. Nav e busca saem da barra e voltam no menu. */
  .naq-header { height: 60px !important; gap: 12px !important; }
  .naq-header-nav { display: none !important; }
  .naq-header-search { display: none !important; }
  .naq-header img { height: 20px !important; }

  .naq-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    border: 1px solid var(--paper-30); border-radius: var(--radius-pill);
    background: transparent; color: var(--paper);
  }
  .naq-menu-btn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
  /* Abaixo da barra de 60px; o fundo escurecido fecha ao toque. */
  .naq-menu-backdrop { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 29; background: rgba(10,10,10,.55); }
  .naq-menu {
    display: flex; flex-direction: column; gap: 4px; max-height: 100%; overflow-y: auto;
    padding: 20px var(--page-pad) 28px; background: var(--ink); color: var(--paper);
    border-bottom: 1px solid var(--paper-18);
  }
  .naq-menu-search { margin-bottom: 12px; }
  .naq-menu-link {
    display: block; padding: 14px 0; border: none !important; border-bottom: 1px solid var(--paper-08) !important;
    font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: 15px;
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--paper-70);
  }
  .naq-menu-link:hover, .naq-menu-link.is-active { color: var(--lime); }
  .naq-menu-sep { height: 12px; }

  /* Rodapé em coluna única. */
  .naq-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px var(--page-pad) 28px !important;
  }
  .naq-footer-bottom { padding: 16px var(--page-pad) 32px !important; }

  /* Grades do conteúdo público empilham. */
  .naq-grid-3, .naq-grid-2 { grid-template-columns: 1fr !important; }

  /* Na página do evento, o grid empilha na ordem do documento e a
     descrição ficava antes da compra. Quem abre o evento no celular quer
     preço e lote primeiro; o texto vem depois. A ordem no desktop não
     muda, porque lá as duas colunas ficam lado a lado. */
  .naq-evento-compra { order: -1; position: static !important; }
  .naq-cta { flex-direction: column !important; align-items: flex-start !important; }
  .naq-cta > * { width: 100%; }
}

@media (max-width: 480px) {
  :root { --hero-card-w: 84vw; --hero-h: 196px; }
}

/* ── Áreas internas (cliente / produtor / admin) ──────────── */
.naq-conta .naq-sidebar-backdrop { display: none; }

@media (max-width: 1180px) {
  .naq-conta .naq-split { grid-template-columns: 320px 1fr !important; }
  .naq-conta .naq-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .naq-conta .naq-2col { grid-template-columns: 1fr !important; }
  .naq-conta .naq-meta-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .naq-conta .naq-account-grid { grid-template-columns: 1fr !important; }
  .naq-conta .naq-transfer-panel {
    position: fixed; inset: 0 0 0 auto; z-index: 60;
    width: min(396px, 100vw) !important; flex: none !important;
  }
}

@media (max-width: 860px) {
  /* Sidebar sai do fluxo e desliza por cima. */
  .naq-conta .naq-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(288px, 86vw) !important; flex: none !important;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .naq-conta .naq-sidebar.is-open { transform: translateX(0); }
  .naq-conta .naq-sidebar-backdrop { display: block; }
  .naq-conta .naq-sidebar-toggle { display: inline-flex !important; }

  /* Lista e detalhe empilham: o detalhe vira a tela cheia abaixo da lista. */
  .naq-conta .naq-split { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
  .naq-conta .naq-split-list { border-right: none !important; border-bottom: 1px solid var(--paper-18); max-height: 45vh; }

  /* Densidade menor: o padrão de 32px come a tela num aparelho de 390px. */
  .naq-conta [style*="padding: 32px"] { padding: 20px var(--page-pad) !important; }
  .naq-conta .naq-detail-body { padding: 20px var(--page-pad) !important; }
  .naq-conta .naq-detail-title { font-size: 26px !important; }
  .naq-conta .naq-detail-actions > * { flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .naq-conta .naq-kpi-row { grid-template-columns: 1fr !important; }
  .naq-conta .naq-meta-grid { grid-template-columns: 1fr !important; }
  .naq-form-2col { grid-template-columns: 1fr !important; }
  .naq-conta .naq-transfer-panel { width: 100vw !important; }
}

/* Alvos de toque: nada abaixo de 40px de altura em tela sensível. */
@media (pointer: coarse) {
  button, [role="tab"], a[role="menuitem"] { min-height: 40px; }
}

/* Passos do checkout: no mobile o conector some e viram chips. */
@media (max-width: 560px) {
  .naq-steps { gap: 10px !important; margin-bottom: 24px !important; }
  .naq-steps > div > span:last-child:not(:first-child) { display: none; }
}

/* TicketStub: o talão de 168px + conteúdo não cabe em 390px. */
@media (max-width: 560px) {
  .naq-conta [style*="width: 168px"] { width: 128px !important; padding: 16px !important; }
}


/* Catálogo: a coluna de filtros de 260px não cabe ao lado da grade num
   aparelho de 390px — os filtros sobem para cima da lista. */
@media (max-width: 860px) {
  .naq-catalog { grid-template-columns: 1fr !important; gap: 24px !important; }
  .naq-catalog-cats { flex-direction: row !important; flex-wrap: wrap !important; gap: 12px 20px !important; }
}

/* Altura das áreas internas: 100vh no celular conta a barra de endereço que
   some ao rolar, então o rodapé da tela fica embaixo do chrome do navegador e
   não dá para alcançar. dvh acompanha a altura de fato visível. */
@supports (height: 100dvh) {
  .naq-conta { height: 100dvh !important; }
}

/* Barra superior das áreas internas: num aparelho de 390px o botão de menu +
   "produtor / Formas de pagamento" + ações não cabem numa linha e empurram o
   app inteiro para os lados. O título trunca; a palavra da área continua
   visível porque é ela que distingue as áreas (roles-rules.md §3). */
@media (max-width: 640px) {
  .naq-conta .naq-topbar { gap: 8px !important; padding: 0 var(--page-pad) !important; }
  .naq-conta .naq-topbar-area { font-size: 11px !important; }
}

/* Estados vazios e blocos com 48px de folga passam a 24px no celular. */
@media (max-width: 640px) {
  .naq-conta [style*="padding: 48px"] { padding: 32px var(--page-pad) !important; }
}

/* Formulários das áreas internas: as grades de campo colapsam antes do resto,
   porque um campo de 110px ao lado de dois de 1fr fica ilegível bem antes de
   a tela virar celular. */
@media (max-width: 900px) {
  .naq-conta .naq-form-3col { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 680px) {
  .naq-conta .naq-form-2col,
  .naq-conta .naq-form-3col { grid-template-columns: 1fr !important; }
  .naq-conta .naq-editor-body { padding: 20px var(--page-pad) !important; }
  .naq-conta .naq-editor-tabs { padding: 0 var(--page-pad) !important; }
}

/* Resumo dos lotes: some da lateral e vai para baixo do formulário quando não
   cabem as duas colunas. Sticky só faz sentido enquanto ele está ao lado. */
@media (max-width: 1100px) {
  .naq-conta .naq-lots-split { grid-template-columns: 1fr !important; }
  .naq-conta .naq-lots-summary { position: static !important; }
}

/* ── Rolagem das telas internas ──────────────────────────────
   O mínimo automático de um item flex é o tamanho do conteúdo, o que impede
   que ele encolha — mas essa proteção some quando o item tem `overflow`
   diferente de `visible`. Uma caixa com `overflow: hidden` (usada para
   arredondar bordas) então se achata até caber e corta o que tem dentro, e a
   tela nunca transborda para gerar rolagem. Foi o que escondia os cargos do
   organograma. Filho direto de tela rolável não encolhe. */
.naq-conta .naq-view > * { flex-shrink: 0; }