/* Jarvis — padrão visual único (aprovado pelo Felipe em 29/09/2026).
 *
 * Fonte única de cor, canto, botão, topo, abas, números, cartões e selos de situação. Toda tela
 * do Jarvis carrega este arquivo ANTES do próprio <style> e não redefine estes tokens: mudou aqui,
 * muda em todos os apps. A tela aprovada está em https://claude.ai/artifact/F42iaq9Q7QquNYQiXtDGPA
 *
 * As 6 regras:
 *  1. Coluna da esquerda só com a barra de apps. Nada embaixo.
 *  2. Topo fixo: nome do app, uma frase do que ele faz e no máximo dois botões à direita.
 *     O azul (.jp-btn.pri) é o botão principal.
 *  3. Faixa de experts logo abaixo do topo (jarvis-experts.js), com arquivar só naquele app.
 *  4. As seções do app viram abas em linha (.jp-abas), nunca botões soltos.
 *  5. Até 4 números em cima (.jp-numeros) e o resto em cartões (.jp-cartao) iguais.
 *  6. Azul é ação. Verde é bom, amarelo é atenção, vermelho é problema. Dourado só na marca.
 */
:root {
  --bg: #F0F2F5; --card: #FFFFFF; --card-2: #F7F8FA; --ink: #050505; --ink-soft: #65676B; --muted: #8A8D91;
  --line: #E4E6EA; --border: var(--line);
  --accent: #2E89FF; --accent-deep: #1C6BD6; --accent-bg: #E6F0FF; --accent-soft: var(--accent-bg); --accent-ink: #FFFFFF;
  --good: #31A24C; --good-bg: #E3F3E8; --warn: #966400; --warn-bg: #FCEFD1; --bad: #E41E3F; --bad-bg: #FBE2E6;
  --error: var(--bad);
  --jarvis-gold: #E8A23C; --jarvis-gold-bright: #FFD98A; --jarvis-glow: rgba(232,162,60,.55);
  --shadow: 0 2px 10px rgba(0,0,0,0.08);
  --r-lg: 14px; --r-md: 10px; --r-sm: 8px; --r-pill: 999px; --radius: var(--r-lg);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Roboto Mono", monospace;
}
/* O Jarvis abre escuro; claro só quando a pessoa escolhe (data-theme="light"). */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #18191A; --card: #242526; --card-2: #1F2021; --ink: #E4E6EA; --ink-soft: #B0B3B8; --muted: #8A8D91;
  --line: #3A3B3C;
  --accent-deep: #5B9BFF; --accent-bg: #1E2A3E;
  --good: #4CD971; --good-bg: #16281C; --warn: #E3B24C; --warn-bg: #332918; --bad: #F0546B; --bad-bg: #3A1A20;
  --shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* ---- Topo do app (regra 2) ---- */
.jp-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px;
  background: var(--card); border-bottom: 1px solid var(--line); }
.jp-topo h1, .jp-topo h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.jp-topo .jp-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.jp-topo .jp-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Botões ---- */
.jp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit;
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s, filter .15s; }
.jp-btn:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.jp-btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.jp-btn.pri:hover { filter: brightness(1.08); color: var(--accent-ink); }
.jp-btn.perigo:hover { border-color: var(--bad); color: var(--bad); }
.jp-btn:disabled { opacity: .5; cursor: default; }
.jp-btn:focus-visible, .jp-abas button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Abas da ferramenta (regra 4) ---- */
.jp-abas { display: flex; gap: 4px; padding: 0 22px; background: var(--card); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; }
.jp-abas::-webkit-scrollbar { display: none; }
.jp-abas button, .jp-abas a { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 12px 10px; cursor: pointer;
  white-space: nowrap; text-decoration: none; }
.jp-abas button:hover, .jp-abas a:hover { color: var(--ink); }
.jp-abas .on, .jp-abas .ativo, .jp-abas .active { color: var(--accent-deep); border-bottom-color: var(--accent); }

/* ---- Conteúdo, números e cartões (regra 5) ---- */
.jp-conteudo { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.jp-rotulo { margin: 0; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.jp-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.jp-num { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 15px; }
.jp-num .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.jp-num .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.jp-num .d.bom { color: var(--good); }
.jp-num .d.ruim { color: var(--bad); }
.jp-cartao { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.jp-cartao-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.jp-cartao-h h3 { margin: 0; font-size: 14px; font-weight: 800; }
.jp-cartao-h .jp-btn { margin-left: auto; }
.jp-cartao-c { padding: 14px 16px; }
.jp-linha { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.jp-linha:last-child { border-bottom: 0; }
.jp-linha .t { font-weight: 700; font-size: 13.5px; }
.jp-linha .m { font-size: 12px; color: var(--muted); margin-top: 2px; }
.jp-linha .dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Selos de situação (regra 6) ---- */
.jp-st { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.jp-st.bom { color: var(--good); background: var(--good-bg); }
.jp-st.atencao { color: var(--warn); background: var(--warn-bg); }
.jp-st.ruim { color: var(--bad); background: var(--bad-bg); }
.jp-st.neutro { color: var(--ink-soft); background: var(--card-2); }

/* ---- Campos ---- */
.jp-campo { font-family: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 10px; }
.jp-campo:focus { outline: none; border-color: var(--accent); }

@media (max-width: 820px) {
  .jp-topo, .jp-conteudo { padding-left: 14px; padding-right: 14px; }
  .jp-abas { padding: 0 8px; }
  .jp-numeros { grid-template-columns: repeat(2, 1fr); }
  .jp-linha { flex-wrap: wrap; }
  .jp-linha .dir { margin-left: 0; }
}