/* Radar do Júri · Techprocesse — tema compartilhado */
:root{
  color-scheme: dark;
  --bg:#0A0A0A; --bg-2:#0D0D0D; --bg-3:#060606;
  --surface:#111111; --surface-2:#171717;
  --line:rgba(236,236,236,.08); --line-2:rgba(236,236,236,.15);
  --text:#EDEDED; --muted:#9C9C9C; --dim:#666666;
  --accent:#FF6A00; --accent-rgb:255,106,0; --accent-hi:#FFB067; --accent-dk:#E65100;
  --ok:#3DDC97; --danger:#FF8A7A; --warn:#FFB067;
  --radius:18px;
  --grad:linear-gradient(135deg,#FFB067 -20%,#FF6A00 45%,#E65100 120%);
  --ease:cubic-bezier(.2,.7,.1,1);
  --f-title:"Poppins",system-ui,sans-serif;
  --f-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* categorias de defesa: laranja (advogado) × neutros (Defensoria) */
  --c1:#FF6A00; --c2:#EDEDED; --c3:#B34700; --c4:#FFB067; --c5:#8C8C8C; --c6:#3A3A3A; --c7:#262626;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.6 var(--f-text);min-height:100vh;
  background-image:radial-gradient(900px 420px at 50% -120px,rgba(var(--accent-rgb),.10),transparent 70%)}
a{color:var(--accent-hi);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:rgba(var(--accent-rgb),.35)}
.mono{font-family:var(--f-mono)}
h1,h2,h3{font-family:var(--f-title);font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:0}

/* ---------- cabeçalho do app ---------- */
.tp-top{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.tp-top .in{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.tp-brand{display:flex;align-items:center;gap:12px;color:var(--text);flex:none}
.tp-brand img{height:26px;width:auto;display:block}
.tp-brand .sep{width:1px;height:22px;background:var(--line-2)}
.tp-brand .prod{font:600 15px/1 var(--f-title);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.tp-brand .prod .uf{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--dim)}
.tp-nav{display:flex;gap:4px;flex-wrap:wrap}
.tp-nav a{font:500 14px/1 var(--f-text);color:var(--muted);padding:9px 14px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px}
.tp-nav a:hover{color:var(--text);background:var(--surface-2)}
.tp-nav a.on{color:var(--text);background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.35)}
.tp-nav a.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.9)}
.tp-extra{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tp-extra input[type=month]{font:500 13px var(--f-mono);color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:0 10px;height:36px;color-scheme:dark}
.tp-extra .ate{font:500 11px var(--f-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.tp-sair{margin-left:auto;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tp-sair:hover{color:var(--accent-hi)}
@media (max-width:760px){.tp-top{position:static}.tp-top .in{gap:8px 12px}.tp-brand img{height:22px}.tp-nav a{padding:8px 11px;font-size:13.5px}.tp-sair{margin-left:auto}}
@media (max-width:600px){.filters select,.filters input{flex:1 1 100%!important}.fonte{text-align:left}}

/* ---------- estrutura ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:28px 16px 64px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.9)}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:22px}
.pagehead h1{font-size:clamp(26px,3.4vw,38px)}
.pagehead h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:14.5px}
.fonte{font:400 11px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:right}
.fonte b{color:var(--muted);font-weight:500}

/* ---------- cards ---------- */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005)),var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:border-color .3s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.07),transparent 60%)}
.card:hover{border-color:var(--line-2)}
.card:hover::after{opacity:1}
.card.destaque{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 20px 60px -30px rgba(var(--accent-rgb),.45)}
.card h2{font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.card .ct{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.card .ct::before{content:"";width:5px;height:5px;border:1px solid var(--accent);transform:rotate(45deg)}
.win{padding:0;overflow:hidden}
.win .bar{height:40px;display:flex;align-items:center;gap:6px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:#262626}
.win .bar span{margin-left:auto;font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.win .body{padding:18px 20px}

/* ---------- botões, campos e pílulas ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;border:1px solid transparent;
  font:600 14.5px/1 var(--f-text);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,background .3s;white-space:nowrap}
.btn.pri{background:var(--grad);color:#111;box-shadow:0 10px 30px -12px rgba(var(--accent-rgb),.8)}
.btn.pri::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn.pri:hover{color:#111;transform:translateY(-1px);box-shadow:0 14px 36px -12px rgba(var(--accent-rgb),.95)}
.btn.pri:hover::after{left:120%}
.btn.sec{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.sec:hover{color:var(--text);border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
label.lb{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px}
.campo{width:100%}
.campo,.filters input,.filters select{height:48px;background-color:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;color:var(--text);font:400 15px var(--f-text);padding:0 14px;outline:none;transition:border-color .2s,box-shadow .2s;color-scheme:dark}
.campo:focus,.filters input:focus,.filters select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.pill.hl{border-color:rgba(var(--accent-rgb),.4);color:var(--accent-hi)}
.pill.okp{border-color:rgba(61,220,151,.35);color:var(--ok)}
.pill.okp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pisca 1.6s infinite}
.pill.bad{border-color:rgba(255,138,122,.4);color:var(--danger)}
@keyframes pisca{50%{opacity:.25}}

/* ---------- radar ---------- */
.radar{position:relative;width:var(--sz,120px);height:var(--sz,120px);border-radius:50%;flex:none;
  background:
    radial-gradient(circle,transparent 0 23%,rgba(255,176,103,.18) 23.5% 24%,transparent 24.5% 48%,rgba(255,176,103,.14) 48.5% 49%,transparent 49.5% 73%,rgba(255,176,103,.10) 73.5% 74%,transparent 74.5% 98%,rgba(255,176,103,.22) 98.5%);
  overflow:hidden}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.12) 50deg,transparent 90deg);animation:gira 6s linear infinite}
.radar::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.9)}
@keyframes gira{to{transform:rotate(360deg)}}
.grade{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%)}

/* ---------- entrada suave ---------- */
.sobe{animation:sobe .6s var(--ease) both}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.filters input[type=search]{padding-left:40px}