/* Ignite Core GO · portal. Mundo Ignite: navy de fundo, ciano como sinal. */
:root {
  --ink-0: #05080f;   /* fundo */
  --ink-1: #0a101c;   /* superfície elevada */
  --ink-2: #111a2b;   /* campo / trilho */
  --ink-3: #1a2539;   /* hover de superfície */
  --line: rgba(148, 163, 184, 0.14);
  --line-2: rgba(148, 163, 184, 0.24);
  --text: #e8eef6;
  --text-2: #aab7c9;
  --text-3: #7f8ea4;
  --cyan: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-ink: #03141a;
  --cyan-wash: rgba(34, 211, 238, 0.1);
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 10px;
  --radius-lg: 16px;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-3) var(--ink-0); scrollbar-width: thin; }
body {
  margin: 0; background: var(--ink-0); color: var(--text); font-feature-settings: "calt" 0; /* Inter trocaria o x entre números por × */
  font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; caret-color: var(--cyan);
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(34, 211, 238, 0.32); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 10px; border: 2px solid var(--ink-0); }
[x-cloak] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: var(--cyan); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #67e8f9; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--display); color: var(--text); margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- moldura ---------- */
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.topnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 600 16px/1 var(--display); letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; flex: none; }
.brand > span { white-space: nowrap; }
.brand b { color: var(--cyan); font-weight: 700; }
.topnav nav { display: flex; align-items: center; gap: 6px; }
.navlink { color: var(--text-2); text-decoration: none; font-size: 14px; padding: 8px 12px; border-radius: 8px; transition: color .2s, background .2s; }
.navlink:hover { color: var(--text); background: var(--ink-1); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--body); padding: 14px 20px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .15s var(--ease-out), box-shadow .2s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary:disabled:not([aria-busy="true"]) { opacity: 1; background: var(--ink-2); color: var(--text-3); box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.lbl-short { display: none; }
@media (max-width: 560px) { .lbl-long { display: none; } .lbl-short { display: inline; } }
.btn-primary { background: var(--cyan); color: var(--cyan-ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
.btn-primary:hover:not(:disabled) { background: #67e8f9; color: var(--cyan-ink); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-quiet:hover:not(:disabled) { border-color: var(--cyan); color: var(--text); background: var(--cyan-wash); }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(248, 113, 113, .35); }
.btn-danger:hover:not(:disabled) { background: rgba(248, 113, 113, .08); border-color: var(--bad); }
.btn-sm { padding: 9px 14px; font-size: 14px; }
.btn-block { width: 100%; }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- formulários ---------- */
.field { display: grid; gap: 7px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--text-2); }
.field small { font-size: 13px; color: var(--text-3); }
.input, .select {
  width: 100%; font: 400 16px/1.3 var(--body); color: var(--text);
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 13px 14px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--text-3); }
.input:hover, .select:hover { border-color: rgba(148, 163, 184, .38); }
.input:focus, .select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); background: #0d1626; }
.input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, .15); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.check input { margin-top: 3px; accent-color: var(--cyan); width: 16px; height: 16px; flex: none; }
.check-bad { color: var(--text); }
.check-bad input { outline: 2px solid var(--bad); outline-offset: 2px; border-radius: 3px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* segmentado (forma de pagamento, planos) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; }
.seg button { font: 600 14px/1 var(--body); color: var(--text-2); background: transparent; border: 0; padding: 12px 10px; border-radius: 8px; cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--ink-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- avisos ---------- */
.note { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.5; border: 1px solid; }
.note-bad { color: #fecaca; background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .3); }
.note-ok { color: #bbf7d0; background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .3); }
.note-warn { color: #fde68a; background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .3); }
.note-info { color: #cffafe; background: var(--cyan-wash); border-color: rgba(34, 211, 238, .3); }

/* ---------- superfícies ---------- */
.panel { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-ok { color: var(--ok); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }
.status-warn { color: var(--warn); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); }
.status-bad { color: var(--bad); border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); }
.status-info { color: var(--cyan); border-color: rgba(34, 211, 238, .35); background: var(--cyan-wash); }
.status-off { color: var(--text-3); border-color: var(--line-2); background: transparent; }

/* ---------- pagamento (Pix / boleto) ---------- */
.pay { display: grid; gap: 16px; }
.pay-qr { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 10px; margin-inline: auto; }
.copybox { display: flex; gap: 8px; align-items: stretch; }
.copybox code { flex: 1; min-width: 0; font: 400 13px/1.4 var(--mono); color: var(--text-2); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- o recibo (landing, checkout, teste) ---------- */
.receipt {
  --paper: #eef2f6; --ink: #0b1220; --ink-2: #4a5568; --ink-3: #56647a; --tooth: 9px;
  position: relative; width: 100%; max-width: 440px; color: var(--ink); background: var(--paper);
  padding: calc(30px + var(--tooth)) 28px calc(26px + var(--tooth));
  /* borda de papel destacado: dentes em zigue-zague em cima e embaixo (a sombra fica no .receipt-shadow) */
  /* faixas de dentes com altura fixa + miolo sólido: não depende da altura do recibo */
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--tooth) * 2 + 2px) no-repeat;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--tooth) * 2 + 2px) no-repeat;
}
.receipt-shadow { filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55)) drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); width: 100%; max-width: 440px; }
.receipt-shadow.tilt { transform: rotate(0.6deg); }
.r-head { text-align: center; font: 600 13px/1.5 var(--mono); letter-spacing: .12em; color: var(--ink); }
.r-head img { width: 34px; height: 34px; margin: 0 auto 8px; filter: brightness(0) saturate(100%); opacity: .85; }
.r-sub { text-align: center; font: 400 12px/1.5 var(--mono); color: var(--ink-3); margin-top: 2px; }
.r-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 20px 0 6px; padding: 4px; border: 1px dashed #b6c0cc; border-radius: 8px; }
.r-tabs button { font: 600 13px/1 var(--mono); color: var(--ink-2); background: transparent; border: 0; padding: 10px 4px; border-radius: 5px; cursor: pointer; transition: background .2s, color .2s; }
.r-tabs button:hover { color: var(--ink); background: rgba(11, 18, 32, .05); }
.r-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.r-tabs button:focus-visible { outline: 2px solid var(--cyan-600); outline-offset: 2px; }
.r-badge { text-align: center; font: 500 12px/1 var(--mono); color: var(--cyan-600); height: 16px; margin-bottom: 8px; }
.r-rule { border: 0; border-top: 1px dashed #aeb8c6; margin: 14px 0; }
.r-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.r-line { display: flex; align-items: baseline; gap: 8px; font: 400 14px/1.35 var(--mono); }
.r-line .k { color: var(--ink); }
.r-line .dots { flex: 1; border-bottom: 1px dotted #9aa6b6; transform: translateY(-4px); min-width: 12px; }
.r-line .v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.r-total .k { font: 600 14px/1 var(--mono); letter-spacing: .1em; }
.r-total .v { font: 600 clamp(1.9rem, 3vw, 2.4rem)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.r-total .v small { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.r-foot { font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); text-align: center; margin-top: 12px; text-wrap: balance; }
.r-cta { display: flex; margin-top: 18px; width: 100%; justify-content: center; background: var(--ink); color: var(--paper); font: 600 15px/1 var(--body); padding: 15px 18px; border-radius: 8px; text-decoration: none; transition: background .2s; }
.r-cta:hover { background: #1c2740; color: #fff; }
.r-cta:focus-visible { outline: 2px solid var(--cyan-600); outline-offset: 3px; }
.r-barcode { height: 36px; margin: 18px auto 0; width: 72%; background: url('../img/barcode.svg') center / 100% 100% no-repeat; opacity: .85; }
.r-skel { height: 14px; border-radius: 3px; background: #d9e0e8; }

/* reimpressão: o papel sobe e as linhas saem na cadência da impressora */
.printing .r-print { animation: print-line .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
.printing .r-feed { animation: feed .5s var(--ease-out) both; }
@keyframes print-line { from { clip-path: inset(0 0 100% 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes feed { from { transform: translateY(10px); } to { transform: translateY(0); } }


/* ---------- rodapé ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 96px; padding: 32px 0 48px; color: var(--text-3); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--text-2); text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}