/* Planilha Preditiva — pele "Comercial" do FF.AI CRM: canvas cinza frio, cartão branco por cima,
   verde da logo como ação primária, Outfit (display) + Inter (UI). Tokens copiados de ffai-crm/src/app/globals.css. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap");

:root {
  --paper: #eef1f4; --paper-deep: #e3e8ed; --surface: #ffffff; --sunken: #eef1f4;
  --ink: #17222e; --ink-soft: #566676; --ink-faint: #8494a3;
  --line: rgba(23,34,46,.10); --line-strong: rgba(23,34,46,.18);
  --accent: #047857; --accent-strong: #065f46; --accent-tint: #e8f6f0; --accent-ink: #04503b; --accent-glow: rgba(4,120,87,.13);
  --ok: #047857; --ok-tint: #e3f3ec; --warn: #b06f14; --warn-tint: #fbf2e1; --danger: #c0392f; --danger-tint: #fcecea;
  --info: #2f6fed; --info-tint: #e9eff8; --special: #6a48d0; --special-tint: #eee9fc;
  --rail: #0f1a24; --rail-2: #162331; --rail-ink: #b9c7d4; --rail-faint: #6d7f91; --rail-line: rgba(255,255,255,.07); --rail-accent: #2fbd8a;
  --shadow-card: 0 1px 2px rgba(23,34,46,.06), 0 6px 14px -10px rgba(23,34,46,.20);
  --shadow-lift: 0 2px 4px rgba(23,34,46,.08), 0 14px 30px -14px rgba(23,34,46,.28);
  --shadow-focus: 0 0 0 3px var(--accent-glow);
  --r-card: 10px; --r-field: 8px;
  --font: "Inter", ui-sans-serif, system-ui, sans-serif; --display: "Outfit", var(--font); --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --topbar-h: 60px;
  /* categorias (texto / marca) na família de cores do CRM */
  --c-verde: #047857; --m-verde: #2fbd8a; --c-vermelho: #c0392f; --m-vermelho: #e8756c; --c-ambar: #b06f14; --m-ambar: #dda65a;
  --c-cinza: #566676; --m-cinza: #a9b5c0; --c-azul: #2f6fed; --m-azul: #6b9bff; --c-violeta: #6a48d0; --m-violeta: #a58bf0;
  --c-rosa: #b0397a; --m-rosa: #e07bb3; --c-ciano: #0e7490; --m-ciano: #22b8cf; --c-laranja: #c2410c; --m-laranja: #fb923c;
  --c-lima: #4d7c0f; --m-lima: #a3e635; --c-teal: #0f766e; --m-teal: #2dd4bf; --c-indigo: #4338ca; --m-indigo: #818cf8; --c-fucsia: #a21caf; --m-fucsia: #e879f9;
  /* compat com nomes antigos usados no JS */
  --verde: var(--accent); --tinta-vermelha: var(--danger); --ocre: var(--warn); --lapis: var(--ink-faint); --lapis-2: #c3ccd4; --apagado: var(--ink-soft); --hl: var(--accent-tint);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--ink); font: 14px/1.45 var(--font); font-variant-numeric: tabular-nums; background: var(--paper); }
