/* App do evento Ice Flow Club · BCF Brasília 2026.
 * Mesma identidade do iceflow.com.br (src/index.css): azul-marinho como cor
 * principal, ciano "gelo" de destaque, laranja quente só em detalhe, Space
 * Grotesk nos títulos, Inter no texto e Philosopher no nome Ice Flow. Quem
 * sai do app para o site não pode sentir que mudou de marca.
 *
 * As fontes vêm do próprio app (public/fonts, cópia das do site), não do
 * Google: no pavilhão a rede é disputada e o texto não pode esperar CDN. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Philosopher"; font-weight: 700; font-display: swap; src: url("/fonts/philosopher-latin-700-normal.woff2") format("woff2"); }
:root {
  --fundo: #f9fafb; --fundo2: #ffffff; --cartao: #ffffff; --linha: #e0e6eb;
  --texto: #272c34; --mute: #606876; --prim: #1b2a5a; --prim2: #233676; --destaque: #077a9d;
  --gelo: #077a9d; --gelo-vivo: #0ab3e6; --gelo-fundo: #e7f8fe; --suave: #eff2fb; --quente: #c84a14;
  --ok: #248f47; --alerta: #b7791f; --erro: #b8412f;
  --raio: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body.cli { background: var(--fundo); color: var(--texto); min-height: 100vh; }
a { color: var(--prim); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1, h2, h3, .preco, .codigo { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
h1 { font-weight: 700; font-size: 1.8rem; letter-spacing: -.02em; color: var(--prim); }
h2 { font-size: 1.1rem; }
.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 96px; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 18px; }
/* Cabeçalho igual ao do iceflow.com.br: "Ice Flow" em Philosopher e, embaixo,
 * "by" + o logo da Pretty Jet em azul-escuro. */
