/* LOJA À LUPA — relatório (lê os dados de um JSON) */
:root{
  --bg:#040817; --bg2:#081231; --panel:#0B1738; --line:rgba(77,140,255,.28);
  --blue:#1F6BFF; --neon:#3D8BFF; --cyan:#59C8FF;
  --text:#EEF3FF; --muted:#A9B8DC;
  --card:#F6F8FE; --ink:#0D1A36; --ink2:#43527A; --rule:#DDE5F5;
  --red:#E5484D; --red-bg:#FDECEC; --red-ink:#9B1C20;
  --amb:#F5A524; --amb-bg:#FFF3DD; --amb-ink:#7A4300;
  --grn:#22B573; --grn-bg:#E3F6EC; --grn-ink:#12673F;
  --blu-bg:#E6EFFF; --blu-ink:#1747B8;
  --r:18px;
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope","Plus Jakarta Sans",system-ui,sans-serif;line-height:1.55;
  background-image:radial-gradient(1200px 500px at 85% -10%,rgba(31,107,255,.35),transparent 60%),radial-gradient(900px 400px at -10% 30%,rgba(89,200,255,.12),transparent 60%);background-attachment:fixed}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
/* top bar */
.top{position:sticky;top:0;z-index:5;background:rgba(4,8,23,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;text-decoration:none}
.logo i{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#2B7BFF,#123FB0);display:grid;place-items:center;box-shadow:0 0 18px rgba(61,139,255,.55)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:700}
.btn-p{background:linear-gradient(180deg,#2E7BFF,#1756E8);color:#fff;box-shadow:0 0 0 1px rgba(120,170,255,.5) inset,0 0 22px rgba(46,123,255,.55)}
.btn-g{background:transparent;color:var(--text);border:1.5px solid var(--line)}
/* layout */
.grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding-top:28px;padding-bottom:60px}
.grid>*,.cols>*{min-width:0}
html,body{overflow-x:hidden}
nav.side{position:sticky;top:88px;align-self:start;background:rgba(11,23,56,.7);border:1px solid var(--line);border-radius:var(--r);padding:10px}
nav.side a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--muted);font-size:.86rem;font-weight:600}
nav.side a:hover,nav.side a.on{background:rgba(31,107,255,.22);color:#fff;box-shadow:0 0 0 1px rgba(61,139,255,.45) inset}
.chips{display:none}
/* header */
.kicker{color:var(--cyan);font-size:.8rem;overflow-wrap:anywhere;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
h1{font-size:2.3rem;line-height:1.1;margin:.25em 0 .2em;font-weight:800;word-break:break-word}
.sub{color:var(--muted);font-size:.95rem}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.05em;padding:5px 10px;border-radius:999px;border:1px solid rgba(34,181,115,.6);color:#7EF0B5;background:rgba(34,181,115,.12);vertical-align:middle}
/* verdict */
.verdict{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:22px;border-radius:22px;background:linear-gradient(160deg,rgba(14,30,72,.95),rgba(8,18,49,.95));border:1px solid var(--line);box-shadow:0 0 40px rgba(31,107,255,.18)}
.light{width:66px;padding:9px;border-radius:40px;background:#020510;border:1px solid #1B2A55;display:flex;flex-direction:column;gap:8px}
.light span{width:48px;height:48px;border-radius:50%;background:#1A2342;opacity:.45}
.light .r.on{background:var(--red);opacity:1;box-shadow:0 0 22px var(--red)}
.light .a.on{background:var(--amb);opacity:1;box-shadow:0 0 22px var(--amb)}
.light .g.on{background:var(--grn);opacity:1;box-shadow:0 0 22px var(--grn)}
.v-label{font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.v-title{font-size:1.75rem;font-weight:800;line-height:1.15;margin:.15em 0 .25em}
.v-title.vermelho{color:#FF8C8F}.v-title.amarelo{color:#FFC861}.v-title.verde{color:#6EE7A8}
.v-text{color:#D6E0FA}
.two{margin-top:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#E8EEFF}
.prov{margin-top:16px;background:var(--blu-bg);color:var(--blu-ink);border-radius:14px;padding:14px 16px}
/* summary tiles */
.tiles{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:rgba(11,23,56,.85);border:1px solid var(--line);border-radius:16px;padding:14px 15px}
.tile b{display:block;font-size:.9rem}
.st{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:.84rem;font-weight:700}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.dot.vermelho{background:var(--red);box-shadow:0 0 10px var(--red)}.dot.amarelo{background:var(--amb);box-shadow:0 0 10px var(--amb)}.dot.verde{background:var(--grn);box-shadow:0 0 10px var(--grn)}.dot.azul{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
/* light cards */
section.card{margin-top:22px;background:var(--card);color:var(--ink);border-radius:22px;padding:24px 26px;scroll-margin-top:84px}
section.card h2{margin:0 0 .5em;font-size:1.4rem;line-height:1.2;display:flex;align-items:center;gap:10px}
section.card h2 .ic{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#2B7BFF,#123FB0);display:grid;place-items:center;flex-shrink:0}
.note{font-size:.84rem;color:var(--ink2);margin-bottom:.8em}
.ess{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ess:last-child{border-bottom:0}
.badge{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800}
.badge.vermelho{background:var(--red-bg);color:var(--red-ink)}.badge.amarelo{background:var(--amb-bg);color:var(--amb-ink)}.badge.verde{background:var(--grn-bg);color:var(--grn-ink)}.badge.azul{background:var(--blu-bg);color:var(--blu-ink)}
.ess strong.vermelho{color:var(--red-ink)}.ess strong.amarelo{color:var(--amb-ink)}.ess strong.verde{color:var(--grn-ink)}
.drop{margin-top:22px;border-radius:22px;padding:24px 26px;background:linear-gradient(160deg,#2A1A05,#1A1206);border:1px solid rgba(245,165,36,.55);box-shadow:0 0 30px rgba(245,165,36,.12)}
.drop h2{margin:0 0 .4em;font-size:1.35rem;color:#FFC861}
.list2{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;font-size:.93rem;margin-top:.6em}
.list2 div{display:flex;gap:8px}
.drop .means{margin-top:16px;background:rgba(255,255,255,.07);border-radius:14px;padding:13px 15px}
.phr{display:grid;grid-template-columns:13em 1fr;gap:6px 20px;padding:12px 0;border-bottom:1px solid var(--rule)}
.phr:last-of-type{border-bottom:0}
.phr b{color:var(--amb-ink)}
.health{margin-top:14px;background:var(--red-bg);color:var(--red-ink);border-radius:14px;padding:14px 16px}
.pair{border:1px solid var(--rule);border-radius:16px;overflow:hidden;margin-top:12px}
.pair .p1{background:var(--blu-bg);padding:12px 15px}.pair .p2{padding:12px 15px}
.lbl{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.p1 .lbl{color:var(--blu-ink)}.p2 .lbl{color:var(--amb-ink)}
.laws{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.law{border:1px solid var(--rule);border-radius:16px;padding:14px 15px;background:#fff}
.law .lbl.a{color:var(--amb-ink)}.law .lbl.b{color:var(--grn-ink);margin-top:10px;display:block}.law .lbl.c{color:var(--blu-ink);margin-top:10px;display:block}
.steps{margin-top:22px;border-radius:22px;padding:24px 26px;background:linear-gradient(160deg,#0E2160,#0A1640);border:1px solid var(--line);scroll-margin-top:84px}
.steps h2{margin:0 0 .6em;font-size:1.4rem}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.steps li span.n{width:32px;height:32px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:800;flex-shrink:0;box-shadow:0 0 14px rgba(46,123,255,.7)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cols section.card{margin-top:22px}
.row{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.row:last-child{border-bottom:0}
.row b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.row b.ok{color:var(--grn-ink)}.row b.mau{color:var(--red-ink)}.row b.neutro{color:var(--ink2)}
.row a{color:var(--blu-ink);font-weight:700}
.ok-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.ok-list div::before{content:"✓";color:var(--grn-ink);font-weight:800;margin-right:8px}
.links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.links .btn{text-align:center;padding:10px 18px}
.links a.btn-g{color:var(--blu-ink);border-color:#B9CCF5}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:.82rem}
footer p{margin:.4em 0}
@media (max-width:900px){
  html{font-size:17px}
  .wrap{padding-left:16px;padding-right:16px}
  .grid{grid-template-columns:1fr;padding-top:18px}
  nav.side{display:none}
  .chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;margin:14px 0 0;scrollbar-width:none}
  .chips a{flex-shrink:0;padding:8px 13px;border-radius:999px;border:1px solid var(--line);font-size:.8rem;font-weight:700;text-decoration:none;color:var(--muted);background:rgba(11,23,56,.7)}
  h1{font-size:1.75rem}
  .verdict{grid-template-columns:1fr;justify-items:start}
  .light{flex-direction:row;width:auto;border-radius:40px}
  .light span{width:40px;height:40px}
  .tiles{grid-template-columns:1fr 1fr}
  .list2,.ok-list,.laws,.links,.cols{grid-template-columns:1fr}
  .phr{grid-template-columns:1fr}
  section.card,.drop,.steps{padding:20px 18px;border-radius:18px}
  .top .btn{padding:0 14px;min-height:42px;font-size:.85rem}
}
@media print{
  body{background:#fff;color:#000}.top,nav.side,.chips{display:none}.grid{grid-template-columns:1fr}
  .verdict,.tile,.steps,.drop{background:#fff!important;color:#000;box-shadow:none;border-color:#ccc}
  .v-text,.two,.sub,.steps li{color:#000}
}
.exemplo-aviso{margin:16px auto 0;width:calc(100% - 32px);max-width:1140px;padding-top:12px;padding-bottom:12px;border-radius:14px;background:rgba(89,200,255,.1);border:1px solid rgba(89,200,255,.4);color:#D6F1FF;font-size:.88rem}
.exemplo-aviso a{color:#fff;font-weight:700}

h1,h2,.v-title,.logo,.btn{font-family:"Sora","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.02em}
