/* ============================================================
Naq Tickets — Design tokens (gerado a partir do design system)
Arquivo único para uso direto via 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; }
}
/* Tablet: sem a busca, a barra ainda leva o nome do idioma por extenso;
espaços menores deixam os links numa linha só. */
@media (min-width: 721px) and (max-width: 1024px) {
.naq-header { gap: 20px !important; }
.naq-header-nav { gap: 16px !important; }
}
/* Vaga da barra nas páginas estáticas: reserva a altura (sem pulo ao montar)
e gruda no topo, como a barra das páginas React. */
.naq-header-slot { position: sticky; top: 0; z-index: 30; min-height: 77px; background: var(--ink); }
@media (max-width: 720px) { .naq-header-slot { min-height: 61px; } }
/* 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; }
/* Idioma: no celular sai da barra e vira esta fileira no fim do menu. */
.naq-lang-picker { display: none !important; }
.naq-menu-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.naq-menu-langs button {
height: 40px; padding: 0; cursor: pointer; border: 1px solid var(--paper-18); border-radius: var(--radius-sm);
background: transparent; color: var(--paper-70); font-family: var(--font-ui); font-weight: var(--weight-strong);
font-size: 13px; white-space: nowrap;
}
.naq-menu-langs button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
/* 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; }
/* ── Idioma ──────────────────────────────────────────────────────
Páginas de conteúdo estático (ajuda, termos, reembolso, privacidade)
trazem um bloco por idioma marcado com data-lang; só o do idioma ativo
aparece. O atributo data-naq-lang no vem do i18n-boot.js e nasce
"pt" no próprio HTML, então sem JavaScript fica o português. */
html[data-naq-lang="pt"] [data-lang]:not([data-lang="pt"]),
html[data-naq-lang="en"] [data-lang]:not([data-lang="en"]),
html[data-naq-lang="es"] [data-lang]:not([data-lang="es"]),
html[data-naq-lang="it"] [data-lang]:not([data-lang="it"]),
html[data-naq-lang="fr"] [data-lang]:not([data-lang="fr"]),
html[data-naq-lang="ru"] [data-lang]:not([data-lang="ru"]) { display: none !important; }
/* ── Dashboard dos painéis ─────────────────────────────────────────
A grade responde à largura do conteúdo (container query), não à da tela:
a mesma tela de 1440px tem ~1100px úteis com o menu lateral aberto.
Largo: saldo · mês · saúde / fluxo · assistente / movimentações · rosca ·
liberações. Médio: dois por linha. Estreito: um por linha. */
.naq-dash-wrap { container-type: inline-size; }
.naq-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.naq-dash > .d-saldo { grid-column: span 3; }
.naq-dash > .d-mes { grid-column: span 6; }
.naq-dash > .d-saude { grid-column: span 3; }
.naq-dash > .d-fluxo { grid-column: span 7; }
/* Admin: sem o card do assistente ao lado, o gráfico ocupa a linha. */
.naq-dash > .d-fluxo.d-cheio { grid-column: span 12; }
.naq-dash > .d-ia { grid-column: span 5; }
.naq-dash > .d-mov { grid-column: span 6; }
.naq-dash > .d-rosca { grid-column: span 3; }
.naq-dash > .d-lib { grid-column: span 3; }
@container (max-width: 1080px) {
.naq-dash > .d-saldo { grid-column: span 5; }
.naq-dash > .d-mes { grid-column: span 7; }
.naq-dash > .d-saude { grid-column: span 12; }
.naq-dash > .d-fluxo,
.naq-dash > .d-ia,
.naq-dash > .d-mov { grid-column: span 12; }
.naq-dash > .d-rosca,
.naq-dash > .d-lib { grid-column: span 6; }
}
@container (max-width: 760px) {
.naq-dash > * { grid-column: span 12 !important; }
}
@container (max-width: 560px) {
.naq-dash .naq-dash-tres { grid-template-columns: 1fr !important; }
}
/* Texto só para leitor de tela (a tabela por trás do gráfico). */
.naq-sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "Consultando os dados..." do assistente: os três pontos piscam em sequência. */
.naq-pensando span { animation: naq-pisca 1.2s infinite both; }
.naq-pensando span:nth-child(2) { animation-delay: .2s; }
.naq-pensando span:nth-child(3) { animation-delay: .4s; }
@keyframes naq-pisca { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .naq-pensando span { animation: none; } }
/* Barra do topo dos painéis: a busca some primeiro, depois o nome ao lado da
foto e o botão de ajuda (que segue no menu da conta). */
@media (max-width: 1100px) { .naq-conta .naq-topbar-busca { width: 220px !important; } }
@media (max-width: 960px) { .naq-conta .naq-topbar-busca { display: none !important; } }
@media (max-width: 720px) {
.naq-conta .naq-topbar-nome,
.naq-conta .naq-topbar-ajuda { display: none !important; }
}
@media (max-width: 480px) {
/* Lista de notificações ocupa a largura toda, presa abaixo da barra. */
.naq-notif-painel { position: fixed !important; left: 12px !important; right: 12px !important; top: 68px !important; width: auto !important; }
.naq-notif-popups { right: 12px !important; top: 68px !important; }
}
/* Sino no cabeçalho do site: na faixa de tablet a barra já está no limite
(links + idioma + conta); ali ele sai, e os pop-ups continuam chegando. */
@media (min-width: 721px) and (max-width: 1024px) { .naq-header-sino { display: none; } }
/* ── Assistente de IA flutuante (painel admin) ─────────────────────────
Botão no canto inferior direito e painel de conversa por cima de tudo —
inclusive diálogos (z 60), avisos (80) e pop-ups de notificação (90). */
.naq-ia-raiz { background: transparent !important; }
.naq-ia-lancador {
position: fixed; right: 24px; bottom: 24px; z-index: 96;
width: 60px; height: 60px; padding: 0; border: none; border-radius: 50%;
background: transparent; cursor: pointer;
}
.naq-ia-lancador:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.naq-ia-painel {
position: fixed; right: 24px; bottom: 96px; z-index: 97;
width: 400px; height: min(620px, calc(100dvh - 120px));
animation: naq-ia-abre .18s ease-out;
}
.naq-ia-botao {
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--paper-18); border-radius: 8px; background: transparent; color: var(--paper-70); cursor: pointer;
}
.naq-ia-botao:hover { color: var(--paper); background: var(--paper-08); }
/* O botão não pode esconder o fim das telas do admin. */
.naq-com-ia .naq-view { padding-bottom: 104px !important; }
/* Pulso: o orbe "respira" e solta duas ondas; mais rápido enquanto busca. */
.naq-ia-pulso { animation: naq-ia-respira 2.4s ease-in-out infinite; }
.naq-ia-pulso::before, .naq-ia-pulso::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--lime); pointer-events: none;
animation: naq-ia-onda 2.4s ease-out infinite;
}
.naq-ia-pulso::after { animation-delay: 1.2s; }
.naq-ia-pulso.naq-ia-ativo { animation-duration: 1s; }
.naq-ia-pulso.naq-ia-ativo::before, .naq-ia-pulso.naq-ia-ativo::after { animation-duration: 1.1s; }
.naq-ia-pulso.naq-ia-ativo::after { animation-delay: .55s; }
@keyframes naq-ia-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes naq-ia-onda { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.85); opacity: 0; } }
@keyframes naq-ia-abre { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
/* Busca em andamento: arco girando e brilho correndo pelo texto. */
.naq-ia-spinner { animation: naq-ia-gira .8s linear infinite; }
@keyframes naq-ia-gira { to { transform: rotate(360deg); } }
.naq-ia-shimmer {
background: linear-gradient(90deg, var(--paper-55) 0%, var(--paper-55) 35%, var(--lime) 50%, var(--paper-55) 65%, var(--paper-55) 100%);
background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
color: transparent; animation: naq-ia-brilho 1.6s linear infinite;
}
@keyframes naq-ia-brilho { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@media (max-width: 560px) {
.naq-ia-lancador { right: 16px; bottom: 16px; width: 52px; height: 52px; }
.naq-ia-lancador .naq-ia-orbe { width: 52px !important; height: 52px !important; }
.naq-ia-painel { left: 8px; right: 8px; width: auto; bottom: 80px; height: calc(100dvh - 150px); }
}
/* Movimento reduzido: sem pulso nem brilho; o arco segue girando devagar
(é o único sinal de que a busca está em andamento). */
@media (prefers-reduced-motion: reduce) {
.naq-ia-pulso, .naq-ia-pulso::before, .naq-ia-pulso::after, .naq-ia-painel { animation: none !important; }
.naq-ia-pulso::before, .naq-ia-pulso::after { opacity: 0; }
.naq-ia-shimmer { animation: none; color: var(--paper-70); background: none; }
.naq-ia-spinner { animation-duration: 2.4s; }
}
/* Criar evento: o resumo sai da lateral e vai para baixo do formulário
quando as duas colunas não cabem. */
@media (max-width: 1180px) {
.naq-conta .naq-criar-grid { grid-template-columns: 1fr !important; }
.naq-conta .naq-criar-resumo { position: static !important; }
}
.naq-ia-botao:disabled { opacity: .35; cursor: default; }
/* Meus eventos: evento cancelado fica lavado, quase apagado, sem evidência. */
.naq-evento-apagado { opacity: .38; filter: grayscale(1); transition: opacity var(--dur-fast) var(--ease-out); }
.naq-evento-apagado:hover, .naq-evento-apagado:focus-visible { opacity: .6; }
/* Quadros que respondem à largura da própria área, não à da tela.
Detalhe do evento (produtor): o painel divide a tela com a lista, então
numa tela de 1300px sobram ~600px para quatro quadros e "Comprador" passava
da borda. Admin: Relatórios e Promoções. O container fica só onde não há
nada com position: fixed dentro (diálogos e avisos flutuantes). No celular,
as regras de .naq-conta (mais específicas) continuam valendo.
Fileira de 4: 4 → 2 → 1. Fileira de 3 (.naq-kpi-3): 3 → 1, sem sobrar
um quadro sozinho na segunda linha. */
.naq-detalhe-corpo, .naq-area-resp { container: naq-area / inline-size; }
@container naq-area (max-width: 720px) {
.naq-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.naq-kpi-row.naq-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.naq-2col { grid-template-columns: minmax(0, 1fr) !important; }
}
@container naq-area (max-width: 520px) {
.naq-kpi-row.naq-kpi-3 { grid-template-columns: minmax(0, 1fr) !important; }
}
@container naq-area (max-width: 380px) {
.naq-kpi-row { grid-template-columns: minmax(0, 1fr) !important; }
}
/* ── Campos dos painéis internos (produtor, admin, Minha conta) ──────────
Borda de 2px, preenchimento próprio e sombra leve, um conjunto por tema.
Input/Select do design system e os campos feitos à mão leem --field-*
com o valor antigo como reserva: o site público não muda.
Contraste medido (WCAG 2.1): borda ≥ 3:1 com o fundo e com o
preenchimento (1.4.11); texto e placeholder ≥ 4,5:1 sobre o preenchimento.
produtor borda 4,8 / 3,8 · texto 12,0 · placeholder 5,2
admin borda 4,8 / 4,0 · texto 16,2 · placeholder 6,0
conta borda 4,9 / 4,5 · texto 17,5 · placeholder 5,3
No admin o fundo é quase preto e sombra escura some: lá ela é clara. */
.naq-conta, .naq-ia-raiz { --field-bw: 2px; }
.naq-conta.on-slate, .naq-conta .on-slate {
--field-bg: #34343B; --field-border: #8E8E96; --field-placeholder: #A8A8B0;
--field-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.naq-conta.on-ink, .naq-conta .on-ink, .naq-ia-raiz {
--field-bg: #1E1E22; --field-border: #7C7C84; --field-placeholder: #9A9AA2;
--field-shadow: 0 3px 10px -2px rgba(252, 252, 252, .10);
}
.naq-conta.on-paper, .naq-conta .on-paper {
--field-bg: #EEF1F5; --field-border: #6B6F76; --field-placeholder: #5E636B;
--field-shadow: 0 2px 6px rgba(10, 10, 10, .12);
}
.naq-conta input::placeholder, .naq-conta textarea::placeholder,
.naq-ia-raiz input::placeholder { color: var(--field-placeholder); opacity: 1; }
/* Índice do editor de evento: a lista sobe uma linha por seção; a que passou
esmaece enquanto sai por cima; as próximas ficam lavadas (55%, ≥ 4,5:1). */
.naq-indice-lista { transition: transform var(--dur-base) var(--ease-out); }
.naq-indice-lista > button { transition: opacity var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.naq-indice-passou { opacity: 0; pointer-events: none; }
.naq-indice-lavado:hover, .naq-indice-lavado:focus-visible { color: var(--paper) !important; }
.naq-indice-faixa { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
.naq-indice-lista, .naq-indice-lista > button { transition: none; }
}