.marca { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; }
.marca .if { font-family: 'Philosopher', 'Space Grotesk', sans-serif; font-size: 1.85rem; font-weight: 700; color: var(--prim); letter-spacing: -.01em; }
.marca .by { display: flex; align-items: center; gap: 5px; align-self: flex-end; font-size: .62rem; color: var(--mute); font-family: 'Inter', sans-serif; }
.marca .by img { height: 26px; width: auto; display: block; }
.sub { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); }
.hero { border-radius: var(--raio); padding: 22px 18px; background: linear-gradient(180deg, #ecfafe, #ffffff); border: 1px solid var(--linha); margin-bottom: 16px; position: relative; overflow: hidden; }
/* Faixa com o gradiente wellness do site (ciano -> laranja). */
.hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #0ab3e6, #e27040); }
.hero .evento { color: var(--gelo); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.card { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin: 12px 0; box-shadow: 0 4px 20px -4px rgba(29,38,64,.08); }
.mute { color: var(--mute); }
.small { font-size: .85rem; }
.mt { margin-top: 8px; } .mt2 { margin-top: 16px; }
label { display: block; font-weight: 600; font-size: .88rem; margin: 14px 0 6px; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo2); color: var(--texto); }
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gelo-vivo); outline-offset: 1px; }
.linha2 { display: grid; grid-template-columns: 1fr 90px; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; padding: 13px 18px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.btn.prim { background: var(--prim); color: #fff; }
.btn.prim:hover { background: var(--prim2); }
.btn.sec { background: transparent; border-color: var(--linha); color: var(--texto); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: wait; }
.msg { padding: 10px 12px; border-radius: 10px; margin-top: 12px; font-size: .9rem; }
.msg.ok { background: #e1f3e8; color: var(--ok); }
.msg.erro { background: #f9e3de; color: var(--erro); }
.msg.info { background: var(--gelo-fundo); color: #05637f; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 12px 0; }
.check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--prim); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; font-weight: 500; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo2); font-size: .88rem; cursor: pointer; }
.chips input:checked + span { background: var(--gelo); color: #fff; border-color: var(--gelo); font-weight: 700; }
.chips input:focus-visible + span { outline: 2px solid var(--gelo); }
.opcao { display: block; position: relative; margin: 10px 0; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; }
.opcao .caixa { display: block; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; background: var(--fundo2); font-weight: 400; }
.opcao input:checked + .caixa { border-color: var(--gelo); box-shadow: 0 0 0 1px var(--gelo) inset; background: var(--gelo-fundo); }
.opcao input:focus-visible + .caixa { outline: 2px solid var(--gelo); }
.preco { font-size: 1.5rem; font-weight: 700; color: var(--prim); }
.de { text-decoration: line-through; color: var(--mute); font-size: .9rem; margin-right: 6px; }
.selo { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #fdf1ec; color: var(--quente); border-radius: 6px; padding: 2px 7px; }
.etapas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etapas span { font-size: .78rem; padding: 4px 8px; border-radius: 8px; background: var(--suave); color: var(--texto); }
.etapas span.gelo { background: var(--gelo-fundo); color: #05637f; font-weight: 600; }
.passos { display: flex; gap: 6px; margin: 4px 0 14px; }
.passos i { flex: 1; height: 4px; border-radius: 4px; background: var(--linha); }
.passos i.on { background: var(--gelo-vivo); }
.pergunta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.opts { display: flex; gap: 6px; flex: 0 0 auto; }
.opts label { margin: 0; }
.opts input { position: absolute; opacity: 0; }
.opts span { display: inline-block; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--linha); font-weight: 600; font-size: .85rem; cursor: pointer; }
.opts input:checked + span { background: var(--texto); color: var(--fundo); }
.opts .sim input:checked + span { background: #f3c969; color: #3d2a00; border-color: #e0b04a; }
.detalhe { padding: 6px 0 10px; }
.termo { max-height: 260px; overflow: auto; font-size: .85rem; color: var(--mute); padding-right: 6px; }
.termo p { margin: 0 0 10px; }
.qr { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 12px; width: min(280px, 100%); margin: 12px auto; }
.qr svg { display: block; width: 100%; height: auto; }
.copia { display: flex; gap: 8px; }
.copia input { font-size: .8rem; }
.ingresso { text-align: center; border: 2px dashed var(--prim); }
.codigo { font-size: 2rem; font-weight: 700; letter-spacing: .12em; color: var(--prim); }
.status { display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.status.aguardando { background: #fdf0d5; color: #8a5a00; }
.status.pago { background: #dcf3e6; color: #1f6b43; }
.status.utilizado { background: #e9eeec; color: var(--mute); }
.status.cancelado { background: #f9e0dc; color: #9a2f22; }
.lista a.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.rodape { text-align: center; margin-top: 28px; font-size: .78rem; color: var(--mute); }
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- gestão */
body.ges { background: var(--fundo); color: var(--texto); }
.ges input, .ges select, .ges textarea { background: #fff; color: var(--texto); }
.ges .layout { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.ges .menu { background: linear-gradient(160deg, #0d1530, #1e2f66); color: #e8edf8; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.ges .menu .logo { font-weight: 800; margin: 0 8px 18px; line-height: 1.2; }
.ges .menu .logo .if { display: block; font-family: 'Philosopher', 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; }
.ges .menu .logo .by { display: flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 400; color: #9fb0d6; margin: 3px 0 6px; }
.ges .menu .logo .by img { height: 24px; width: auto; }
.ges .menu .logo small { display: block; font-weight: 400; color: #9fb0d6; font-size: .75rem; }
.ges .menu nav a { display: block; color: #e8edf8; text-decoration: none; padding: 10px 10px; border-radius: 8px; }
.ges .menu nav a.ativo, .ges .menu nav a:hover { background: rgba(10,179,230,.18); }
.ges .menu .pe { margin-top: auto; font-size: .8rem; color: #9fb0d6; padding: 0 8px; }
.ges .menu .pe button { margin-top: 8px; background: none; border: 1px solid #33467f; color: #e8edf8; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; }
.ges main { padding: 22px; min-width: 0; }
.ges h1 { font-size: 1.45rem; }
.ges .card { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ges .btn.sec { color: var(--texto); background: #fff; }
.ges .btn.ok { background: #2f8a5b; color: #fff; }
.ges .btn.perigo { background: #fff; color: #b2402f; border-color: #e7c1ba; }
.ges .btn.mini { padding: 6px 10px; font-size: .82rem; border-radius: 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.kpi b { display: block; white-space: nowrap; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .78rem; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); padding: 8px 6px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 9px 6px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.destaque td { background: #fff7e6; }
.rolagem { overflow-x: auto; }
.acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.filtros > * { flex: 0 1 auto; }
.filtros label { margin: 0 0 4px; font-size: .75rem; }
.filtros input, .filtros select { padding: 8px 10px; font-size: .9rem; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dre td:first-child { padding-left: 0; }
.dre tr.total td { font-weight: 800; border-top: 2px solid var(--prim); }
.dre tr.menos td { color: var(--mute); }
.alerta-ficha { background: #fff3d6; border: 1px solid #f0cf85; color: #6b4b00; padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.tag { display: inline-block; font-size: .72rem; padding: 2px 7px; border-radius: 6px; background: var(--suave); margin: 1px; }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dias button { font: inherit; border: 1px solid var(--linha); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.dias button.ativo { background: var(--prim); color: #fff; border-color: var(--prim); }
.barra { height: 8px; border-radius: 4px; background: var(--suave); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--gelo-vivo); }
@media (max-width: 820px) {
  .ges .layout { grid-template-columns: 1fr; }
  .ges .menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; }
  .ges .menu .logo { margin: 0 8px; }
  .ges .menu nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .ges .menu nav a { padding: 8px; font-size: .88rem; }
  .ges .menu .pe { margin: 0 0 0 auto; }
  .ges main { padding: 14px; }
  .grade2 { grid-template-columns: 1fr; }
}

/* Links para os sites das marcas: o evento é porta de entrada para o funil. */
.sites { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sites a { display: block; text-decoration: none; border: 1px solid var(--linha); border-radius: 12px; padding: 12px; background: #fff; color: var(--texto); }
.sites a strong { display: block; color: var(--prim); font-family: 'Space Grotesk', 'Inter', sans-serif; }
.sites a .logo-if { display: block; font-family: 'Philosopher', 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--prim); line-height: 1.1; margin-bottom: 4px; }
.sites a img { display: block; height: 30px; width: auto; margin: 2px 0 6px; }
.sites a span { font-size: .8rem; color: var(--mute); }