/* Fonte Archivo servida pelo próprio servidor (só pesos 400 a 800, largura 100 a 120 e letras latinas: 35 KB) */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100% 120%; font-display: swap; src: url(/fontes/archivo.woff2) format("woff2"); }
/* Plataforma JPM: mesma identidade do site juanpablomarzilli.com (azul-noite, azul elétrico, âmbar, Archivo) */
:root {
  --ink: #04071A; --night: #0A1236; --night-2: #101A47; --night-3: #16225a;
  --blue: #2F5CFF; --blue-hi: #4A73FF; --sky: #A9BEFF; --amber: #F4B25C;
  --paper: #ECEFF8; --mute: #8D96B8;
  --line: rgba(169, 190, 255, .14); --line-2: rgba(169, 190, 255, .26);
  --ok: #3ddc97; --warn: #F4B25C; --bad: #ff6b81;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --lado: 248px;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ink); color: var(--paper); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

.selo-jpm { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2F5CFF 0%, #1B2F9C 70%, #786780 100%);
  font-weight: 800; font-size: 14px; letter-spacing: .03em; color: var(--paper); font-variation-settings: "wdth" 110; }
.titulo { font-weight: 700; font-variation-settings: "wdth" 115; letter-spacing: -.015em; line-height: 1.1; }

/* ---------- entrada ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(900px 520px at 85% -10%, rgba(47,92,255,.35), transparent 60%), radial-gradient(700px 420px at -10% 110%, rgba(244,178,92,.16), transparent 60%), var(--ink); }
.entrada form { width: min(400px, 100%); display: grid; gap: 16px; padding: 34px 28px; border-radius: 22px; background: rgba(10,18,54,.72); border: 1px solid var(--line-2); backdrop-filter: blur(14px); }
.entrada .selo-jpm { width: 58px; height: 58px; font-size: 20px; border-radius: 16px; margin: 0 auto; }
.entrada h1 { font-size: 1.700rem; text-align: center; }
.entrada p { text-align: center; color: var(--mute); }
.erro { color: var(--bad) !important; font-weight: 600; min-height: 1.400em; }

/* ---------- formulários e botões ---------- */
label { display: grid; gap: 6px; font-size: .850rem; font-weight: 600; color: var(--sky); }
label.linha { display: flex; align-items: center; gap: 10px; color: var(--paper); font-weight: 500; font-size: .950rem; }
input, select, textarea { width: 100%; min-height: 44px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(4,7,26,.6); color: var(--paper); }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(47,92,255,.25); }
input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--blue); flex: none; }
input[type="color"] { padding: 4px; height: 44px; cursor: pointer; }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--line-2);
  background: rgba(16,26,71,.6); font-weight: 600; font-size: .920rem; white-space: nowrap; cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--ease); }