.ico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: none; }
.pp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }
.mono { font-family: var(--mono); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
b { font-weight: 600; }
::selection { background: var(--accent-tint); color: var(--accent-ink); }

/* ---------- botões, campos, pills ---------- */
.jev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font: 500 14px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.jev-btn:hover { background: var(--paper-deep); }
.jev-btn:active { transform: translateY(.5px); }
.jev-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.jev-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 2px rgba(4,120,87,.22), inset 0 1px 0 rgba(255,255,255,.10); }
.jev-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.jev-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.jev-btn--ghost:hover { background: var(--paper-deep); color: var(--ink); }
.jev-btn:disabled { opacity: .55; cursor: not-allowed; }
.jev-input, .jev-textarea, .jev-select { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font: 14px var(--font); }
.jev-input::placeholder, .jev-textarea::placeholder { color: var(--ink-faint); }
.jev-input:focus, .jev-textarea:focus, .jev-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.jev-textarea { height: auto; padding: 10px 12px; resize: vertical; }
.jev-select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23566676' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
label.jev-label { display: grid; gap: 6px; font: 500 12.5px var(--font); color: var(--ink-soft); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.jev-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font: 600 12px var(--font); background: var(--sunken); color: var(--ink-soft); }
.jev-badge.good { background: var(--ok-tint); color: var(--ok); } .jev-badge.violet { background: var(--special-tint); color: var(--special); } .jev-badge.mid { background: var(--warn-tint); color: var(--warn); } .jev-badge.low { background: var(--danger-tint); color: var(--danger); } .jev-badge.info { background: var(--info-tint); color: var(--info); }
.jev-empty { padding: 30px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.jev-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.jev-chip .ico { color: var(--accent); width: 14px; height: 14px; }
.jev-chip:hover { background: var(--accent-tint); color: var(--accent-ink); border-color: transparent; }
.jev-chip.done { color: var(--ink-faint); text-decoration: line-through; background: var(--sunken); }
.jev-chip.done .ico { color: var(--ok); }

/* ---------- toasts ---------- */
.jev-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 90; }
.jev-toast { background: var(--ink); color: var(--paper); border-radius: var(--r-field); padding: 10px 14px; box-shadow: var(--shadow-lift); font-size: 13px; max-width: min(520px, calc(100vw - 32px)); border-left: 3px solid var(--ink-faint); animation: toastIn .25s ease-out; }
.jev-toast.err { border-left-color: #e8756c; } .jev-toast.ok { border-left-color: var(--rail-accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- topbar (trilho navy do CRM) ---------- */
.jev-topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 20px; color: #fff; background: var(--rail); border-bottom: 1px solid var(--rail-line); }
.jev-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.jev-logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(#0a9268, #046048); display: grid; place-items: center; flex: none; position: relative; font: 700 15px var(--display); color: #fff; }
.jev-logo::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: #a7f3d0; }
.jev-apptitle { display: grid; line-height: 1.15; }
.jev-apptitle b { font: 600 .95rem/1.15 var(--display); letter-spacing: -.01em; }
.jev-apptitle b em { font-style: normal; color: var(--rail-accent); }
.jev-apptitle b small { font: 500 .95rem var(--display); color: var(--rail-faint); margin-left: 6px; }
.jev-apptitle span { font-size: 11.5px; color: var(--rail-faint); }
.jev-metrics { display: flex; align-items: center; gap: 6px; font: 12.5px var(--font); }
.jev-metric { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--rail-2); border: 1px solid var(--rail-line); color: var(--rail-ink); }
.jev-metric b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.jev-metric .lbl { color: var(--rail-faint); }
.jev-metric.lat b { color: var(--rail-accent); } .jev-metric.lat.lat-mid b { color: #dda65a; } .jev-metric.lat.lat-bad b { color: #e8756c; }
.jev-metric.flash { animation: flash .6s; }
@keyframes flash { 30% { background: rgba(47,189,138,.25); } }
.jev-topbar .jev-btn { background: transparent; color: var(--rail-ink); border-color: var(--rail-line); }
.jev-topbar .jev-btn:hover { background: var(--rail-line); color: #fff; }
.jev-footer { text-align: center; color: var(--ink-faint); font-size: 12px; padding: 16px; }

/* ---------- página ---------- */
main.pp { max-width: 1440px; margin: 0 auto; padding: 16px 24px 0; display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); min-height: 600px; gap: 12px; }
.pp-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.pp-hero .eyebrow { display: block; font: 600 .68rem var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.pp-hero h1 { margin: 0; font: 600 1.65rem/1.25 var(--display); letter-spacing: -.03em; color: var(--ink); animation: reveal .6s cubic-bezier(.22,1,.36,1) both; }
.pp-lede { margin: 0; max-width: 60ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); animation: reveal .6s .08s cubic-bezier(.22,1,.36,1) both; }
.pp-lede b { color: var(--ink); font-weight: 600; }
.pp-rules { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 10px 14px; font-size: 12.5px; animation: reveal .6s .16s cubic-bezier(.22,1,.36,1) both; }
.pp-rules h4 { margin: 0 0 6px; font: 600 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pp-rules .r { display: grid; grid-template-columns: 120px 100px auto; gap: 8px; padding: 2px 0; color: var(--ink-soft); }
.pp-rules code { font: 12px var(--mono); color: var(--ink); background: var(--sunken); padding: 1px 6px; border-radius: 4px; }
.pp-rules .to { color: var(--accent); }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }

/* abas (segmentadas, como os filtros do CRM) */
.pp-tabsbar { height: 40px; }
.pp-tabs { display: flex; align-items: center; gap: 6px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.pp-tab { position: relative; height: 36px; padding: 0 12px 0 8px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font: 500 13px var(--font); color: var(--ink-soft); white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.pp-tab:hover { background: var(--paper-deep); color: var(--ink); }
.pp-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pp-tab .ix { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--sunken); color: var(--ink-soft); font: 600 11px var(--font); }
.pp-tab.active .ix { background: var(--rail-accent); color: var(--rail); }
.pp-tab .n { font-size: 12px; color: var(--ink-faint); }
.pp-tab.active .n { color: var(--rail-ink); }
.pp-tab .ai-n { background: var(--accent-tint); color: var(--accent-ink); font: 600 11px var(--font); padding: 1px 7px; border-radius: 999px; display: inline-flex; gap: 3px; align-items: center; animation: carimbo .4s cubic-bezier(.2,1.4,.35,1); }
.pp-tab.active .ai-n { background: rgba(47,189,138,.2); color: var(--rail-accent); }
.pp-tab .ai-n .ico { width: 11px; height: 11px; }
.pp-tab .x { margin-left: 2px; color: var(--ink-faint); display: inline-flex; }
.pp-tab .x:hover { color: var(--danger); }
.pp-tab.imp { border-style: dashed; color: var(--accent); background: transparent; }

/* cartão da planilha */
.pp-sheet { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; animation: reveal .6s .2s cubic-bezier(.22,1,.36,1) both; }
.pp-sheet .mg, .pp-filters .mg { display: none; }
.pp-bar { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.pp-bar .lbl, .pp-filters .lbl { font: 600 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pp-bar .sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-bar .busca { position: relative; width: 200px; }
.pp-bar .busca .ico { position: absolute; left: 10px; top: 9px; color: var(--ink-faint); }
.pp-bar .busca input { height: 34px; padding-left: 32px; }
.pp-status { position: relative; min-height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.pp-status .l1 { font-size: 13.5px; color: var(--ink-soft); }
.pp-status .l1 b { color: var(--ink); }
.pp-status .l1 mark { background: var(--accent-tint); color: var(--accent-ink); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.pp-status .l2 { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.pp-status .l2 > span + span::before { content: "·"; color: var(--ink-faint); margin-right: 10px; }
.pp-status .l2 .big { font: 600 1.35rem/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.pp-status .l2 .money { color: var(--accent); font-weight: 600; }
.pp-status .l2 .err, .pp-status .l1 .err { color: var(--danger); }
.pp-status .actions { display: flex; gap: 8px; align-items: center; }
.pp-status .actions select { width: 260px; height: 36px; }
.pp-status .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--sunken); }
.pp-status .prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; border-radius: 0 3px 3px 0; }
.pp-status[data-state="idle"] .prog, .pp-status[data-state="pronto"] .prog { display: none; }
#cta.pulse { animation: pulso 2.6s infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 6px var(--accent-glow); } }
.pp-filters { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--info-tint); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.pp-filters .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-filters .jev-chip { background: var(--surface); color: var(--ink); }
.pp-filters .jev-chip .ico { color: var(--danger); width: 12px; height: 12px; }
.pp-filters .count { color: var(--ink-soft); }

/* grade */
.pp-gridwrap { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pp-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 13.5px/1.3 var(--font); }
.pp-grid th, .pp-grid td { border-bottom: 1px solid var(--line); padding: 0 14px; height: 42px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.pp-grid thead th { position: sticky; top: 0; z-index: 3; height: 88px; vertical-align: bottom; padding-bottom: 10px; background: var(--surface); color: var(--ink-faint); font: 500 12px var(--font); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.pp-grid thead th:hover { color: var(--ink); }
.pp-grid thead th .letra { position: absolute; top: 8px; left: 14px; font: 500 10px var(--mono); color: var(--lapis-2); letter-spacing: 0; }
.pp-grid thead th.num .letra { left: auto; right: 14px; }
.pp-grid thead th .sort { color: var(--accent); font-size: 9px; margin-left: 4px; }
.pp-grid .rn { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: right; font-size: 12px; color: var(--ink-faint); }
.pp-grid thead .rn { z-index: 4; }
.pp-grid td.first, .pp-grid th.first { position: sticky; left: 44px; z-index: 2; background: var(--surface); font-weight: 500; color: var(--ink); border-right: 1px solid var(--line); }
.pp-grid thead th.first { z-index: 4; }
.pp-grid td { color: var(--ink-soft); }
.pp-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pp-grid td.longo { color: var(--ink); }
.pp-grid td.star { color: #dda65a; letter-spacing: 1px; } .pp-grid td.star .off { color: var(--paper-deep); }
.pp-grid tbody tr { cursor: pointer; }
.pp-grid tbody tr:hover td { background: color-mix(in srgb, var(--paper-deep) 60%, transparent); }
.pp-grid tbody tr.sel td { background: var(--accent-tint); }
.pp-grid tbody tr.sel td.rn { color: var(--accent); font-weight: 600; }
.pp-grid td.pp-vazio, .pp-grid td.pp-carrega { height: 220px; text-align: center; font-size: 13px; color: var(--ink-faint); white-space: normal; }
.pp-grid td.pp-vazio .ico { width: 30px; height: 30px; color: var(--lapis-2); display: block; margin: 0 auto 8px; }
.jev-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--paper-deep); border-top-color: var(--accent); border-radius: 50%; animation: gira .8s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* colunas do Jev */
.pp-grid td.ai { background: color-mix(in srgb, var(--special-tint) 45%, transparent); position: relative; }
.pp-grid td.ai.firstai, .pp-grid th.ai.firstai { border-left: 1px solid var(--line); }
.pp-grid th.ai { background: var(--surface); text-transform: none; letter-spacing: 0; white-space: normal; cursor: default; }
.pp-grid th.ai::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--special); }
.pp-grid th.ai[data-state="fila"]::before, .pp-grid th.ai[data-state="interpretando"]::before, .pp-grid th.ai[data-state="preenchendo"]::before { background: repeating-linear-gradient(90deg, var(--special) 0 8px, transparent 8px 14px); animation: anda 1s linear infinite; }
.pp-grid th.ai[data-state="erro"]::before { background: var(--danger); }
@keyframes anda { to { background-position: 14px 0; } }
.aih { display: grid; gap: 4px; }
.aih-top { display: flex; align-items: flex-start; gap: 4px; }
.aih-title { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; gap: 5px; font: 600 13.5px/1.2 var(--font); color: var(--ink); cursor: pointer; white-space: normal; overflow: hidden; }
.aih-title .ico { color: var(--special); margin-right: 4px; vertical-align: -2px; }
.pp-grid th.ai[data-state="fila"] .aih-title, .pp-grid th.ai[data-state="interpretando"] .aih-title, .pp-grid th.ai[data-state="preenchendo"] .aih-title { color: var(--ink-faint); }
.pp-grid th.ai[data-state="pronto"] .aih-title { animation: tinta .9s; }
@keyframes tinta { from { color: var(--ink-faint); } }
.aih-menu { width: 28px; height: 26px; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; border-radius: 6px; display: grid; place-items: center; }
.aih-menu:hover { background: var(--paper-deep); color: var(--ink); }
.aih-type { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aih-type b { color: var(--special); font-weight: 600; }
.aih-type .jev-spinner { width: 12px; height: 12px; }
.dist { display: flex; height: 6px; gap: 1px; background: var(--sunken); border-radius: 3px; overflow: hidden; }
.dist i { display: block; height: 100%; width: 0; transition: width .35s; cursor: pointer; }
.dist i:hover { filter: brightness(.85); }
.pp-grid th.new { background: var(--surface); min-width: 260px; }
.newcol { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px dashed var(--line-strong); background: var(--surface); border-radius: var(--r-field); }
.newcol:focus-within { border: 1px solid var(--accent); box-shadow: var(--shadow-focus); }
.newcol.pulse { animation: pulso 2.6s infinite; }
.newcol .plus { color: var(--accent); }
.newcol input { flex: 1; min-width: 0; border: 0; background: transparent; font: 13.5px var(--font); color: var(--ink); outline: none; }
.newcol input::placeholder { color: var(--ink-faint); }
.newcol .kbd { font: 10.5px var(--mono); color: var(--ink-faint); border: 1px solid var(--line-strong); padding: 1px 5px; border-radius: 4px; }
.newhint { font: 11.5px var(--font); color: var(--ink-faint); white-space: normal; margin-top: 6px; text-transform: none; letter-spacing: 0; }
.newhint b { color: var(--accent); font-weight: 600; }
.newhint.err { color: var(--danger); }

.cel { display: flex; align-items: center; gap: 8px; width: 100%; position: relative; z-index: 1; }
.cel .v { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cel .v .ico { width: 14px; height: 14px; }
.cel.yes .v { color: var(--ok); } .cel.no .v { color: var(--ink-faint); } .cel.no .v .ico { color: var(--danger); } .cel.maybe .v { color: var(--warn); }
.cel.alerta.yes .v { color: var(--danger); } .cel.alerta.no .v .ico { color: var(--ok); }
.stamp { flex: none; margin-left: auto; height: 20px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; font: 600 11px var(--font); font-variant-numeric: tabular-nums; background: var(--ok-tint); color: var(--ok); }
.stamp.red { background: var(--danger-tint); color: var(--danger); } .stamp.ocre { background: var(--warn-tint); color: var(--warn); } .stamp.gray { background: var(--sunken); color: var(--ink-soft); }
.casas { display: inline-flex; gap: 2px; }
.casas i { width: 6px; height: 11px; border-radius: 2px; background: linear-gradient(90deg, var(--c, var(--accent)) calc(var(--f, 0) * 100%), var(--paper-deep) 0); }
.tag { display: inline-flex; align-items: center; gap: 6px; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m, #94A3B8); flex: none; }
.sk { display: block; height: 10px; width: 70%; border-radius: 5px; background: linear-gradient(90deg, var(--paper-deep) 25%, var(--sunken) 50%, var(--paper-deep) 75%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.sk.q { animation: none; background: var(--sunken); }
@keyframes shimmer { to { background-position: -200% 0; } }
.cell-err { color: var(--danger); font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }

/* entrada de cada lote: valor se escreve e a pill "cai" */
.pp-grid td.ai.pop .v { animation: ppEscreve .5s cubic-bezier(.3,.6,.2,1) var(--d, 0ms) backwards; }
@keyframes ppEscreve { 0% { clip-path: inset(-6px 100% -6px 0); opacity: .4; } 100% { clip-path: inset(-6px -8px -6px 0); opacity: 1; } }
.pp-grid td.ai.pop .stamp { animation: ppCarimbo .4s cubic-bezier(.2,1.4,.35,1) calc(var(--d, 0ms) + 300ms) backwards; }
@keyframes ppCarimbo { 0% { opacity: 0; transform: scale(1.6); } 65% { opacity: 1; transform: scale(.95); } 100% { transform: scale(1); } }
.pp-grid td.ai.pop::before { content: ""; position: absolute; inset: 4px; z-index: 0; pointer-events: none; background: var(--accent-tint); border-radius: 6px; opacity: 0; animation: ppMarca 2s ease-out var(--d, 0ms) backwards; }
@keyframes ppMarca { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes carimbo { 0% { transform: scale(1.6); opacity: 0; } 65% { transform: scale(.95); opacity: 1; } }
.flashcol { animation: flashcol 1.2s; }
@keyframes flashcol { 30% { box-shadow: inset 0 0 0 2px var(--accent); } }

/* menu da coluna */
.pp-menu { position: fixed; z-index: 60; min-width: 250px; max-width: 320px; max-height: min(460px, 70vh); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: 6px; }
.pp-menu h5 { margin: 8px 10px 4px; font: 600 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pp-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.pp-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-field); background: transparent; text-align: left; font: 500 13px var(--font); color: var(--ink); cursor: pointer; }
.pp-menu button:hover { background: var(--paper-deep); }
.pp-menu button .r { margin-left: auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pp-menu button .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--m, #94A3B8); flex: none; }
.pp-menu button.on::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: auto; }
.pp-menu button.danger { color: var(--danger); }
.pp-menu button.danger:hover { background: var(--danger-tint); }

/* ficha da linha */
.pp-panel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(440px, 100vw); background: var(--surface); box-shadow: var(--shadow-lift); transform: translateX(105%); transition: transform .3s cubic-bezier(.22,1,.36,1); z-index: 50; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.pp-panel.open { transform: none; }
.pp-panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pp-panel header .t { min-width: 0; }
#pnSub { font-size: 12px; color: var(--ink-faint); }
#pnTitle { font: 600 1.05rem var(--display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pnBody { overflow: auto; padding: 16px; display: grid; gap: 12px; align-content: start; }
#pnBody dl.src { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 0; }
#pnBody dl.src dt { font: 500 12px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 8px 0; border-bottom: 1px solid var(--line); }
#pnBody dl.src dd { margin: 0; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; color: var(--ink); }
#pnBody .blk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 8px; box-shadow: var(--shadow-card); }
#pnBody .blk.hl { border-color: var(--accent); box-shadow: var(--shadow-focus); }
#pnBody .blk .h { display: flex; gap: 6px; align-items: center; font: 600 13.5px var(--font); }
#pnBody .blk .h .ico { color: var(--special); }
#pnBody .blk .rot { font: 600 .68rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
#pnBody .blk .big { display: flex; align-items: center; gap: 12px; font: 600 1.6rem/1.05 var(--display); letter-spacing: -.03em; }
#pnBody .blk .big .stamp { font-size: 16px; height: 32px; padding: 0 12px; animation: carimbo .4s cubic-bezier(.2,1.4,.35,1); }
#pnBody .blk .big small { font: 12px var(--font); color: var(--ink-soft); letter-spacing: 0; }
#pnBody .blk .ft { border-top: 1px solid var(--line); padding-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.jev-bars { display: grid; gap: 5px; }
.jev-bar { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-soft); }
.jev-bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jev-bar .trk { height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; } .jev-bar .fil { height: 100%; background: var(--lapis-2); }
.jev-bar.top .fil { background: var(--accent); } .jev-bar.top.danger .fil { background: var(--danger); }
.jev-bar .pct { text-align: right; font-variant-numeric: tabular-nums; }
.jev-score { display: flex; gap: 3px; } .jev-score .seg { flex: 1; height: 8px; border-radius: 3px; background: var(--sunken); } .jev-score .seg.on { background: var(--c, var(--accent)); }

/* importação */
.pp-import { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.pp-import h2 { margin: 0 0 6px; font: 600 1.25rem var(--display); letter-spacing: -.02em; }
.pp-import .help { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.pp-import .drop.over textarea { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.pp-import textarea { min-height: 220px; font: 13px/1.6 var(--mono); }
.pp-import .acts { margin: 10px 0; } .pp-import .campos { margin-bottom: 12px; }
.pp-import #impGo { height: 40px; }
.pp-import h4 { margin: 0 0 8px; font: 600 .68rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pp-import .info { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-bottom: 8px; font-size: 12px; color: var(--warn); }
.pp-import .info .e { color: var(--danger); }
.pp-import .prev { overflow: auto; max-height: 420px; border: 1px solid var(--line); border-radius: var(--r-field); }
.pp-import .prev table { border-collapse: collapse; font-size: 13px; width: 100%; }
.pp-import .prev th { position: sticky; top: 0; background: var(--surface); color: var(--ink-faint); font: 500 12px var(--font); letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pp-import .prev td { padding: 0 10px; height: 34px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--line); color: var(--ink-soft); }
.pp-import .prev .mais { color: var(--ink-faint); font-style: italic; }

/* inspetor (camada escura, como o trilho) */
.jev-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--rail); color: #e7eef5; z-index: 80; transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; }
.jev-drawer.open { transform: none; }
.jev-drawer-backdrop { position: fixed; inset: 0; background: rgba(23,34,46,.3); z-index: 79; }
.jev-drawer header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rail-line); }
.jev-drawer header h3 { margin: 0; flex: 1; font: 600 1.05rem var(--display); letter-spacing: -.02em; }
.jev-drawer header .jev-btn { background: transparent; color: var(--rail-ink); border-color: var(--rail-line); }
.jev-drawer .explain { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--rail-ink); border-bottom: 1px solid var(--rail-line); }
.jev-drawer .explain b { color: #fff; } .jev-drawer .explain code { color: var(--rail-accent); font-family: var(--mono); }
#drCalls { overflow: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
#drCalls .jev-empty { color: var(--rail-faint); }
.jev-call { border: 1px solid var(--rail-line); border-radius: var(--r-card); background: var(--rail-2); overflow: hidden; }
.jev-call .hd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 10px; font-size: 12px; color: var(--rail-ink); }
.jev-call .hd b { color: #fff; } .jev-call .hd .dim { color: var(--rail-faint); }
.jev-call .hd .jev-badge { background: rgba(165,139,240,.2); color: #a58bf0; }
.jev-call .tabs { display: flex; gap: 2px; padding: 0 8px; }
.jev-call .tabs button { border: 0; background: transparent; color: var(--rail-ink); font: 500 12px var(--font); padding: 5px 10px; cursor: pointer; border-radius: 6px; }
.jev-call .tabs button.on { background: var(--rail-active); color: var(--rail-accent); }
.jev-call pre { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; font: 11.5px/1.45 var(--mono); color: #c9d4de; white-space: pre-wrap; word-break: break-word; }
.jev-call pre .k { color: var(--rail-accent); } .jev-call pre .s { color: #dda65a; } .jev-call pre .n { color: #e8756c; } .jev-call pre .b { color: #6b9bff; }

/* responsivo */
@media (max-width: 1239px) { .pp-rules { display: none; } .pp-hero { grid-template-columns: auto 1fr; } }
@media (max-width: 1023px) { .pp-hero { grid-template-columns: 1fr; gap: 6px; } .pp-bar .sugs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .jev-apptitle span { display: none; } }
@media (max-width: 980px) { .pp-import { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #btnInsp .jev-hide-mobile { display: none; } }
@media (max-height: 639px) { main.pp { height: auto; min-height: 0; } .pp-gridwrap { height: 64vh; min-height: 340px; } }
@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  .jev-metric.opt, .jev-apptitle span { display: none; }
  .jev-apptitle b { white-space: normal; font-size: 14px; }
  main.pp { height: auto; min-height: 0; padding: 12px 16px 0; }
  .pp-gridwrap { height: 64vh; min-height: 340px; }
  .pp-grid th, .pp-grid td { height: 44px; }
  .pp-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .pp-bar .lbl { display: none; } .pp-bar .sugs { grid-column: 1 / -1; } .pp-bar .busca { width: auto; flex: 1; }
  .pp-status { grid-template-columns: 1fr; }
  .pp-status .actions, .pp-status .actions select, .pp-status .actions .jev-btn { width: 100%; }
  .pp-grid td.first, .pp-grid th.first { position: static; }
  .pp-grid thead th { height: 96px; }
  .aih-menu { width: 38px; }
  .pp-panel { top: 0; }
  .jev-btn { height: 40px; } .jev-btn--sm { height: 36px; }
}
@media (max-width: 480px) { .jev-metric.lat .lbl { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .jev-topbar, .pp-tabsbar, .pp-bar, .pp-panel, .pp-menu, .jev-footer, th.new, .jev-drawer { display: none !important; } main.pp { height: auto; } }