/* ═══ Órbita — sistema visual do LunaChat ═══════════════════════════════════
 *
 * Escolhido pelo Cauã em 2026-09-15 (direção B das «Três Luas»). O pacote é o ponto
 * que dá a volta na lua; a linha da órbita é a barra de progresso.
 *
 * Duas versões, um só sistema (docs/DESIGN.md — a cena física decide):
 *   .orbita-escuro → landing e telas de persuasão (meia-noite, prata, pervinca)
 *   .orbita-claro  → painel e telas de trabalho (tabelas, formulários longos)
 * Componentes só leem tokens --o-*; nunca uma cor literal.
 *
 * NÃO vale para a página de rastreio do cliente final: essa usa a cor e o logo de cada loja.
 *
 * Fontes hospedadas aqui (CSP `default-src 'self'`): Unbounded (títulos, com parcimónia),
 * Manrope (texto), Martian Mono (códigos, números de pedido). Todas OFL.
 */

@font-face { font-family: "Unbounded"; src: url("fontes/unbounded-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fontes/manrope-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fontes/martian-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root,
.orbita-claro {
  --o-fundo: #F4F5FB;
  --o-superficie: #FFFFFF;
  --o-superficie-2: #EEF0F8;
  --o-linha: #DDE0EF;
  --o-linha-forte: #858BAE;   /* borda de campo: 3,4:1 sobre branco */
  --o-tinta: #0C1230;
  --o-tinta-2: #525A80;
  --o-acento: #4452D0;
  --o-acento-solido: #4452D0;   /* já passa branco a 6,2:1 no claro */
  --o-acento-hover: #3743B8;
  --o-acento-tinta: #FFFFFF;
  --o-acento-suave: #E8EAFF;
  --o-lua: #0C1230;
  --o-halo: #B97A0B;
  --o-trilho: #858BAE;        /* parte por percorrer da órbita: 3,4:1 */
  --o-ok: #1D7A5A;
  --o-aviso: #8F5B05;
  --o-erro: #B42318;
  --o-erro-suave: #FDECEA;
  --o-foco: #4452D0;
  --o-nav-ativo: #0C1230;
  --o-nav-ativo-tinta: #FFFFFF;
  --o-sombra: 0 1px 2px rgba(12, 18, 48, .06);
  --o-sombra-alta: 0 10px 28px rgba(12, 18, 48, .10);
  color-scheme: light;

  --o-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --o-texto: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --o-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --o-raio: 10px;
  --o-raio-grande: 16px;
}

.orbita-escuro {
  /* Grafite Restrained — neutro quase-preto, cor só no acento (DESIGN.md) */
  --o-fundo: #08090D;
  --o-superficie: #101218;
  --o-superficie-2: #161922;
  --o-linha: #1E212B;
  --o-linha-forte: #727892;   /* 4,3:1 sobre a superfície grafite — borda de campo e texto tênue */
  --o-tinta: #E7E9F0;
  --o-tinta-2: #8B90A0;
  --o-acento: #6E7BFF;         /* linhas, texto e brilhos sobre o escuro */
  --o-acento-solido: #4A56DB;  /* fundo de botão: passa quase-branco a 4,7:1 */
  --o-acento-hover: #8390FF;
  --o-acento-tinta: #FFFFFF;
  --o-acento-suave: rgba(110, 123, 255, .14);
  --o-lua: #E7E9F0;
  --o-halo: #6E7BFF;
  --o-trilho: #565C6E;
  --o-ok: #2FCB92;
  --o-aviso: #E0A93E;
  --o-erro: #F26D6D;
  --o-erro-suave: rgba(242, 109, 109, .12);
  --o-foco: #8390FF;
  --o-nav-ativo: #6E7BFF;
  --o-nav-ativo-tinta: #FFFFFF;
  --o-sombra: none;
  --o-sombra-alta: 0 24px 60px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

.orbita-claro, .orbita-escuro {
  background: var(--o-fundo);
  color: var(--o-tinta);
  font: 15px/1.55 var(--o-texto);
  -webkit-font-smoothing: antialiased;
}
.orbita-claro :focus-visible, .orbita-escuro :focus-visible { outline: 2px solid var(--o-foco); outline-offset: 2px; }

/* ── escala de texto: 12 · 13 · 15 · 18 · 24 · 32 · 44 ─────────────────────────── */
.o-titulo-1 { font: 600 clamp(32px, 4.6vw, 44px)/1.08 var(--o-display); letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.o-titulo-2 { font: 600 24px/1.2 var(--o-display); letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.o-titulo-3 { font: 700 18px/1.3 var(--o-texto); margin: 0; }
.o-texto-2 { color: var(--o-tinta-2); }
.o-rotulo { font: 600 12px/1.2 var(--o-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--o-tinta-2); }
.o-codigo { font: 400 13px/1.3 var(--o-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ── marca ───────────────────────────────────────────────────────────────────── */
.o-marca { display: inline-flex; align-items: center; gap: .55em; color: var(--o-tinta); text-decoration: none; font: 500 18px/1 var(--o-display); letter-spacing: .005em; white-space: nowrap; }
.o-marca svg { width: 1.7em; height: 1.7em; flex: none; }
.o-marca .o-marca__lua { fill: var(--o-lua); }
.o-marca .o-marca__orbita { fill: none; stroke: var(--o-acento); stroke-width: 2; }
.o-marca .o-marca__orbita--atras { opacity: .45; }
.o-marca .o-marca__pacote { fill: var(--o-halo); }

/* ── botões ──────────────────────────────────────────────────────────────────── */
.o-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--o-raio); border: 1px solid transparent; font: 600 14px/1 var(--o-texto); text-decoration: none; cursor: pointer; background: var(--o-acento-solido); color: var(--o-acento-tinta); transition: background-color .12s ease, border-color .12s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.o-botao:hover { background: var(--o-acento-hover); }
.o-botao:active { transform: translateY(1px); }
.o-botao--secundario { background: transparent; color: var(--o-tinta); border-color: var(--o-linha-forte); }
.o-botao--secundario:hover { background: var(--o-superficie-2); }
.o-botao--fantasma { background: transparent; color: var(--o-tinta-2); }
.o-botao--fantasma:hover { background: var(--o-superficie-2); color: var(--o-tinta); }
.o-botao--pequeno { min-height: 32px; padding: 0 12px; font-size: 13px; }
.o-botao[disabled] { opacity: .5; cursor: not-allowed; }

/* ── campos ──────────────────────────────────────────────────────────────────── */
.o-campo { display: grid; gap: 6px; }
.o-campo > label { font: 600 13px/1.3 var(--o-texto); }
.o-campo small { font-size: 12.5px; color: var(--o-tinta-2); }
.o-entrada { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--o-raio); border: 1px solid var(--o-linha-forte); background: var(--o-superficie); color: var(--o-tinta); font: 400 15px/1.4 var(--o-texto); }
.o-entrada::placeholder { color: var(--o-tinta-2); opacity: .75; }
.o-entrada:focus { outline: none; border-color: var(--o-acento); box-shadow: 0 0 0 3px var(--o-acento-suave); }
.o-campo[data-erro] .o-entrada { border-color: var(--o-erro); }
.o-campo__erro { font-size: 12.5px; color: var(--o-erro); }

/* interruptor: <label class="o-interruptor"><input type="checkbox" role="switch"><span>Texto</span></label> */
.o-interruptor { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.o-interruptor input { appearance: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--o-trilho); position: relative; cursor: pointer; flex: none; transition: background-color .15s ease; }
.o-interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s cubic-bezier(.16,1,.3,1); }
.o-interruptor input:checked { background: var(--o-acento); }
.o-interruptor input:checked::after { transform: translateX(16px); }

/* ── selo de estado do pedido: ponto de cor + texto na tinta (legível em qualquer fundo) ── */
.o-selo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--o-superficie-2); border: 1px solid var(--o-linha); font: 600 12.5px/1.2 var(--o-texto); color: var(--o-tinta); white-space: nowrap; }
.o-selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--o-cor-estado, var(--o-tinta-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--o-cor-estado, var(--o-tinta-2)) 22%, transparent); }
.o-selo[data-estado="postado"] { --o-cor-estado: var(--o-tinta-2); }
.o-selo[data-estado="transito"] { --o-cor-estado: var(--o-acento); }
.o-selo[data-estado="atencao"] { --o-cor-estado: var(--o-aviso); }
.o-selo[data-estado="retirada"] { --o-cor-estado: var(--o-halo); }
.o-selo[data-estado="entregue"] { --o-cor-estado: var(--o-ok); }
.o-selo[data-estado="problema"] { --o-cor-estado: var(--o-erro); }

