/* Manual do Radar — a MESMA tipografia e as MESMAS cores do produto (radar-tokens.css).
   Manual com identidade propria ensina o Roger a reconhecer o manual, e nao o sistema. */
@font-face{font-family:'Barlow';src:url(barlow-400-latin.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url(barlow-600-latin.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(bebasneue-400-latin.woff2)format('woff2');font-weight:400;font-display:swap}

:root{
  --bg:#F2F5FA; --surface:#FFFFFF; --surface-2:#E7EDF6;
  --line:rgba(11,20,36,.09); --line-2:rgba(11,20,36,.16);
  --ink:#0B1424; --ink-2:#33445E; --ink-3:#5A6B85;
  --accent:#1668B8; --ok:#157F3C; --alert:#C42A2A; --alert-soft:rgba(196,42,42,.08);
  --r:14px; --sombra:0 1px 2px rgba(11,20,36,.05),0 10px 30px -16px rgba(11,20,36,.18);
  --topo:56px; --rodape:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.6 'Barlow',system-ui,-apple-system,sans-serif;
  padding-bottom:calc(var(--rodape) + env(safe-area-inset-bottom,0px));
  overflow-x:hidden}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:30;background:var(--surface);
  border-bottom:1px solid var(--line);padding:10px 16px 0}
.marca{display:flex;align-items:center;gap:10px;height:36px}
.marca img{height:19px;width:auto}
.marca b{font:400 20px/1 'Bebas Neue',sans-serif;letter-spacing:.1em}
.marca b i{color:var(--accent);font-style:normal}
.marca span{margin-left:auto;font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.barra-prog{height:3px;background:var(--surface-2);border-radius:99px;margin:8px 0 6px;overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.rolachips{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,black calc(100% - 20px),transparent);
          mask-image:linear-gradient(90deg,black calc(100% - 20px),transparent)}
.rolachips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:99px;background:transparent;color:var(--ink-3);
  font:600 14px/1 'Barlow',sans-serif;cursor:pointer;white-space:nowrap}
.chip .n{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-2);font-size:12px}
.chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-current="true"] .n{background:rgba(255,255,255,.22);color:#fff}
.chip.feito .n{background:var(--ok);color:#fff}
.chip .star{color:var(--alert)}
.chip[aria-current] .star{color:#FF9B93}

/* ---------- corpo ---------- */
main{padding:22px 16px 30px;max-width:640px;margin:0 auto}
.trilha{font:400 12px/1 'Bebas Neue',sans-serif;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase}
h1{font:400 40px/.98 'Bebas Neue',sans-serif;letter-spacing:.005em;margin:10px 0 8px}
.sub{font:400 12px/1.45 'Bebas Neue',sans-serif;letter-spacing:.13em;color:var(--ink-3);
  text-transform:uppercase;margin:0 0 14px}
.risco{width:44px;height:3px;background:var(--alert);border-radius:99px;margin:0 0 22px}
h2{font:400 13px/1 'Bebas Neue',sans-serif;letter-spacing:.15em;color:var(--accent);
  text-transform:uppercase;margin:30px 0 10px}
p{margin:0 0 14px}
b,strong{font-weight:600}
code{font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);
  padding:2px 6px;border-radius:6px}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}

/* ---------- print com anotacao ---------- */
figure{margin:20px 0 22px}
.moldura{position:relative;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:var(--surface);box-shadow:var(--sombra);line-height:0}
.moldura img{width:100%;height:auto;display:block}
.moldura svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
figcaption{margin-top:9px;font-size:14px;line-height:1.45;color:var(--ink-3)}
/* o circulo e a seta que marcam o print */
.anota .aro{fill:none;stroke:#E0342F;stroke-width:1.1;filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
.anota .seta{stroke:#E0342F;stroke-width:1.1;fill:none;marker-end:url(#ponta)}
.anota .bolha{fill:#E0342F}
.anota .num{fill:#fff;font:600 3.4px 'Barlow',sans-serif;text-anchor:middle;dominant-baseline:central}

/* ---------- passos ---------- */
ol.passos{list-style:none;margin:16px 0 0;padding:0;counter-reset:p}
ol.passos>li{position:relative;padding:0 0 18px 40px;counter-increment:p}
ol.passos>li::before{content:counter(p);position:absolute;left:0;top:1px;width:26px;height:26px;
  display:grid;place-items:center;border-radius:99px;background:var(--ink);color:#fff;
  font:600 13px/1 'Barlow',sans-serif}
ol.passos>li::after{content:'';position:absolute;left:13px;top:32px;bottom:4px;width:1px;
  background:var(--line-2)}
ol.passos>li:last-child::after{display:none}
ol.passos>li>b:first-child{display:block;margin-bottom:3px}
ol.passos p{margin:0;color:var(--ink-2);font-size:16px}

/* ---------- caixas ---------- */
.nota{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r) var(--r) 0;
  padding:14px 16px;margin:18px 0;box-shadow:var(--sombra)}
.nota.atencao{border-left-color:var(--alert);background:var(--alert-soft);box-shadow:none}
.nota.ok{border-left-color:var(--ok)}
.nota .t{font:400 12px/1 'Bebas Neue',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:7px}
.nota.atencao .t{color:var(--alert)}
.nota p:last-child{margin:0}

/* etiqueta igual a do sistema, para o Roger reconhecer */
.etq{display:inline-flex;padding:2px 7px;border-radius:6px;font:400 12px/1.5 'Bebas Neue',sans-serif;
  letter-spacing:.08em;background:var(--alert-soft);color:var(--alert);white-space:nowrap}
.etq.fria{background:var(--surface-2);color:var(--ink-3)}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
th{text-align:left;font:400 12px/1 'Bebas Neue',sans-serif;letter-spacing:.12em;color:var(--ink-3);
  text-transform:uppercase;padding:0 8px 8px 0;border-bottom:1px solid var(--line-2)}
td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:last-child,th:last-child{padding-right:0}

/* ---------- rodape ---------- */
.rodape{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;align-items:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);
  border-top:1px solid var(--line)}
.rodape button{min-height:44px;border-radius:99px;font:600 15px/1 'Barlow',sans-serif;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);padding:0 14px}
.rodape .prox{margin-left:auto;background:var(--accent);border-color:var(--accent);color:#fff;
  padding:0 20px}
.rodape .marcar{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rodape .marcar[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}
.rodape button:disabled{opacity:.35;cursor:default}
@media (max-width:374px){
  .rodape{gap:6px;padding-left:10px;padding-right:10px}
  .rodape .rot{display:none}
  .rodape button{padding:0 12px;font-size:14px}
  .rodape .prox{padding:0 12px}
}

@media (min-width:700px){
  body{font-size:18px}
  h1{font-size:52px}
  main{padding:30px 24px 40px}
}