.bt:hover { border-color: var(--sky); }
.bt:active { transform: translateY(1px); }
.bt--azul { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 10px 30px -14px rgba(47,92,255,.9); }
.bt--azul:hover { background: var(--blue-hi); border-color: var(--blue-hi); }
.bt--ambar { background: var(--amber); border-color: var(--amber); color: #2a1a00; }
.bt--perigo { color: var(--bad); }
.bt--p { min-height: 34px; padding: 0 12px; font-size: .850rem; border-radius: 9px; }
.bt--grande { min-height: 50px; font-size: 1rem; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.form .larga { grid-column: 1 / -1; }
.acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.sub { color: var(--mute); font-size: .880rem; }
.sep { height: 1px; background: var(--line); margin: 16px 0; grid-column: 1 / -1; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); min-height: 100vh; }
.lado { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px; background: var(--night); border-right: 1px solid var(--line); }
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.marca b { display: block; font-size: 1.050rem; }
.marca small { display: block; color: var(--mute); font-size: .780rem; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; color: var(--mute); font-weight: 600; }
.nav a svg { width: 20px; height: 20px; }
.nav a:hover { color: var(--paper); background: rgba(169,190,255,.06); }
.nav a.ativo { color: #fff; background: linear-gradient(90deg, rgba(47,92,255,.35), rgba(47,92,255,.08)); box-shadow: inset 3px 0 0 var(--blue-hi); }
.lado .quem { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.lado .quem span { color: var(--mute); font-size: .850rem; }
.lado .quem div { display: flex; gap: 8px; }
.principal { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 60px;
  background: radial-gradient(900px 500px at 100% -10%, rgba(47,92,255,.12), transparent 60%), var(--ink); }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lado { position: sticky; z-index: 20; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
  .lado::-webkit-scrollbar { display: none; }
  .marca { padding: 0 8px 0 0; } .marca span { display: none; }
  .nav { display: flex; gap: 4px; } .nav a { padding: 9px 11px; white-space: nowrap; }
  .lado .quem { margin: 0 0 0 auto; padding: 0; border: 0; } .lado .quem span { display: none; }
}

.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 22px; }
.cabeca h1 { font-size: clamp(1.600rem, 3vw, 2.200rem); margin-right: auto; }
.cabeca .sub { width: 100%; order: 3; margin-top: -6px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--sky); font-weight: 600; font-size: .900rem; margin-bottom: 10px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { padding: 18px 20px; border-radius: 18px; background: linear-gradient(160deg, rgba(16,26,71,.9), rgba(10,18,54,.7)); border: 1px solid var(--line); }
.kpi small { display: block; color: var(--mute); font-weight: 600; font-size: .820rem; }
.kpi strong { display: block; font-size: 1.900rem; font-weight: 700; font-variation-settings: "wdth" 112; line-height: 1.200; margin: 4px 0 2px; }
.kpi em { font-style: normal; color: var(--mute); font-size: .820rem; }
.kpi--azul { background: linear-gradient(150deg, rgba(47,92,255,.45), rgba(16,26,71,.9) 70%); border-color: rgba(74,115,255,.5); }
.kpi--alerta strong { color: var(--amber); } .kpi--ruim strong { color: var(--bad); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 420px) { .grade { grid-template-columns: 1fr; } }
.cartao { min-width: 0; padding: 20px; border-radius: 18px; background: rgba(10,18,54,.75); border: 1px solid var(--line); }
.cartao--largo { grid-column: 1 / -1; }
.cartao h2 { font-size: 1.050rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.lista { list-style: none; display: grid; }
.lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.lista li:first-child { border-top: 0; }
.lista li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.lista b { white-space: nowrap; }
.vazio { color: var(--mute); padding: 6px 0; }

.tabela { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: rgba(10,18,54,.75); }
table { width: 100%; border-collapse: collapse; font-size: .920rem; min-width: 820px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--mute); font-size: .780rem; font-weight: 700; white-space: nowrap; background: rgba(16,26,71,.6); }
tr:last-child td { border-bottom: 0; }
tbody tr.clica { cursor: pointer; } tbody tr.clica:hover { background: rgba(47,92,255,.08); }
td.n, th.n { text-align: right; white-space: nowrap; }

.etq { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .760rem; font-weight: 700; white-space: nowrap; border: 1px solid; }
.etq::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etq--ok { color: var(--ok); border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.08); }
.etq--alerta { color: var(--amber); border-color: rgba(244,178,92,.45); background: rgba(244,178,92,.08); }
.etq--ruim { color: var(--bad); border-color: rgba(255,107,129,.45); background: rgba(255,107,129,.08); }
.etq--neutro { color: var(--mute); border-color: var(--line-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.empresa-cor { width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block; vertical-align: middle; margin-right: 8px; }
.mini-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; flex: none; }
.nome-emp { display: flex; align-items: center; gap: 12px; }
.nome-emp b { display: block; } .nome-emp span { color: var(--mute); font-size: .820rem; }

/* ---------- empresa ---------- */
.ficha { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 22px; border-radius: 20px; margin-bottom: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cor-emp, var(--blue)) 30%, transparent), rgba(10,18,54,.8) 55%); border: 1px solid var(--line-2); }
.logo-ficha { width: 74px; height: 74px; border-radius: 16px; background: #fff; object-fit: contain; flex: none; font-size: 2rem; }
.ficha h1 { font-size: clamp(1.500rem, 3vw, 2rem); }
.ficha .dados { flex: 1; min-width: 220px; }
.ficha .dados p { color: var(--sky); font-size: .900rem; }
.ficha .botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* cada sistema aparece com a identidade dele */
.sis { position: relative; overflow: hidden; padding: 0; }
.sis__topo { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #fff; }
.sis__topo b { display: block; font-size: 1.100rem; } .sis__topo small { display: block; opacity: .8; font-size: .820rem; }
.sis__selo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.sis__selo svg { width: 24px; height: 24px; }
.sis--pecas .sis__topo { background: linear-gradient(120deg, #111112, #1b1b1d 60%, rgba(243,118,2,.35)); border-bottom: 2px solid #f37602; }
.sis--pecas .sis__selo { background: #f37602; color: #140900; }
.sis--aguia .sis__topo { background: radial-gradient(500px 200px at 100% 0%, rgba(37,99,235,.45), transparent 60%), #0b1730; border-bottom: 2px solid #f5a524; }
.sis--aguia .sis__selo { background: #f5a524; color: #4a2f00; }
.sis__corpo { padding: 18px 20px 20px; }
.sis__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.numeros div { padding: 10px 12px; border-radius: 12px; background: rgba(4,7,26,.5); border: 1px solid var(--line); }
.numeros small { display: block; color: var(--mute); font-size: .760rem; font-weight: 600; }
.numeros b { display: block; font-size: 1.050rem; overflow-wrap: anywhere; }
.sis__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sis--vazio { display: grid; place-items: center; gap: 10px; padding: 30px 20px; text-align: center; border-style: dashed; color: var(--mute); }
.aviso-linha { padding: 10px 12px; border-radius: 12px; margin-bottom: 14px; font-size: .900rem; font-weight: 600; }
.aviso-linha--alerta { color: var(--amber); background: rgba(244,178,92,.1); border: 1px solid rgba(244,178,92,.35); }
.aviso-linha--ruim { color: var(--bad); background: rgba(255,107,129,.1); border: 1px solid rgba(255,107,129,.35); }

/* ---------- janelas e avisos ---------- */
.modal { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border-radius: 22px; border: 1px solid var(--line-2); background: var(--night); color: var(--paper); }
.modal::backdrop { background: rgba(2,4,14,.75); backdrop-filter: blur(3px); }
#modal-corpo { padding: 26px; }
#modal-corpo h2 { font-size: 1.350rem; margin-bottom: 6px; padding-right: 40px; }
#modal-corpo > p { color: var(--mute); margin-bottom: 16px; }
.fechar { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--night-2); color: var(--paper); font-size: 1.200rem; cursor: pointer; }
.avisos { position: fixed; z-index: 100; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100vw - 24px)); }
.aviso { padding: 13px 18px; border-radius: 14px; font-weight: 600; background: #0f5c3c; border: 1px solid var(--ok); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.aviso--erro { background: #5c1020; border-color: var(--bad); }
.escolha { display: grid; gap: 10px; }
.escolha > label { padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(4,7,26,.4); }
.escolha > label:has(input:checked) { border-color: var(--blue-hi); background: rgba(47,92,255,.12); }
.escolha .form { margin-top: 12px; }

/* barra fina no topo enquanto o sistema conversa com o servidor (internet lenta) */
html.carregando::before { content: ""; position: fixed; z-index: 9999; top: 0; left: 0; height: 3px; width: 40%;
  background: linear-gradient(90deg, var(--blue), var(--amber)); animation: carregando 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes carregando { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { html.carregando::before { animation: none; width: 100%; opacity: .6; } }