/* ── superfícies ─────────────────────────────────────────────────────────────── */
.o-cartao { background: var(--o-superficie); border: 1px solid var(--o-linha); border-radius: var(--o-raio-grande); box-shadow: var(--o-sombra); padding: 20px; }
.o-divisor { border: 0; border-top: 1px solid var(--o-linha); margin: 0; }

/* contador (sem gráfico, decisão do Cauã) */
.o-contador { display: grid; gap: 4px; }
.o-contador b { font: 600 32px/1 var(--o-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.o-contador span { font-size: 13px; color: var(--o-tinta-2); }

/* tabela */
.o-tabela-caixa { overflow-x: auto; }
.o-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.o-tabela th { text-align: left; font: 600 12px/1.2 var(--o-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--o-tinta-2); padding: 10px 12px; border-bottom: 1px solid var(--o-linha); }
.o-tabela td { padding: 12px; border-bottom: 1px solid var(--o-linha); vertical-align: middle; }
.o-tabela tbody tr:hover { background: var(--o-superficie-2); }
.o-tabela tr:last-child td { border-bottom: 0; }
.o-tabela .o-num { text-align: right; font-variant-numeric: tabular-nums; }

/* navegação lateral */
.o-nav { display: grid; gap: 2px; }
.o-nav a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border-radius: var(--o-raio); color: var(--o-tinta-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.o-nav a:hover { background: var(--o-superficie-2); color: var(--o-tinta); }
.o-nav a[aria-current="page"] { background: var(--o-nav-ativo); color: var(--o-nav-ativo-tinta); }
.o-nav svg { width: 18px; height: 18px; flex: none; }
.o-nav .o-nav__conta { margin-left: auto; font: 500 11px/1 var(--o-mono); padding: 3px 7px; border-radius: 999px; background: var(--o-acento-suave); color: var(--o-tinta); }
.o-nav a[aria-current="page"] .o-nav__conta { background: rgba(255,255,255,.18); color: inherit; }

/* estado vazio: diz o que significa e o que fazer (docs/DESIGN.md, regra 4) */
.o-vazio { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; color: var(--o-tinta-2); }
.o-vazio svg { width: 56px; height: 56px; }
.o-vazio b { color: var(--o-tinta); font: 700 16px/1.3 var(--o-texto); }
.o-vazio p { margin: 0; max-width: 42ch; }

/* ── barra de órbita (progresso do pedido) ───────────────────────────────────── */
.o-orbita svg { width: 100%; height: auto; display: block; overflow: visible; }
.o-orbita .o-orbita__trilho { fill: none; stroke: var(--o-trilho); stroke-width: 3; stroke-linecap: round; }
.o-orbita .o-orbita__feito { fill: none; stroke: var(--o-acento); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--o-progresso, 0) 100; }
.o-orbita .o-orbita__marco { r: 4px; fill: var(--o-superficie); stroke: var(--o-trilho); stroke-width: 2; offset-path: path("M14 62 A146 50 0 0 1 306 62"); offset-rotate: 0deg; }
.o-orbita .o-orbita__marco[data-feito] { fill: var(--o-acento); stroke: var(--o-acento); }
.o-orbita .o-orbita__pacote { r: 7px; fill: var(--o-halo); stroke: var(--o-superficie); stroke-width: 3; offset-path: path("M14 62 A146 50 0 0 1 306 62"); offset-distance: calc(var(--o-progresso, 0) * 1%); offset-rotate: 0deg; }
.o-orbita .o-orbita__marco--0 { offset-distance: 0%; }
.o-orbita .o-orbita__marco--1 { offset-distance: 33.33%; }
.o-orbita .o-orbita__marco--2 { offset-distance: 66.66%; }
.o-orbita .o-orbita__marco--3 { offset-distance: 100%; }
/* progresso pela etapa atual: postado 0 · em trânsito 38 · saiu para entrega 70 · entregue 100 */
.o-orbita--0 { --o-progresso: 0; } .o-orbita--38 { --o-progresso: 38; } .o-orbita--70 { --o-progresso: 70; } .o-orbita--100 { --o-progresso: 100; }
.o-orbita__etapas { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--o-tinta-2); }
.o-orbita__etapas [aria-current] { color: var(--o-tinta); font-weight: 700; }

/* celular: a tabela vira linhas em cartão (pedido + selo em cima, o resto em baixo) em vez de rolar sem sinal */
@media (max-width: 480px) {
  .o-tabela--responsiva thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .o-tabela--responsiva tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px; border-bottom: 1px solid var(--o-linha); }
  .o-tabela--responsiva tbody tr:last-child { border-bottom: 0; }
  .o-tabela--responsiva td { padding: 0; border: 0; }
  .o-tabela--responsiva td:nth-child(n+3) { color: var(--o-tinta-2); font-size: 13px; }
  .o-tabela--responsiva td:nth-child(2) { justify-self: end; }
  .o-tabela--responsiva td:nth-child(n+3) { grid-column: 1 / -1; }
  .o-orbita__etapas span:not([aria-current]):not(:first-child):not(:last-child) { visibility: hidden; }
  .o-orbita__etapas span { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .o-botao, .o-interruptor input, .o-interruptor input::after { transition: none; }
}