/* FORSI Maps — design system "Aurora" da FORSI (docs/DESIGN-SYSTEM.md do forsi-site).
   Uma luz só por bloco, borda 1px translúcida, fio de luz no topo dos cards, um acento azul. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url(/web/fonts/jakarta.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(/web/fonts/dmsans.woff2) format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url(/web/fonts/dmmono.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --paper: #FAFAF9; --card: #FFFFFF; --card-2: #F5F4F0; --void: #070B12;
  --ink: #0E1621; --ink-soft: #1F2A37; --stone: #5B6B7E; --stone-l: #8A97A8;
  --line: rgba(16,32,58,.10); --line-strong: rgba(16,32,58,.14);
  --blue: #2563EB; --blue-s: #60A5FA; --blue-ghost: rgba(37,99,235,.10);
  --ok: #16A34A; --ok-ghost: rgba(22,163,74,.10); --warn: #B45309; --warn-ghost: rgba(217,119,6,.12); --erro: #DC2626; --erro-ghost: rgba(220,38,38,.09);
  --r-sm: 12px; --r: 16px; --r-lg: 20px;
  --shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(16,32,58,.04);
  --shadow-hover: 0 18px 44px rgba(20,40,80,.10);
  --glow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 30px rgba(37,99,235,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
  --display: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(37,99,235,.18); }

.aurora { position: relative; overflow: hidden; }
.aurora::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(640px 360px at 70% 8%, rgba(37,99,235,.15), transparent 70%),
    radial-gradient(760px 460px at 15% -6%, rgba(96,165,250,.12), transparent 70%),
    radial-gradient(rgba(16,32,58,.055) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  mask-image: linear-gradient(180deg, black 55%, transparent);
  animation: aura 14s ease-in-out infinite alternate; }
@keyframes aura { from { opacity: .72 } to { opacity: 1 } }

.mark { width: 34px; height: 34px; border-radius: 10px; flex: none; background: linear-gradient(180deg,#3B77F0,#2058D8);
  display: grid; place-items: center; box-shadow: var(--glow); position: relative; }
.mark::before { content: 'F'; color: #fff; font: 800 19px/1 var(--display); letter-spacing: -.04em; }
.mark::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue-s); border: 2.5px solid var(--paper); box-shadow: 0 0 10px rgba(96,165,250,.9); }
.brand { display: flex; align-items: center; gap: 11px; font: 800 17px/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.brand small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-top: 5px; }

.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 99px; padding: 6px 13px; background: #fff;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); box-shadow: var(--shadow); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(37,99,235,.8); }
.badge.ok::before { background: var(--ok); box-shadow: 0 0 8px rgba(22,163,74,.8); }
.badge.warn::before { background: #F59E0B; box-shadow: 0 0 8px rgba(245,158,11,.8); }
.badge.erro::before { background: var(--erro); box-shadow: 0 0 8px rgba(220,38,38,.7); }

.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.0), transparent); transition: background .3s; }
.card.lift:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); box-shadow: var(--shadow-hover); }
.card.lift:hover::before, .card.lit::before { background: linear-gradient(90deg, transparent, rgba(96,165,250,.7), transparent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.8); color: var(--ink); font: 600 14px/1 var(--body); cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s, background .2s; white-space: nowrap; position: relative; overflow: hidden; }
.btn:hover { border-color: rgba(37,99,235,.45); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(180deg,#3B77F0,#2058D8); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.btn.primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 40px rgba(37,99,235,.5); }
.btn.primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; transform: skewX(-20deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent); transition: left .55s; }
.btn.primary:hover::after { left: 125%; }
.btn.danger { color: var(--erro); border-color: rgba(220,38,38,.28); background: #fff; }
.btn.danger:hover { border-color: var(--erro); background: var(--erro-ghost); }
.btn.sm { height: 32px; padding: 0 13px; font-size: 13px; }
.btn.icon { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.btn svg { width: 16px; height: 16px; flex: none; }

.mono { font-family: var(--mono); }
.micro { font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.num { font: 800 28px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.muted { color: var(--stone); }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font: 600 12px/1 var(--body);
  background: var(--card-2); color: var(--ink-soft); border: 1px solid var(--line); }
.tag.blue { background: var(--blue-ghost); color: var(--blue); border-color: rgba(37,99,235,.2); }
.tag.ok { background: var(--ok-ghost); color: var(--ok); border-color: rgba(22,163,74,.2); }
.tag.warn { background: var(--warn-ghost); color: var(--warn); border-color: rgba(217,119,6,.25); }
.tag.erro { background: var(--erro-ghost); color: var(--erro); border-color: rgba(220,38,38,.2); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--stone-l); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-ghost); animation: pulse 2.4s ease-in-out infinite; }
.dot.erro { background: var(--erro); box-shadow: 0 0 0 4px var(--erro-ghost); }
.dot.warn { background: #F59E0B; box-shadow: 0 0 0 4px var(--warn-ghost); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }

.code { position: relative; background: #0A101B; color: #D6E2F3; border-radius: 14px; padding: 16px 18px; font: 500 12.5px/1.7 var(--mono);
  overflow: auto; border: 1px solid rgba(255,255,255,.06); white-space: pre; }
.code .k { color: #93C5FD; } .code .s { color: #86EFAC; } .code .c { color: #64748B; }
.copy { position: absolute; top: 10px; right: 10px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #C9D3E0; font: 600 12px var(--body); cursor: pointer; }
.copy:hover { background: rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }