/* Rotulagem Nutricional (rotulagem.js).
   Início com a ilustração "do prato à embalagem" e os rótulos em cartões; editor guiado: trilha das etapas e rótulo ao vivo à esquerda,
   a etapa à direita (com uma explicação curta) e o rodapé fixo com Voltar, Salvar e Continuar. O rótulo aparece sem fundo branco na
   tela (na cor do tema); o branco entra só nos arquivos. */

/* ===================== base ===================== */
.hm-box.pc-box.rot-box{margin-top:2px;background:none;box-shadow:none;border:0;border-radius:0;padding:0}
.hm-box.pc-box.rot-box>.hm-in.rot-in{display:flex;flex-direction:column;gap:22px;background:none;box-shadow:none;border:0;border-radius:0;padding:4px 2px 24px}
.imp-chip.warn{background:var(--warn-bg);color:var(--warn-ink)}
.rotx-kick{display:block;font:600 11px/1.3 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@keyframes rotEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rotPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* botões */
.rot-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:600 13px 'Inter',sans-serif;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}
.rot-bt:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line));background:var(--surface-2)}
.rot-bt:active{transform:scale(.98)}
.rot-bt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rot-bt svg{flex:none;color:currentColor}
.rot-bt.pri{background:#162329;border-color:#162329;color:#fff;box-shadow:0 8px 18px -10px rgba(22,35,41,.6)}
.rot-bt.pri:hover{background:#22343b;border-color:#22343b}
:root[data-theme="dark"] .rot-bt.pri{background:#DBEAE5;border-color:#DBEAE5;color:#0E1416;box-shadow:none}
:root[data-theme="dark"] .rot-bt.pri:hover{background:#fff;border-color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rot-bt.pri{background:#DBEAE5;border-color:#DBEAE5;color:#0E1416;box-shadow:none}:root:not([data-theme="light"]) .rot-bt.pri:hover{background:#fff;border-color:#fff}}
.rot-bt[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.rot-bt.rot-perigo{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink)}
.rot-bt-gh{border-color:transparent;background:transparent;color:var(--ink-2)}
.rot-bt-gh:hover{background:var(--surface);border-color:var(--line)}
.rot-bt-lk{border-color:transparent;background:transparent;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.rot-bt-lk:hover{background:var(--surface-2);border-color:transparent}
.rot-seta{display:inline-grid;font-style:normal;transform:rotate(-90deg)}
.rot-lk{padding:0;border:0;background:none;color:var(--accent-ink);font:600 12.5px 'Inter',sans-serif;cursor:pointer}
.rot-lk:hover{text-decoration:underline;text-underline-offset:3px}
.rot-ic{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .18s,color .18s}
.rot-ic:hover{background:var(--bad-bg);color:var(--bad-ink)}
.rot-ib{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.rot-ib:hover,.rot-ib:focus-visible{background:var(--surface-2);color:var(--ink)}
.rot-ib.rot-del{margin-left:auto}.rot-ib.rot-del:hover{background:var(--bad-bg);color:var(--bad-ink)}
/* botão em duas linhas: "VOLTAR / Produto", "CONTINUAR / Ingredientes" */
.rot-bt-2l{height:48px;padding:0 16px;border-radius:14px}
.rot-bt-2l>span{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;font-size:13.5px}
.rot-bt-2l small{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.62}

/* selo de situação (pendências, pronto para revisão, revisado) */
.rot-st{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:0;border-radius:999px;font:600 12.5px 'Inter',sans-serif;white-space:nowrap}
button.rot-st{cursor:pointer;transition:filter .18s,transform .12s}button.rot-st:hover{filter:brightness(.97)}button.rot-st:active{transform:scale(.97)}
.rot-st.warn{background:var(--warn-bg);color:var(--warn-ink)}
.rot-st.info{background:var(--accent-soft);color:var(--accent-ink)}
.rot-st.ok{background:var(--ok-bg);color:var(--ok-ink)}

/* a página rola normalmente (sem painel de rolagem interno que corte o conteúdo); o rodapé do editor fica fixo embaixo da janela e a coluna da esquerda acompanha */
@media (min-width:901px) and (min-height:560px){
  /* a coluna da esquerda cabe sempre acima do rodapé: a miniatura usa só a altura que sobra */
  .rotx-mini-a{max-height:max(90px,calc(100dvh - 760px))}
  .rotx-rail{top:14px}
}

/* ===================== início: abertura e "como funciona" ===================== */
.rotx-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);align-items:center;gap:20px;padding:34px 30px 30px 40px;border-radius:28px;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 75%,var(--surface)) 0%,var(--surface) 62%);
  box-shadow:0 0 0 1px var(--line-2),0 24px 48px -36px rgba(16,32,38,.45);animation:rotEntra .45s ease-out both}
.rotx-hero-tx{display:flex;flex-direction:column;gap:12px;min-width:0}
.rotx-hero .rotx-kick{color:var(--accent-ink)}
.rotx-hero h2{margin:0;font:650 clamp(26px,2.6vw,34px)/1.08 'Inter',sans-serif;letter-spacing:-.025em;color:var(--ink)}
.rotx-hero p{max-width:520px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.rotx-hero-ac{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.rotx-hero-ac .rot-bt{height:44px;padding:0 20px;font-size:13.5px}
.rotx-lk{padding:0;border:0;background:none;color:var(--ink-2);font:600 13px 'Inter',sans-serif;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent);text-underline-offset:4px;cursor:pointer;transition:color .15s}
.rotx-lk:hover{color:var(--ink);text-decoration-color:currentColor}
.rotx-hero-arte{min-width:0}
.rotx-hx{display:block;width:100%;height:auto;max-height:250px;overflow:visible}
.rotx-hero.compacto{grid-template-columns:minmax(0,1fr) minmax(220px,300px);padding:22px 22px 18px 32px;border-radius:24px}
.rotx-hero.compacto h2{font-size:clamp(21px,2vw,25px)}
.rotx-hero.compacto p{font-size:14px;line-height:1.55;max-width:520px}
.rotx-hero.compacto .rotx-hero-ac{margin-top:2px}
.rotx-hero.compacto .rotx-hx{max-height:150px}

/* ilustração: receita (à esquerda) virando rótulo na embalagem (à direita) */
.rotx-hx .hx-bg{fill:color-mix(in srgb,var(--accent) 9%,transparent)}
.rotx-hx .hx-bg2{fill:color-mix(in srgb,#E9B872 16%,transparent)}
.rotx-hx .hx-br{fill:color-mix(in srgb,var(--accent) 70%,transparent);transform-box:fill-box;transform-origin:center;animation:hxTw 2.8s ease-in-out infinite}
.rotx-hx .hx-br.b{animation-delay:1.3s;fill:#E2A64B}
@keyframes hxTw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.rotx-hx .hx-rc{animation:hxFlut 6s ease-in-out infinite}
@keyframes hxFlut{50%{transform:translateY(-5px)}}
.rotx-hx .hx-papel{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 13%,transparent);stroke-width:1.2;filter:drop-shadow(0 14px 18px rgba(16,32,38,.12))}
.rotx-hx .hx-badge{fill:var(--accent-soft)}
.rotx-hx .hx-badge-ic{color:var(--accent-ink)}
.rotx-hx .hx-t1{fill:color-mix(in srgb,var(--ink) 72%,transparent)}
.rotx-hx .hx-t2{fill:color-mix(in srgb,var(--ink) 30%,transparent)}
.rotx-hx .hx-t3{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.rotx-hx .hx-sep{stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:1}
.rotx-hx .hx-dot{fill:var(--accent)}
.rotx-hx .hx-flux{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:2.2;stroke-dasharray:.5 8;stroke-linecap:round;animation:hxFluxo 1.1s linear infinite}
@keyframes hxFluxo{to{stroke-dashoffset:-17}}
.rotx-hx .hx-part{fill:var(--accent)}
.rotx-hx .hx-emb-g{filter:drop-shadow(0 20px 22px rgba(16,32,38,.16))}
.rotx-hx .hx-emb{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 15%,transparent);stroke-width:1.2}
.rotx-hx .hx-topo{fill:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.rotx-hx .hx-selo{stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:1;stroke-dasharray:3 3}
.rotx-hx .hx-marca{fill:var(--accent)}
.rotx-hx .hx-mb{fill:color-mix(in srgb,var(--ink) 55%,transparent)}.rotx-hx .hx-mb.b{fill:color-mix(in srgb,var(--ink) 22%,transparent)}
.rotx-hx .hx-rot{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.rotx-hx .hx-rt{fill:var(--ink)}
.rotx-hx .hx-rule{stroke:var(--ink);stroke-width:1.8}
.rotx-hx .hx-li rect{fill:color-mix(in srgb,var(--ink) 72%,transparent)}
.rotx-hx .hx-li .hx-v{fill:color-mix(in srgb,var(--ink) 42%,transparent)}
.rotx-hx .hx-li line{stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:.7}
.rotx-hx .hx-li{opacity:0;animation:hxLinha .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.45s + var(--i) * .13s)}
@keyframes hxLinha{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.rotx-hx .hx-lupa{transform-box:fill-box;transform-origin:30% 50%;animation:hxCarimbo .65s cubic-bezier(.34,1.56,.64,1) 1.5s both}
@keyframes hxCarimbo{from{opacity:0;transform:scale(.3) rotate(-14deg)}to{opacity:1;transform:none}}
.rotx-hx .hx-lb{fill:var(--ink)}
.rotx-hx .hx-lt{fill:var(--surface);font:800 9px 'Inter',sans-serif;letter-spacing:.03em}
.rotx-hx .hx-lt.s{font-size:6.4px;font-weight:700;letter-spacing:.02em}
.rotx-hx .hx-lr{fill:var(--surface);stroke:var(--ink);stroke-width:3.2}
.rotx-hx .hx-lc{stroke:var(--ink);stroke-width:4.6;stroke-linecap:round}

.rotx-como{display:flex;flex-direction:column;gap:12px}
.rotx-como h3{margin:0;font:600 11px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rotx-como ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;counter-reset:passo}
.rotx-como li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 15px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);animation:rotEntra .4s ease-out both;animation-delay:calc(.15s + var(--i) * 60ms)}
.rotx-como li:not(:last-child)::after{content:"";position:absolute;top:31px;right:-9px;width:8px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 40%,transparent)}
.rotx-como-ic{display:grid;place-items:center;width:32px;height:32px;margin-bottom:4px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink)}
.rotx-como b{display:flex;align-items:baseline;gap:6px;font:600 13.5px 'Inter',sans-serif;color:var(--ink)}
.rotx-como b em{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3)}
.rotx-como small{font-size:12px;line-height:1.4;color:var(--ink-3)}

/* ===================== Meus Rótulos: cartões com o rótulo na capa ===================== */
.rotx-sec-h{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.rotx-sec-h h2{margin:0;font:600 18px 'Inter',sans-serif;color:var(--ink)}
.rot-cab-n{font-size:12.5px;color:var(--ink-3)}
.rot-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.rot-card{display:flex;flex-direction:column;min-width:0;border-radius:22px;background:var(--surface);overflow:hidden;box-shadow:0 0 0 1px var(--line-2),0 12px 28px -24px rgba(16,32,38,.45);transition:box-shadow .25s,transform .25s;animation:rotEntra .4s ease-out both;animation-delay:calc(var(--k,0) * 45ms)}
.rot-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line),0 22px 40px -26px rgba(16,32,38,.5)}
.rotx-capa{--rot-papel:hsl(var(--h) 42% 93%);position:relative;height:150px;width:100%;padding:0;border:0;overflow:hidden;cursor:pointer;color:#22313a;
  background:radial-gradient(90% 120% at 15% 0%,hsl(var(--h) 55% 95%) 0%,transparent 60%),linear-gradient(160deg,hsl(var(--h) 42% 93%) 0%,hsl(calc(var(--h) + 28) 38% 85%) 100%)}
.rotx-capa{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:18px 18px 16px;text-align:left}
.rotx-capa-k{display:flex;flex-direction:column;gap:2px}
.rotx-capa-k b{font:700 38px/1 'Inter',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:transform .35s cubic-bezier(.22,1,.36,1);transform-origin:0 100%}
.rotx-capa-k small{font:500 12px 'Inter',sans-serif;opacity:.7}
.rot-card:hover .rotx-capa-k b{transform:scale(1.05)}
.rotx-capa-m{display:flex;gap:2px;height:6px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,currentColor 10%,transparent)}
.rotx-capa-m i{display:block;height:100%}.rotx-capa-m .c{background:#7fb2e0}.rotx-capa-m .p{background:#ee8e9a}.rotx-capa-m .l{background:#f0c765}
.rotx-capa-ae{position:absolute;right:16px;bottom:34px;line-height:0}
.rotx-capa-ae svg rect{fill:currentColor}.rotx-capa-ae svg circle{fill:var(--rot-papel);stroke:currentColor;stroke-width:3}.rotx-capa-ae svg line{stroke:currentColor;stroke-width:4;stroke-linecap:round}
.rotx-capa-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;color:hsl(var(--h) 25% 40%)}.rotx-capa-ph small{font:500 12px 'Inter',sans-serif}
.rotx-capa .rotx-st{position:absolute;top:12px;left:12px;height:24px;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.rotx-capa .rot-ver{position:absolute;top:12px;right:12px}
.rot-ver{flex:none;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--surface) 85%,transparent);font:600 11.5px 'Inter',sans-serif;color:var(--ink-2)}
:root[data-theme="dark"] .rotx-capa{--rot-papel:hsl(var(--h) 18% 15%);color:#E6ECEC;background:radial-gradient(90% 120% at 15% 0%,hsl(var(--h) 22% 20%) 0%,transparent 60%),linear-gradient(160deg,hsl(var(--h) 18% 15%) 0%,hsl(calc(var(--h) + 28) 16% 11%) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rotx-capa{--rot-papel:hsl(var(--h) 18% 15%);color:#E6ECEC;background:radial-gradient(90% 120% at 15% 0%,hsl(var(--h) 22% 20%) 0%,transparent 60%),linear-gradient(160deg,hsl(var(--h) 18% 15%) 0%,hsl(calc(var(--h) + 28) 16% 11%) 100%)}}
.rotx-cb{display:flex;flex-direction:column;gap:10px;flex:1;padding:14px 16px 10px}
.rot-card-t{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.rot-card-t b{font:600 15px/1.3 'Inter',sans-serif;overflow-wrap:anywhere}
.rot-card-t:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.rot-card-t small{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rot-card-chips{display:flex;flex-wrap:wrap;gap:6px}.rot-card-chips .imp-chip{height:auto;min-height:22px;padding:3px 9px;font-size:11px;line-height:1.3;white-space:normal}
.rot-card-d{display:grid;grid-template-columns:auto auto 1fr;gap:2px 20px;margin:0}
.rot-card-d div{min-width:0}.rot-card-d dt{font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}.rot-card-d dd{margin:1px 0 0;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.rot-card-ac{display:flex;align-items:center;gap:2px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line-2)}
.rot-conf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding:10px 12px;border-radius:12px;background:var(--bad-bg);font-size:13px;color:var(--bad-ink)}
.rot-conf span{flex:1 1 160px}

/* ===================== Novo rótulo: escolha da receita ===================== */
.rotx-esc-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rotx-esc-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.rotx-esc-t h2{margin:0;font:650 24px/1.15 'Inter',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.rotx-esc-t p{font-size:14px;color:var(--ink-2)}
.rot-bus-rc{display:flex;align-items:center;gap:8px;width:min(320px,100%);height:42px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-3);transition:border-color .18s,box-shadow .18s}
.rot-bus-rc:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rot-bus-rc input{flex:1;min-width:0;height:40px;border:0;padding:0;background:none;outline:none;font:400 13.5px 'Inter',sans-serif;color:var(--ink)}
.rot-rcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.rot-rcs li{animation:rotEntra .35s ease-out both;animation-delay:calc(var(--k,0) * 35ms)}
.rot-rcs button{display:flex;align-items:center;gap:14px;width:100%;height:100%;padding:12px 14px 12px 12px;border:0;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);text-align:left;cursor:pointer;color:var(--ink);transition:box-shadow .2s,transform .2s}
.rot-rcs button:hover:not([disabled]),.rot-rcs button:focus-visible{box-shadow:0 0 0 2px var(--accent),0 14px 28px -22px rgba(16,32,38,.5);transform:translateY(-1px);outline:none}
.rot-rcs button[disabled]{opacity:.55;cursor:not-allowed}
.rotx-rc-f{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:14px;overflow:hidden;color:hsl(var(--h,30) 30% 38%);background:linear-gradient(150deg,hsl(var(--h,30) 50% 92%),hsl(calc(var(--h,30) + 30) 42% 84%))}
.rotx-rc-f img{width:100%;height:100%;object-fit:cover}
:root[data-theme="dark"] .rotx-rc-f.ph{background:linear-gradient(150deg,hsl(var(--h,30) 20% 18%),hsl(calc(var(--h,30) + 30) 18% 12%));color:hsl(var(--h,30) 30% 72%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rotx-rc-f.ph{background:linear-gradient(150deg,hsl(var(--h,30) 20% 18%),hsl(calc(var(--h,30) + 30) 18% 12%));color:hsl(var(--h,30) 30% 72%)}}
.rotx-rc-b{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rotx-rc-b b{font:600 14.5px/1.3 'Inter',sans-serif;overflow-wrap:anywhere}
.rotx-rc-b small{font-size:12.5px;color:var(--ink-3)}
.rotx-rc-b em{align-self:flex-start;margin-top:2px;padding:1px 8px;border-radius:999px;background:var(--accent-soft);font:600 11px 'Inter',sans-serif;font-style:normal;color:var(--accent-ink)}
.rotx-rc-b em.vz{background:var(--surface-2);color:var(--ink-3)}
.rotx-rc-go{flex:none;color:var(--ink-3);transition:transform .2s}
.rot-rcs button:hover:not([disabled]) .rotx-rc-go{transform:rotate(-90deg) translateY(3px);color:var(--accent-ink)}
.rotx-rc-vz{grid-column:1/-1;padding:18px;text-align:center}
.rotx-sem{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1.5px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent-soft) 35%,transparent);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.rotx-sem:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
.rotx-sem-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);color:var(--accent-ink);box-shadow:0 0 0 1px var(--line-2)}
.rotx-sem>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.rotx-sem b{font:600 14px 'Inter',sans-serif}.rotx-sem small{font-size:12.5px;color:var(--ink-3)}
.rotx-sem .rot-seta{color:var(--ink-3)}
.rotx-sem-rc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);color:var(--accent-ink)}
.rotx-sem-rc>div{flex:1 1 220px}.rotx-sem-rc b{font:600 14px 'Inter',sans-serif;color:var(--ink)}.rotx-sem-rc p{font-size:13px;color:var(--ink-3)}

/* ===================== editor: trilha à esquerda, etapa à direita, rodapé fixo ===================== */
.rotx-ed{display:grid;grid-template-columns:252px minmax(0,1fr);gap:30px;align-items:start}
.rotx-rail{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:14px;padding:16px 14px 14px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2),0 18px 36px -30px rgba(16,32,38,.4)}
.rotx-prod{display:flex;gap:11px;padding:2px 4px 14px;border-bottom:1px solid var(--line-2)}
.rotx-prod-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink)}
.rotx-prod-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rotx-prod-t>b{font:600 14px/1.3 'Inter',sans-serif;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rotx-prod .rot-origem{margin:0;font-size:12px;line-height:1.35}
.rotx-prod .rot-origem,.rotx-prod .rot-origem.um{display:block;white-space:normal}
.rotx-prod .rot-origem b{font-weight:500}
.rotx-prod .rot-origem span{margin-left:4px}
.rotx-prod .rot-origem svg{display:none}
.rotx-prod .rot-origem .pc-link{font-size:12px}

/* trilha das etapas: círculo numerado, nome e o que se faz nela; a linha acende até a etapa atual */
.rotx-trilha ol{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.rotx-trilha ol::before,.rotx-trilha ol::after{content:"";position:absolute;left:22px;top:26px;width:2px;border-radius:2px;background:var(--line);height:calc(100% - 52px)}
.rotx-trilha ol::after{background:var(--accent);height:calc((100% - 52px) * var(--pf,0));transition:height .6s cubic-bezier(.22,1,.36,1)}
.rotx-trilha li{position:relative;z-index:1}
.rotx-trilha button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 8px;border:0;border-radius:14px;background:none;text-align:left;cursor:pointer;color:var(--ink-2);transition:background .18s}
.rotx-trilha button:hover{background:var(--surface-2)}
.rotx-trilha button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rotx-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font:700 12px/1 'Inter',sans-serif;color:var(--ink-3);transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.rotx-tt{display:flex;flex-direction:column;gap:1px;min-width:0}
.rotx-tt b{font:600 13.5px/1.25 'Inter',sans-serif;color:var(--ink-2)}
.rotx-tt small{font-size:11.5px;line-height:1.3;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rotx-trilha li.atual button{background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
.rotx-trilha li.atual .rotx-n{border-color:var(--accent);background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.rotx-trilha li.atual .rotx-tt b{color:var(--ink)}
.rotx-trilha li.feito .rotx-n{border-color:var(--accent);background:var(--surface);color:var(--accent);animation:rotxFeito .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes rotxFeito{from{transform:scale(.7)}to{transform:none}}
.rotx-trilha li.pend .rotx-n{border-color:color-mix(in srgb,var(--warn) 70%,var(--line))}
.rotx-trilha li.rotx-tp .rotx-tt small{color:var(--warn-ink);font-weight:600}

/* rótulo ao vivo: miniatura que muda enquanto se digita; clicar abre a prévia */
.rotx-mini{display:flex;flex-direction:column;gap:10px;width:100%;padding:12px 12px 0;border:0;border-radius:16px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;text-align:left;color:var(--ink);transition:box-shadow .2s}
.rotx-mini:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.rotx-mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rotx-mini-h{display:flex;align-items:center;gap:7px;font:600 11px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rotx-mini-h i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent);animation:rotxAoVivo 2s ease-out infinite}
@keyframes rotxAoVivo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.rotx-mini-h em{margin-left:auto;font-style:normal;letter-spacing:0;text-transform:none;font-size:12px;color:var(--accent-ink)}
.rotx-mini-a{--rot-papel:var(--surface-2);display:block;max-height:250px;overflow:hidden;padding:0 6px;color:var(--ink);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.rotx-mini-a svg{display:block}
.rotx-mini-a.vivo svg{animation:rotxVivo .5s ease-out}
@keyframes rotxVivo{from{opacity:.55}to{opacity:1}}

/* lado direito: título da etapa, explicação e o conteúdo */
.rotx-main{display:flex;flex-direction:column;gap:16px;min-width:0;container-type:inline-size;container-name:rotx}
.rot-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rot-cab-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.rot-cab-t h2{margin:0;font:650 26px/1.1 'Inter',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.rotx-intro{max-width:760px;margin-top:-4px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.rotx-intro b{font-weight:600;color:var(--ink)}
.rot-corpo{display:flex;flex-direction:column;gap:18px;min-width:0;animation:rotEntra .35s ease-out both}

/* rodapé fixo: voltar, situação do salvamento, Salvar e Continuar */
.rot-bar{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:12px;margin-top:auto;padding:12px 0 14px;border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 95%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rot-ant-vz{width:1px}
.rot-ant{border-color:transparent;background:transparent;color:var(--ink-2)}
.rot-ant:hover{background:var(--surface);border-color:var(--line)}
.rot-salvo{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;font-size:12.5px;color:var(--ink-3);text-align:center}
.rot-salvo i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.rot-salvo.ind i{background:var(--warn);animation:rotxPisca 1s ease-in-out infinite}
@keyframes rotxPisca{50%{opacity:.3}}
.rot-salvo.err{color:var(--bad-ink);font-weight:600}
.rot-bar-ac{display:flex;align-items:center;gap:8px}
.rot-bar .rot-sv{height:48px;border-radius:14px}
.rot-prox{padding-right:12px}
.rot-prox .rot-seta{margin-left:6px;opacity:.8}

/* ===================== campos ===================== */
.rot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.rot-grid .w2{grid-column:span 2}.rot-grid .w4,.rot-grid .rot-w4{grid-column:1/-1}
.rot-campo{gap:7px;min-width:0}
.rot-campo>span:first-child{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.rot-campo input[type="text"],.rot-campo input[type="date"]{height:42px;border-radius:12px;font-size:14px}
.rot-campo.nw>span:first-child{white-space:nowrap}
.rot-dica{font-size:11.5px;line-height:1.4;color:var(--ink-3)}.rot-dica b{color:var(--ink-2)}
.rot-info{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}.rot-info b{color:var(--ink)}
.rot-nota{margin:0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.rot-ref{font-size:11.5px;color:var(--ink-3)}
.rot-med{display:grid;grid-template-columns:60px minmax(0,1.3fr) minmax(0,1fr);gap:8px}
.rot-med2{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px}
.rot-med input,.rot-med2 input{height:42px;border-radius:12px}

/* seleção do software (usa .ct-dd/.ct-menu da Central) */
.rot-dd{position:relative;min-width:0}
.rot-ddb{height:42px;padding:0 12px 0 14px;border-radius:12px;font-size:14px;transition:border-color .18s,box-shadow .18s}
.rot-ddb:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.rot-ddb.on{box-shadow:0 0 0 3px var(--accent-soft)}
.rot-ddb span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rot-ddb span.ph{color:var(--ink-3)}
.rotx-bl.opc .rot-menu{top:auto;bottom:calc(100% + 6px)}
.rot-menu{max-height:320px;display:flex;flex-direction:column;padding:6px;overflow:hidden}
.rot-dd-ops{overflow:auto;display:flex;flex-direction:column;gap:1px}
.rot-dd-q{display:flex;align-items:center;gap:8px;flex:none;height:38px;margin:0 0 6px;padding:0 10px;border-radius:10px;background:var(--surface-2);color:var(--ink-3)}
.rot-dd-q:focus-within{box-shadow:0 0 0 2px var(--accent-soft)}
.rot-dd-q input:focus,.rot-dd-q input:focus-visible{outline:none;box-shadow:none}
.rot-dd-q input,.rot-dd-q input[type=search]{flex:1;border-radius:0;min-width:0;height:36px;border:0;padding:0;background:none;outline:none;font:400 13.5px 'Inter',sans-serif;color:var(--ink)}
.rot-dd-g{padding:10px 10px 4px;font:600 10.5px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rot-menu .ct-mi span{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.rot-menu .ct-mi small{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.rot-dd-vz{margin:0;padding:12px;font-size:13px;color:var(--ink-3);text-align:center}

/* segmentado (duas opções) */
.rot-seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);width:max-content;max-width:100%}
.rot-seg button{height:36px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:600 13px 'Inter',sans-serif;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.rot-seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(16,32,38,.14)}
.rot-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* chave liga/desliga (no lugar da caixa quadrada) */
.rot-sw{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4;color:var(--ink-2);cursor:pointer;min-width:0}
.rot-sw input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rot-sw i{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:var(--line);transition:background .2s}
.rot-sw i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.rot-sw input:checked+i{background:var(--accent)}
.rot-sw input:checked+i::after{transform:translateX(16px)}
.rot-sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.rot-sw input:disabled+i,.rot-sw input:disabled~span{opacity:.45;cursor:not-allowed}
.rot-sw.w4{grid-column:1/-1}
.rot-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* "?" da área opcional */
.rot-ajw{position:relative;display:inline-flex;vertical-align:middle;margin-left:6px}
.rot-aj{display:inline-grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-3);font:600 10px/1 'Inter',sans-serif;cursor:pointer;transition:background .15s,color .15s}
.rot-aj:hover,.rot-aj.on{background:var(--surface-2);color:var(--ink)}
.rot-ajp{position:absolute;z-index:30;top:calc(100% + 8px);left:-8px;width:max-content;max-width:250px;padding:9px 12px;border-radius:12px;background:var(--surface);box-shadow:0 12px 28px -10px rgba(16,24,40,.35),0 0 0 1px var(--line);font:400 12px/1.45 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:var(--ink-2);white-space:normal}

/* ===================== blocos de campos (Produto, casos especiais) ===================== */
.rotx-bls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.rotx-bls>.rotx-bl.opc{grid-column:1/-1}
.rotx-bl{container:rotbl/inline-size;display:flex;flex-direction:column;gap:16px;min-width:0;padding:18px 20px 20px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);animation:rotEntra .35s ease-out both}
.rotx-bls>.rotx-bl:nth-child(2){animation-delay:50ms}.rotx-bls>.rotx-bl:nth-child(3){animation-delay:100ms}.rotx-bls>.rotx-bl:nth-child(4){animation-delay:150ms}
.rotx-bl>header{display:flex;align-items:flex-start;gap:12px}
.rotx-bl-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink)}
.rotx-bl h3{margin:0;font:600 15px/1.3 'Inter',sans-serif;letter-spacing:-.005em;color:var(--ink)}
.rotx-bl>header p{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.rotx-bl.opc{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 28px;padding:14px 20px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.rotx-bl.opc>header{flex:0 1 330px}
.rotx-bl.opc>.rot-grid{flex:1 1 420px;align-items:center}
/* lista aberta (seleção do software) fica por cima dos outros blocos e do rodapé */
.rotx-bl:has(.ct-menu){position:relative;z-index:6}
.rotx-main:has(.ct-menu){position:relative;z-index:6}
@container rotbl (max-width:330px){ .rot-med{grid-template-columns:56px minmax(0,1fr)} .rot-med input[data-rotf="med.desc"]{grid-column:1/-1} }
@container rotx (max-width:860px){ .rotx-bls{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container rotx (max-width:560px){ .rotx-bls{grid-template-columns:minmax(0,1fr)} }
.rotx-bl.opc .rotx-bl-ic{background:var(--surface-2);color:var(--ink-3)}
.rotx-rend{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.rotx-rend-b{display:block;height:7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.rotx-rend-b i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,#9CD3C3),var(--accent));transition:width .6s cubic-bezier(.22,1,.36,1)}
.rotx-rend-t{font-size:12.5px;line-height:1.45;color:var(--ink-3)}.rotx-rend-t b{color:var(--ink);font-weight:600}
.rotx-ref{padding:11px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent-soft) 70%,transparent);font-size:12.5px;color:var(--accent-ink)}
.rotx-ref b{color:inherit}

/* ===================== ingredientes ===================== */
.rot-busca-l{display:flex;align-items:flex-start;gap:10px}
.rot-busca{position:relative;flex:1;min-width:0}
.rot-busca .fs-busca{display:flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-3);transition:border-color .18s,box-shadow .18s}
.rot-busca .fs-busca:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rot-busca .fs-busca input{flex:1;height:44px;border:0;padding:0;background:none;outline:none;font:400 14px 'Inter',sans-serif;color:var(--ink)}
.rot-busca-l>.rot-bt{height:46px;border-radius:14px}
.rot-res{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;display:flex;flex-direction:column;gap:1px;max-height:320px;overflow:auto;border-radius:16px;background:var(--surface);box-shadow:0 18px 40px -14px rgba(16,27,31,.35),0 0 0 1px var(--line-2);animation:ctMenu .18s ease}
.rot-res:empty{display:none}
.rot-res button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:500 13.5px 'Inter',sans-serif;text-align:left;cursor:pointer}
.rot-res button:hover,.rot-res button:focus-visible{background:var(--surface-2)}
.rot-res small{font-size:11.5px;color:var(--ink-3)}
.rot-vz-l{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 20px;border:1.5px dashed var(--line);border-radius:20px;text-align:center;color:var(--ink-3)}
.rot-vz-l p{max-width:380px;font-size:13px}
.rot-ings{display:flex;flex-direction:column;gap:8px}
.rot-ing{padding:12px 16px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);transition:box-shadow .2s}
.rot-ing:hover{box-shadow:0 0 0 1px var(--line)}
.rot-ing.aberto{box-shadow:0 0 0 2px var(--accent)}
.rot-ing-l{display:grid;grid-template-columns:24px minmax(0,1fr) auto 204px 104px auto;align-items:center;gap:10px 16px}
.rot-ing-l>[id^="rotIs-"]{justify-self:start}
.rot-ing-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);font:700 11px/1 'Inter',sans-serif;color:var(--ink-3)}
.rot-ing-nome{min-width:0;display:flex;align-items:center;gap:9px}
.rot-ing-nt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;flex:1}
.rot-ing-nt .imp-nome{width:100%}
.rot-fonte-t{flex:none;padding:2px 7px;border-radius:6px;background:var(--surface-2);font:700 9.5px/1.5 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);cursor:default}
.rot-ing-nome b{font:600 14px/1.3 'Inter',sans-serif;color:var(--ink);overflow-wrap:anywhere}
.rot-ing-nome .imp-nome{flex:1;min-width:0;padding:0 8px;border-color:var(--line)}
.rot-qu{display:flex;gap:6px;align-items:center}
.rot-ing .rot-qu input[type=text]{flex:none;width:72px;min-width:0;height:36px;padding:0 10px;border-radius:10px;text-align:right;font-variant-numeric:tabular-nums}
.rot-ing .rot-qu input[data-rotf$=".dens"]{width:56px}
.rot-qu .rot-seg button{height:30px;padding:0 9px}
.rot-ing .rot-ac{min-width:0}.rot-ing .rot-ac .rot-ddb{height:36px;font-size:12.5px}
.rot-ing-ac{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.rot-ing-err{margin:10px 0 0;font-size:12.5px;color:var(--bad-ink)}
.rot-ing-ch{display:inline-flex;flex-wrap:wrap;gap:4px;min-width:0}
.rot-ing-ch .imp-chip{height:22px;padding:0 8px;font-size:11px;gap:4px;white-space:nowrap}
.rot-ch-c{background:var(--accent-soft);color:var(--accent-ink)}
.rot-ch-a{background:var(--high-bg);color:var(--high-ink)}.rot-ch-a svg{flex:none}
.rot-ch-s{border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:600}
@container rotx (max-width:900px){
  .rot-ing-l{grid-template-columns:24px minmax(0,1fr) auto auto}
  .rot-ing-l .rot-ac{grid-column:2/3;grid-row:2}
  .rot-ing-l>[id^="rotIs-"]{grid-column:3/4;grid-row:2;justify-self:end}
  .rot-ing-l .rot-ing-ac{grid-column:4/5;grid-row:1/3}
}
@container rotx (max-width:540px){
  .rot-ing-l{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"n nome nome" "qu qu st" "ac ac ac" "bt bt bt";gap:10px}
  .rot-ing-l>.rot-ing-n{grid-area:n}.rot-ing-l>.rot-ing-nome{grid-area:nome}.rot-ing-l>.rot-qu{grid-area:qu}
  .rot-ing-l>[id^="rotIs-"]{grid-area:st;justify-self:end}.rot-ing-l>.rot-ac{grid-area:ac}.rot-ing-l>.rot-ing-ac{grid-area:bt;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line-2)}
}
.rotx-soma{display:flex;align-items:center;gap:8px;padding:0 4px;color:var(--ink-3)}
.rotx-soma svg{flex:none;color:var(--ink-3)}
.rotx-soma i{margin:0 6px;font-style:normal;color:var(--line)}
/* composição do ingrediente (Detalhes) */
.rot-comp{display:flex;flex-direction:column;gap:12px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line-2);animation:rotEntra .25s ease-out both}
.rot-comp-h{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rot-comp-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}.rot-comp-t .rot-nota{font-size:11.5px}
.rot-comp>.rot-campo{max-width:560px}
.rot-ctab{width:100%}.rot-ctab th,.rot-ctab td{padding:7px 10px}.rot-ctab td{vertical-align:middle;font-size:13px}.rot-ctab td small{color:var(--ink-3);font-size:11px}
.rot-ctab .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rot-vc{display:flex;gap:6px;min-width:220px}
.rot-ctab input.rot-mini{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:400 13px 'Inter',sans-serif}
.rot-vc input:first-child{width:84px}.rot-vc .rot-fte{flex:1;min-width:120px}
.rot-vc input:placeholder-shown+.rot-fte{display:none}
.rot-usado b{font-weight:600;color:var(--ink)}
.rot-falta{font-size:12px;color:var(--bad-ink)}
/* "No rótulo": composto e alergênicos do ingrediente */
.rot-lab{display:flex;flex-direction:column;gap:10px;padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--line-2)}
.rot-lab-c{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rot-lab-t textarea{width:100%;min-height:58px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:400 13.5px/1.45 'Inter',sans-serif;resize:none}
.rot-lab-t textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.rot-lab-a{display:flex;flex-direction:column;gap:8px}
.rot-lab-ah{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink)}
.rot-lab-ah em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-3)}
.rot-al-g{display:flex;flex-wrap:wrap;gap:6px}
.rot-al{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:30px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);font:500 12.5px/1.2 'Inter',sans-serif;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.rot-al:hover{border-color:var(--ink-3)}.rot-al:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rot-al small{font-size:10.5px;font-weight:600;opacity:.85}
.rot-al.on{border-color:transparent;background:var(--high-bg);color:var(--high-ink)}
.rot-al.on.d{background:var(--warn-bg);color:var(--warn-ink)}
.rot-al.on.cd{background:var(--bad-bg);color:var(--bad-ink)}
.rot-al.on.pc{background:var(--accent-soft);color:var(--accent-ink)}
.rot-al.dis{opacity:.4;cursor:not-allowed}
/* quadro do rótulo na etapa: frases prontas, "pode conter", lactose e conferência */
.rot-alc{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.rot-alc .rot-ac-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rot-alc h3{margin:0;font:600 15px 'Inter',sans-serif;color:var(--ink)}
.rot-alc-b{display:flex;flex-direction:column;gap:10px}
.rot-alc-ok{padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.rot-fr{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent);font-size:13px;line-height:1.55;color:var(--ink)}
.rot-fr p{margin:0}.rot-fr p.ng{font-weight:700;text-transform:uppercase}

/* ===================== cálculo ===================== */
.rotx-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rotx-stats>div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);min-width:0}
.rotx-stats small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rotx-stats b{font:650 18px/1.2 'Inter',sans-serif;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.rot-calc-g{display:grid;grid-template-columns:minmax(0,620px) minmax(220px,1fr);gap:24px;align-items:start}
.rot-calc-e{display:flex;flex-direction:column;gap:12px;min-width:0}
.rot-calc-w{border:0!important;border-radius:20px!important;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.rot-calc{font-size:13.5px}.rot-calc th,.rot-calc td{padding:8px 16px!important}.rot-calc th{font-size:11.5px}
.rot-calc tbody tr:hover td{background:var(--surface-2)}
.rot-rtab th.n,.rot-rtab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rot-rtab td small{margin-left:2px;font-size:11px;color:var(--ink-3)}
.rot-rtab .imp-chip{height:20px;padding:0 8px;font-size:10.5px}
.rot-niv1{padding-left:28px!important}.rot-niv2{padding-left:42px!important}
.rot-calc-x{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.rot-det{border-radius:16px;padding:12px 16px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.rot-det summary{cursor:pointer;font:600 13px 'Inter',sans-serif;color:var(--ink-2)}
.rot-det[open]{flex-basis:100%}
.rot-det[open] summary{margin-bottom:12px}
.rot-an{flex:1 1 300px;display:flex;flex-direction:column;gap:14px;padding:12px 16px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
/* coluna da direita: de onde vem a energia, quem mais contribui e a rotulagem frontal */
.rot-dest{display:flex;flex-direction:column;gap:18px;padding:18px 20px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.rot-dest h3{margin:0 0 10px;font:600 10.5px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rot-en-b{display:flex;gap:2px;height:8px;border-radius:999px;overflow:hidden;background:var(--line-2)}
.rot-en-b i{display:block;height:100%;transition:width .5s ease}
.rot-en-l{display:flex;flex-direction:column;gap:5px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-2)}
.rot-en-l li{display:flex;align-items:center;gap:8px}.rot-en-l li i{width:8px;height:8px;border-radius:50%}.rot-en-l b{margin-left:auto;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rot-maior{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.rot-maior li{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:7px 0;border-top:1px solid var(--line-2)}.rot-maior li:first-child{border-top:0;padding-top:0}
.rot-maior span{grid-column:1/-1;font-size:11px;color:var(--ink-3)}.rot-maior b{font:500 12.5px 'Inter',sans-serif;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rot-maior small{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rot-res-l{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border-radius:14px;font-size:12.5px;line-height:1.45}
.rot-res-l svg{flex:none}
.rot-res-l.alto{background:var(--bad-bg);color:var(--bad-ink)}
.rot-res-l.ok{background:var(--ok-bg);color:var(--ok-ink)}
.rot-res-l.mudo{background:var(--surface-2);color:var(--ink-2)}
@container rotx (max-width:760px){
  .rot-calc-g{grid-template-columns:minmax(0,1fr)}
}
@container rotx (max-width:700px){ .rotx-stats{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ===================== classificação (rotulagem frontal) ===================== */
.rotx-fr-res{gap:16px;padding:18px 22px;border-radius:22px;font-size:14px;animation:rotEntra .35s ease-out both}
.rotx-fr-res.alto{background:color-mix(in srgb,var(--bad-bg) 75%,var(--surface));color:var(--ink)}
.rotx-fr-res.ok{background:var(--ok-bg);color:var(--ok-ink)}
.rotx-fr-res.mudo{background:var(--surface);box-shadow:0 0 0 1px var(--line-2);color:var(--ink-2)}
.rotx-fr-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,currentColor 12%,transparent)}
.rotx-fr-tx{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.rotx-fr-tx>b,.rotx-fr-t{font:600 15.5px/1.35 'Inter',sans-serif;color:inherit}
.rotx-fr-res.alto .rotx-fr-t b{color:var(--bad-ink)}
.rotx-fr-tx small{font-size:12.5px;line-height:1.45;opacity:.85}
.rotx-fr-lupa{--rot-papel:color-mix(in srgb,var(--bad-bg) 75%,var(--surface));flex:none;color:var(--ink);animation:rotxCarimbo .6s cubic-bezier(.34,1.56,.64,1) .15s both}
.rotx-fr-lupa svg{display:block;max-width:100%}
@keyframes rotxCarimbo{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
.rotx-frg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rot-fr-c{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);min-width:0}
.rot-fr-c.alto{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--bad) 45%,var(--line))}
.rot-fr-c header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rot-fr-c header b{font:600 14px 'Inter',sans-serif;color:var(--ink)}
.rot-fr-c header .imp-chip{height:22px;font-size:11px}
.rot-fr-c p{margin:0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.rot-fr-v{display:flex;justify-content:space-between;gap:12px}.rot-fr-v span{display:flex;flex-direction:column;gap:1px}.rot-fr-v span.lim{align-items:flex-end}
.rot-fr-v small{font-size:11px;color:var(--ink-3)}.rot-fr-v b{font:650 19px/1.2 'Inter',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.rot-fr-v span.lim b{font-size:14px;font-weight:600;color:var(--ink-2)}
/* barra: valor por 100 g; o traço marca o limite (a 70% da barra) */
.rotx-g{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.rotx-g i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--ok);transition:width .7s cubic-bezier(.22,1,.36,1)}
.rot-fr-c.alto .rotx-g i{background:var(--bad)}
.rot-fr-c.ind .rotx-g i,.rot-fr-c.na .rotx-g i{width:100%!important;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--ink) 12%,transparent) 0 5px,transparent 5px 10px)}
.rotx-g-lim{position:absolute;left:70%;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:var(--ink-2)}
.rotx-bl-fr .rot-grid{align-items:end}
.rot-alt{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--surface-2)}
@container rotx (max-width:760px){ .rotx-frg{grid-template-columns:minmax(0,1fr)} .rotx-fr-res{flex-wrap:wrap} }

/* ===================== prévia ===================== */
/* prévia: barra de ajustes em cima; o rótulo à esquerda e o painel (ALTO EM, revisão e arquivos) à direita */
.rot-pv{display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-areas:"aj aj" "arte ac";gap:16px 24px;align-items:start}
.rot-pv-aj{grid-area:aj}.rot-pv-e{grid-area:arte;display:flex;flex-direction:column;min-width:0}.rot-pv-ac{grid-area:ac}
.rot-pv-aj{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.rot-pv-aj .rot-seg{margin-right:4px}
.rot-pv-aj .rot-seg button{height:34px;padding:0 14px}
.rotx-pfx{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:11px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);font:500 12px 'Inter',sans-serif;color:var(--ink-3);cursor:text;transition:box-shadow .18s}
.rotx-pfx:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 3px var(--accent-soft)}
.rotx-pfx input[type=text]{width:48px;height:38px;padding:0;border:0;border-radius:0;background:none;font:600 13.5px 'Inter',sans-serif;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.rotx-pfx input[type=text]:focus,.rotx-pfx input[type=text]:focus-visible{outline:none;box-shadow:none}
.rotx-pfx input::placeholder{color:var(--ink-3);font-weight:500}
.rotx-pfx em{font-style:normal;color:var(--ink-3)}
.rotx-pfx-med input[type=text][data-rotf="med.qtd"]{width:26px}
.rotx-pfx-med input[type=text][data-rotf="med.desc"]{width:104px;text-align:left}
/* o rótulo direto na página, na cor do tema, com as medidas reais ao lado */
.rot-pv-arte{display:flex;justify-content:center;min-width:0;padding:6px 30px 30px 0}
.rot-arte{--rot-papel:var(--bg);display:flex;justify-content:center;width:100%;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible;color:var(--ink)}
.rot-arte svg{display:block;max-width:100%}
#rotArte{touch-action:none}#rotArte.arrastando{cursor:grabbing}
.rotx-dimw{position:relative;display:inline-block;max-width:100%}
.rotx-dim{position:absolute;color:var(--ink-3);pointer-events:none}
.rotx-dim b{position:absolute;padding:0 6px;background:var(--bg);font:600 11px 'Inter',sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.rotx-dim.h{left:var(--mx);right:var(--mx);bottom:calc(var(--my) - 20px);height:9px;border-left:1px solid;border-right:1px solid}
.rotx-dim.h::before{content:"";position:absolute;left:0;right:0;top:4px;border-top:1px dashed}
.rotx-dim.h b{left:50%;top:50%;transform:translate(-50%,-50%)}
.rotx-dim.v{top:var(--my);bottom:var(--my);right:calc(var(--mx) - 22px);width:9px;border-top:1px solid;border-bottom:1px solid}
.rotx-dim.v::before{content:"";position:absolute;top:0;bottom:0;left:4px;border-left:1px dashed}
.rotx-dim.v b{left:50%;top:50%;padding:6px 0;transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl}
@media (min-width:901px) and (min-height:560px){ body[data-page="rotulagem"] .rot-pv-arte{--rot-arte-h:max(300px,calc(100dvh - 545px))} }
/* painel da direita: ALTO EM, revisão e arquivos, num bloco só com divisórias */
.rot-pv-ac{display:flex;flex-direction:column;padding:4px 18px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.rot-pv-ac section{display:flex;flex-direction:column;gap:8px;padding:16px 0}
.rot-pv-ac section+section{border-top:1px solid var(--line-2)}
.rot-pv-ac h3{margin:0;font:600 10.5px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rot-pv-ac p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.rot-ac-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.rot-ae-c{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:7px;font:600 11.5px 'Inter',sans-serif;background:var(--surface-2);color:var(--ink-2);box-shadow:0 0 0 1px var(--line)}
.rot-ae.alto .rot-ae-c{background:var(--bad-bg);color:var(--bad-ink);box-shadow:none}
.rot-ae.ok .rot-ae-c{background:var(--ok-bg);color:var(--ok-ink);box-shadow:none}
.rot-ae.pend .rot-ae-c{background:var(--warn-bg);color:var(--warn-ink);box-shadow:none}
.rot-ae.alto>p{font-weight:600;color:var(--ink)}
.rot-ae .rot-lk{font-size:12.5px;text-decoration:underline;text-underline-offset:2px}
.rot-rev .rot-sw{gap:0;font-size:0}
.rot-rev.ok{margin:0 -18px;padding:16px 18px!important;background:var(--ok-bg)}
.rot-pv-st{display:flex;align-items:center;gap:6px;margin:0;font:500 12.5px/1.4 'Inter',sans-serif;color:var(--ink-3)}
.rot-pv-st.ok{color:var(--ok-ink)}.rot-pv-st svg{flex:none}
.rot-rev .rot-nota{font-size:11.5px;color:var(--ink-3)}
.rot-rt{display:grid;grid-template-columns:1fr;gap:8px}.rot-rt.dois{grid-template-columns:1fr 1fr}
.rot-rt .rot-campo>span:first-child{font-size:12px}
.rot-rt .rot-campo input{height:40px!important;background:var(--surface)}
.rot-exp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rot-exp .rot-bt{height:38px;padding:0 8px;font-size:12.5px}
.rot-exp-c .rot-bt-lk{height:auto;padding:0;font-size:12px}
.rot-exp-c .rot-nota{font-size:11.5px}
/* modelos da lupa (Anexo XVII) */
.rot-mod{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.rot-mod-bt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink-2);cursor:pointer;text-align:left;font:inherit;transition:border-color .15s}
.rot-mod-bt:hover,.rot-mod-bt.on{border-color:var(--accent)}.rot-mod-bt>svg:first-child{color:var(--accent);flex:none}
.rot-mod-bt span{display:flex;flex-direction:column;flex:1;min-width:0}.rot-mod-bt b{font-size:13px;font-weight:600;color:var(--ink)}.rot-mod-bt small{font-size:11.5px;color:var(--ink-3)}
.rot-mod-bt>svg:last-child{flex:none;transform:rotate(90deg);transition:transform .2s}.rot-mod-bt.on>svg:last-child{transform:rotate(-90deg)}
.rot-mod-g{display:flex;flex-wrap:wrap;gap:8px;animation:rotEntra .18s ease}
.rot-mod-op{--rot-papel:var(--surface);display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rot-mod-op:hover{border-color:var(--accent)}.rot-mod-op.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.rot-mod-op svg{display:block;max-width:100%}
.rot-mod .rot-nota{font-size:11.5px}
@container rotx (max-width:820px){
  .rot-pv{grid-template-columns:minmax(0,1fr);grid-template-areas:"aj" "arte" "ac"}
  .rot-pv-ac{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:20px}
  .rot-pv-ac section+section{border-top:0}
}

/* ===================== histórico de versões ===================== */
.rot-hist-d{margin-top:4px}
.rot-hist{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.rot-hist>li{display:flex;flex-direction:column;gap:10px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px}
.rot-hv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--ink-3)}.rot-hv b{color:var(--ink)}.rot-hv .pc-link{margin-left:auto}
.rot-cmp td.rot-dif,.rot-dif{background:var(--warn-bg);color:var(--warn-ink);font-weight:600}
.rot-cmp-ing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-size:12.5px}.rot-cmp-ing ul{margin:4px 0 0;padding-left:16px}

/* ===================== vínculo com a receita, avisos e pop-up de pendências ===================== */
.rot-origem{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font-size:12.5px;line-height:1.3;color:var(--ink-3)}
.rot-origem svg{display:block;flex:none;color:var(--accent)}
.rot-origem b{color:var(--ink-2);font-weight:600}
.rot-origem.um{flex-wrap:nowrap;white-space:nowrap}
.rot-origem.um b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rot-origem.um span{flex:none}
.rot-rc-aviso>span{display:flex;flex-direction:column;gap:8px}.rot-rc-ac{display:flex;flex-wrap:wrap;gap:8px}.rot-rc-aviso small{font-size:12px;opacity:.85}
.rot-al.ok{background:var(--ok-bg);color:var(--ok-ink)}
.rot-al.warn{background:var(--warn-bg);color:var(--warn-ink)}
.rot-pend{margin:6px 0 0;padding-left:18px;font-size:12.5px}
.rot-pm .rot-pm-m{width:min(500px,100%);padding:28px 26px 24px;animation:rotPop .22s cubic-bezier(.22,1,.36,1) both}
.rot-pm-m section+section{margin-top:22px}
.rot-pm-m h3{margin:0 0 8px;font:600 10.5px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rot-pm-m .rot-pm-s{margin:0 0 4px;font-size:12px;color:var(--ink-3)}
.rot-pm-m ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.rot-pm-m li+li{border-top:1px solid var(--line-2)}
.rot-pm-m li button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 8px;margin:0 -8px;width:calc(100% + 16px);border:0;border-radius:10px;background:none;color:var(--ink);font:500 13px/1.45 'Inter',sans-serif;text-align:left;cursor:pointer;transition:background .18s}
.rot-pm-m li button:hover{background:var(--surface-2)}
.rot-pm-m li button svg{flex:none;transform:rotate(-90deg);color:var(--ink-3)}
.rot-pm-g{display:flex;flex-direction:column;gap:6px;min-width:0}.rot-pm-g b{font-weight:600}
.rot-pm-ch{display:flex;flex-wrap:wrap;gap:5px}.rot-pm-ch i{font-style:normal;padding:2px 9px;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);font-size:11.5px;font-weight:500}
.rot-pm-av{gap:6px}.rot-pm-av li{padding:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}.rot-pm-av li+li{border:0}
.rot-pm-m p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.rot-pm-ok{display:flex;align-items:center;gap:8px;color:var(--ok-ink)!important}

/* ===================== telas baixas: miniatura menor ou fora ===================== */
@media (min-width:901px) and (max-height:860px){ .rotx-mini-a{max-height:150px} .rotx-trilha button{padding:6px 8px} .rotx-prod{padding-bottom:10px} }
@media (min-width:901px) and (max-height:740px){ .rotx-mini{display:none} .rotx-hero{padding:24px 26px 22px 32px} .rotx-hx{max-height:190px} }

/* ===================== tablet e celular ===================== */
@media (max-width:1180px){
  .rotx-ed{grid-template-columns:224px minmax(0,1fr);gap:22px}
  .rotx-como ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rotx-como li:nth-child(3)::after{display:none}
}
@media (max-width:900px){
  .rotx-hero,.rotx-hero.compacto{grid-template-columns:minmax(0,1fr);padding:24px 22px}
  .rotx-hero-arte{order:-1;max-width:360px}
  .rotx-hero.compacto .rotx-hero-arte{display:none}
  .rotx-ed{grid-template-columns:minmax(0,1fr);gap:18px}
  .rotx-rail{position:static;padding:12px;gap:10px}
  .rotx-prod{padding-bottom:10px}
  .rotx-mini{display:none}
  .rotx-trilha ol{flex-direction:row;gap:0}
  .rotx-trilha ol::before,.rotx-trilha ol::after{left:10%;top:23px;height:2px;width:80%}
  .rotx-trilha ol::after{width:calc(80% * var(--pf,0));height:2px}
  .rotx-trilha li{flex:1 1 0;min-width:0}
  .rotx-trilha button{flex-direction:column;gap:5px;padding:6px 2px;text-align:center}
  .rotx-trilha li.atual button{background:none}
  .rotx-tt small{display:none}
  .rotx-tt b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rotx-trilha li:not(.atual) .rotx-tt b{color:var(--ink-3);font-weight:500}
  .rotx-bls{grid-template-columns:minmax(0,1fr)}
  .rot-pv-arte{padding:4px 30px 32px 0}
}
@media (max-width:560px){
  .hm-box.pc-box.rot-box>.hm-in.rot-in{gap:18px;padding:4px 0 18px}
  .rotx-como ol{grid-template-columns:minmax(0,1fr)}
  .rotx-como li::after{display:none}
  .rotx-como li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}
  .rotx-como li small{flex-basis:100%;padding-left:44px;margin-top:-6px}
  .rotx-como-ic{margin:0}
  .rot-cards,.rot-rcs{grid-template-columns:minmax(0,1fr)}
  .rotx-trilha .rotx-tt{display:none}
  .rotx-trilha li.atual .rotx-tt{display:flex}
  .rot-cab-t h2{font-size:21px}
  .rotx-intro{font-size:13px}
  .rotx-bl{padding:16px}
  .rot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rot-grid .w2,.rot-sw.w2{grid-column:1/-1}
  .rot-med{grid-template-columns:60px minmax(0,1fr)}.rot-med input[data-rotf="med.desc"]{grid-column:1/-1}
  .rot-busca-l>.rot-bt{width:46px;padding:0}.rot-busca-l>.rot-bt span{display:none}
  .rotx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rotx-pfx{flex:1 1 auto}.rotx-pfx input[type=text]{flex:1}
  .rot-arte svg{width:100%!important;height:auto!important}
  .rotx-dimw{display:block}
  .rot-cmp-ing{grid-template-columns:minmax(0,1fr)}
  .rot-bar{gap:8px;padding:10px 0 12px}
  .rot-bar .rot-salvo{display:none}
  .rot-bar-ac{margin-left:auto}
  .rot-ant>span small{display:none}
  .rot-bar .rot-sv span{display:none}.rot-bar .rot-sv{width:48px;padding:0}
  .rot-bar .rot-sv:not(.rot-sv2) span{display:inline}.rot-bar .rot-sv:not(.rot-sv2){width:auto;padding:0 16px}
  .rot-top-ac{width:auto}
}
/* celular: o rodapé do editor fica logo acima da barra de navegação do app; o botão de ajuda sobe para não cobrir o Continuar */
@media (max-width:700px){
  .rot-bar{bottom:calc(61px + max(0px,env(safe-area-inset-bottom)));margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}
  body:has(input:focus,textarea:focus) .rot-bar{bottom:0}
  body[data-page="rotulagem"]:has(#tabbar):has(.rot-bar) .sup-btn{bottom:calc(142px + max(0px,env(safe-area-inset-bottom)))!important}
}
@media (prefers-reduced-motion:reduce){
  .rot-corpo,.rot-comp,.rot-pm .rot-pm-m,.rotx-hero,.rotx-como li,.rot-card,.rot-rcs li,.rotx-bl,.rotx-fr-res,.rotx-fr-lupa,.rotx-trilha li.feito .rotx-n{animation:none}
  .rotx-hx *{animation:none!important}.rotx-hx .hx-li{opacity:1}.rotx-hx .hx-part{display:none}
  .rotx-mini-h i,.rot-salvo.ind i{animation:none}
  .rot-sw i::after,.rot-seg button,.rotx-trilha ol::after,.rotx-g i,.rotx-rend-b i{transition:none}
}

/* ===================== 2ª rodada: menos poluição, mais respiro, botões maiores ===================== */
/* Referências: textos de apoio e normas só aparecem quando o botão está ligado */
.rotx-refbt{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font:600 13px 'Inter',sans-serif;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.rotx-refbt:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line));color:var(--ink)}
.rotx-refbt.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.rotx-refbt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rot-cab-ac{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rotx-refs{display:flex;flex-direction:column;gap:10px;padding:16px 20px;border-radius:18px;background:color-mix(in srgb,var(--accent-soft) 55%,transparent);animation:rotEntra .3s ease-out both}
.rotx-refs p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}.rotx-refs b{color:var(--ink);font-weight:600}
.rotx-refs ul{display:flex;flex-direction:column;gap:5px;margin:0;padding:10px 0 0;list-style:none;border-top:1px solid var(--line)}
.rotx-refs li{font-size:12.5px;line-height:1.45;color:var(--ink-3)}.rotx-refs em{font-style:normal;font-weight:600;color:var(--warn-ink)}
.rotx-bl>header p,.rot-nota,.rot-ref,.rotx-fr-tx small,.rot-fr-c p,.rot-lab-ah em,.rotx-rend-t{display:none}
.rotx-main.refs .rotx-bl>header p,.rotx-main.refs .rot-nota,.rotx-main.refs .rot-ref,.rotx-main.refs .rotx-fr-tx small,.rotx-main.refs .rot-fr-c p,.rotx-main.refs .rot-lab-ah em,.rotx-main.refs .rotx-rend-t{display:block}
.rotx-main.refs .rot-lab-ah em{display:inline}
.rot-pv-ac .rot-nota,.rot-exp-c .rot-nota{display:none!important}
.rotx-rend:has(.rotx-rend-t){gap:0}
.rotx-rend-b{height:8px}
/* chip "Completo" vira só um visto */
.rotx-okc{justify-content:center;width:24px;height:24px;padding:0;border-radius:50%}
.rotx-okc svg{display:block}
.rot-ing-l>[id^="rotIs-"]{justify-self:center}
/* mais ar entre as coisas */
.rotx-ed{gap:40px}
.rotx-rail{padding:20px 16px 18px;gap:18px}
.rotx-main{gap:22px}
.rot-cab-t h2{font-size:28px}
.rot-corpo{gap:24px}
.rotx-bls{gap:22px}
.rotx-bl{gap:20px;padding:26px 26px 28px;border-radius:24px}
.rotx-bl>header{gap:14px}
.rot-grid{gap:20px 18px}
.rot-campo{gap:9px}
.rot-ings{gap:12px}
.rot-ing{padding:16px 22px;border-radius:20px}
.rot-ing-l{gap:12px 20px}
.rot-alc{padding:24px;gap:20px;border-radius:24px}
.rotx-frg{gap:16px}
.rot-fr-c{padding:22px;gap:16px}
.rotx-fr-res{padding:22px 26px}
.rotx-stats{gap:14px}.rotx-stats>div{padding:16px 18px}
.rot-dest{padding:24px;gap:24px}
.rot-pv{gap:22px 28px}
.rot-pv-ac{padding:6px 22px}
.rot-pv-ac section{padding:20px 0}
/* botões e campos maiores */
.rot-bt{height:46px;padding:0 20px;font-size:14px;border-radius:14px}
.rotx-refbt{height:44px;padding:0 18px;font-size:14px;border-radius:14px}
.rot-st{height:40px;padding:0 18px;font-size:13.5px}
.rot-campo input[type="text"],.rot-campo input[type="date"],.rot-ddb,.rot-med input,.rot-med2 input{height:48px;font-size:14.5px;border-radius:14px}
.rot-seg button{height:42px;padding:0 20px;font-size:14px}
.rot-seg{border-radius:14px}
.rot-sw{font-size:14.5px}.rot-sw i{width:44px;height:26px}.rot-sw i::after{width:20px;height:20px}.rot-sw input:checked+i::after{transform:translateX(18px)}
.rot-busca .fs-busca{height:52px;border-radius:16px}.rot-busca .fs-busca input{height:50px;font-size:14.5px}.rot-busca-l>.rot-bt{height:52px}
.rot-ing .rot-qu input[type=text]{height:42px;width:80px;font-size:14px}
.rot-ing .rot-ac .rot-ddb{height:42px;font-size:13.5px}
.rot-qu .rot-seg button{height:34px;padding:0 12px}
.rot-ib{width:40px;height:40px}.rot-ic{width:38px;height:38px}
.rot-lk{font-size:13.5px}
.rot-bar{padding:16px 0 18px;gap:16px}
.rot-bt-2l{height:56px;padding:0 22px;border-radius:16px}
.rot-bt-2l>span{font-size:15px}.rot-bt-2l small{font-size:10px}
.rot-conc{height:56px;padding:0 30px;font-size:15px;border-radius:16px}
.rot-exp .rot-bt{height:44px;font-size:13.5px}
.rotx-trilha button{padding:10px 10px}
.rotx-n{width:32px;height:32px;font-size:13px}
.rotx-trilha ol::before,.rotx-trilha ol::after{left:26px}
/* prévia: rótulo grande, ajustes numa barra baixa e botão de ampliar */
.rot-pv{grid-template-columns:minmax(0,1fr) 310px}
.rot-pv-aj{padding:10px;gap:10px}
.rotx-pfx{height:44px;padding:0 14px;border-radius:13px;font-size:12.5px}
.rotx-pfx input[type=text]{height:42px;font-size:14.5px;width:52px}
.rot-pv-aj .rot-seg button{height:38px;padding:0 18px}
.rot-pv-arte{position:relative;padding:14px 38px 38px 0}
@media (min-width:901px) and (min-height:560px){ body[data-page="rotulagem"] .rot-pv-arte{--rot-arte-h:max(460px,calc(100dvh - 300px))} }
.rotx-amp{position:absolute;top:6px;right:0;z-index:2;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font:600 13px 'Inter',sans-serif;cursor:pointer;transition:background .18s,color .18s}
.rotx-amp:hover{background:var(--surface-2);color:var(--ink)}
.rot-amp .rot-amp-m{width:min(900px,94vw);max-height:92dvh;padding:40px 30px 30px;overflow:auto;animation:rotPop .22s cubic-bezier(.22,1,.36,1) both}
.rot-arte-g{--rot-papel:var(--surface);--rot-arte-h:min(80dvh,1100px);color:var(--ink);justify-content:center}
.rot-arte-g .rotx-dim{display:none}
/* telas baixas: continua confortável, só um pouco menos folgado */
@media (min-width:901px) and (max-height:800px){
  .rotx-ed{gap:30px}.rotx-bl{padding:20px 22px 22px;gap:16px}.rot-grid{gap:16px}.rot-bar{padding:10px 0 12px}.rot-bt-2l{height:50px}.rot-conc{height:50px}
  .rot-cab-t h2{font-size:25px}.rotx-main{gap:18px}.rot-corpo{gap:18px}
}
@media (max-width:900px){
  .rotx-ed{gap:20px}.rotx-bl{padding:20px}.rot-pv-arte{padding:6px 34px 34px 0}.rotx-amp{top:0}
}
@media (max-width:560px){
  .rot-bt-2l{height:52px;padding:0 16px}.rot-conc{padding:0 22px}.rot-cab-ac{width:100%;justify-content:space-between}
  .rot-bar{bottom:calc(61px + max(0px,env(safe-area-inset-bottom)))}
  .rot-ing{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){.rotx-refs,.rot-amp .rot-amp-m{animation:none}}
.rot-posp{margin:0;font-size:12.5px}

/* ajustes de proporção (notebook, celular, desktop) */
.rot-bar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 20px 0 0 var(--bg)}
.rot-ing-l>[id^="rotIs-"]{justify-self:start}
@media (min-width:901px) and (min-height:560px){ body[data-page="rotulagem"] .rot-pv-arte{--rot-arte-h:max(360px,calc(100dvh - 300px))} }
@media (min-width:901px) and (max-height:800px){
  body[data-page="rotulagem"] .app-col .pc-top{min-height:0;margin-top:30px;padding-bottom:0}
  body[data-page="rotulagem"] .app-col>main{padding-top:14px}
  .rotx-rail{padding:14px 12px;gap:10px}.rotx-prod{padding-bottom:8px}.rotx-trilha button{padding:6px 8px}
  .rotx-intro,.rot-cab-t .rotx-kick{display:none}
  .rotx-main{gap:14px}
}
@media (min-width:1700px){
  .rotx-ed{grid-template-columns:288px minmax(0,1fr)}
  .rot-cab-t h2{font-size:30px}
}
@media (max-width:700px){
  .rot-pv-aj{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .rot-pv-aj .rot-seg{grid-column:1/-1;width:100%;margin:0}.rot-pv-aj .rot-seg button{flex:1}
  .rotx-pfx{min-width:0}.rotx-pfx-med{grid-column:1/-1}
  .rotx-pfx input[type=text]{width:auto;flex:1;min-width:0}
  .rotx-pfx-med input[type=text][data-rotf="med.qtd"]{flex:0 0 36px}.rotx-pfx-med input[type=text][data-rotf="med.desc"]{flex:1;width:auto}
}

/* 3ª passada: linha do ingrediente mais limpa e "Pode conter" recolhido */
.rot-fonte-t{display:none}.rotx-main.refs .rot-fonte-t{display:inline-block}
.rot-ing .rot-ac .rot-ddb{border-color:transparent;background:var(--surface-2);font-size:13px}
.rot-ing .rot-ac .rot-ddb:hover{border-color:var(--line)}
.rot-ing-l{grid-template-columns:24px minmax(0,1fr) auto 172px minmax(32px,auto) auto}
.rot-ch-a{background:transparent;color:var(--high-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--high) 35%,transparent)}
.rot-alc .rot-ref{display:none}
.rot-alc-tg{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;border:0;border-radius:14px;background:var(--surface-2);color:var(--ink);font:600 13.5px 'Inter',sans-serif;text-align:left;cursor:pointer;transition:background .18s}
.rot-alc-tg:hover{background:color-mix(in srgb,var(--ink) 7%,var(--surface-2))}
.rot-alc-tg span{flex:1}.rot-alc-tg i{font-style:normal;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px}
.rot-alc-tg svg{transform:rotate(0);transition:transform .2s}.rot-alc-b.aberto .rot-alc-tg svg{transform:rotate(180deg)}
.rot-alc-b.aberto .rot-nota{display:block;margin-top:10px}
.rot-alc-b .rot-al-g{margin-top:10px}
@media (min-width:901px) and (min-height:560px){ body[data-page="rotulagem"] .rot-pv-arte{--rot-arte-h:max(380px,calc(100dvh - 270px))} }

/* ===== prévia: ajustes no painel da direita; o rótulo cabe entre o cabeçalho e o rodapé fixo ===== */
.rot-pv{grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"arte ac"}
.rot-pv-ac .rot-pv-aj{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;background:none;box-shadow:none;border-radius:0}
.rot-pv-ac .rot-pv-aj .rot-seg{grid-column:1/-1;width:100%;margin:0;display:flex}
.rot-pv-ac .rot-pv-aj .rot-seg button{flex:1;height:34px;padding:0 10px}
.rot-pv-ac .rot-pv-aj .rotx-pfx-med{grid-column:1/-1}
.rot-pv-ac .rot-pv-aj .rotx-pfx{min-width:0}
.rot-pv-ac .rot-pv-aj .rotx-pfx input[type=text]{width:100%;min-width:0}
@media (min-width:901px) and (min-height:560px){ body[data-page="rotulagem"] .rot-pv-arte{--rot-arte-h:max(380px,calc(100dvh - 505px))} }
@media (max-width:900px){ .rot-pv{grid-template-columns:minmax(0,1fr);grid-template-areas:"arte" "ac"} }
.rot-pv-ac .rot-pv-aj .rotx-pfx{padding:0 10px 0 12px}
.rot-pv-ac .rot-pv-aj .rotx-pfx>span{flex:none}
.rot-pv-ac .rot-pv-aj .rotx-pfx input[type=text]:not([data-rotf="med.desc"]){width:auto;flex:1 1 28px;min-width:28px}
.rot-pv-ac .rot-pv-aj .rotx-pfx-med input[type=text][data-rotf="med.desc"]{flex:1 1 60px;width:auto;min-width:0}
@media (min-width:901px) and (min-height:560px){ body[data-page="rotulagem"] .rot-pv-arte{--rot-arte-h:max(380px,calc(100dvh - 470px))} }

/* Porção e embalagem: campos lado a lado alinhados pela base, mesmo quando um rótulo quebra em duas linhas */
.rotx-bl:has(.rot-med) .rot-grid{align-items:end}
.rotx-bl:has(.rot-med) .rot-grid>.rot-campo{height:100%;justify-content:flex-end}
.rotx-bl:has(.rot-med) .rot-campo>span:first-child{line-height:1.25}
.rotx-bl:has(.rot-med) .rot-med{grid-template-columns:64px minmax(0,1fr)}
.rotx-bl:has(.rot-med) .rot-med input[data-rotf="med.desc"]{grid-column:1/-1}
@container rotbl (min-width:460px){ .rot-med{grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr)!important} .rot-med input[data-rotf="med.desc"]{grid-column:auto!important} }
@container rotbl (max-width:340px){ .rotx-bl:has(.rot-med) .rot-campo>span:first-child{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }

/* Meus Rótulos sem o banner: título à esquerda, "Novo rótulo" à direita */
.rotx-sec-h{align-items:center;margin-top:0}
.rotx-sec-ac{margin-left:auto;display:inline-flex}
@media (max-width:600px){ .rotx-sec-h{flex-wrap:wrap} }

/* cartão do rótulo: capa com a energia, nome, avisos e uma linha de rodapé (Editar à esquerda; Visualizar, Duplicar e Excluir à direita) */
.rotx-cb{gap:10px}
.rot-card-dt{font-size:11.5px;color:var(--ink-3)}
.rot-card-ac{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2)}
.rot-card-ed{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 11px;border:0;border-radius:11px;background:var(--surface-2);color:var(--ink);font:600 13px 'Inter',sans-serif;cursor:pointer;transition:background .15s}
.rot-card-ed:hover,.rot-card-ed:focus-visible{background:color-mix(in srgb,var(--ink) 9%,var(--surface-2))}
.rot-card-ic{display:inline-flex;align-items:center;gap:2px}
.rot-card-ic .rot-ib.rot-del{margin-left:0}

/* ===== Meus Rótulos v3: cartão branco, sem capa colorida; cabeçalho (ícone, nome, situação), energia e macros, lupa ALTO EM e rodapé com data e ações ===== */
.rot-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:16px!important}
.rotc{padding:16px;gap:14px;border-radius:18px;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(16,32,38,.04)}
.rotc:hover{transform:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,var(--line)),0 14px 28px -22px rgba(16,32,38,.45)}
.rotc-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px}
.rotc-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.rotc .rot-card-t{padding-top:1px}
.rotc .rot-card-t b{font:600 14.5px/1.3 'Inter',sans-serif;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rotc .rot-card-t small{font-size:12px}
.rotc-st.imp-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font:600 11px 'Inter',sans-serif;white-space:nowrap;background:var(--surface-2)!important;color:var(--ink-2)!important;border:1px solid var(--line)}
.rotc-st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.rotc-st.ok i{background:var(--ok)}.rotc-st.info i{background:#4F8DB8}.rotc-st.err i{background:var(--warn)}
.rotc-nut{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:12px 14px;border-radius:12px;background:var(--surface-2)}
.rotc-nut.vz{display:flex;gap:8px;color:var(--ink-3);font-size:12.5px}
.rotc-kc{display:flex;align-items:baseline;gap:5px;padding-right:16px;border-right:1px solid var(--line)}
.rotc-kc b{font:700 26px/1 'Inter',sans-serif;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.rotc-kc>span{display:flex;flex-direction:column;font:600 12px/1.2 'Inter',sans-serif;color:var(--ink-2)}
.rotc-kc small{font:500 10.5px/1.25 'Inter',sans-serif;color:var(--ink-3);white-space:nowrap}
.rotc-mac{display:flex;flex-direction:column;gap:7px;min-width:0}
.rotc-bar{display:flex;gap:2px;height:5px;border-radius:999px;overflow:hidden;background:var(--line)}
.rotc-bar i{display:block;height:100%}
.rotc .c{background:#7FA7C9}.rotc .p{background:#3D616D}.rotc .l{background:#D9B36A}
.rotc-leg{display:flex;flex-wrap:wrap;gap:3px 10px;font:500 10.5px 'Inter',sans-serif;color:var(--ink-3)}
.rotc-leg>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.rotc-leg i{width:6px;height:6px;border-radius:2px}
.rotc-leg b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.rotc .rot-card-chips{display:flex;flex-wrap:wrap;gap:6px}
.rotc-lupa{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 9px 3px 7px;border:1.5px solid var(--ink);border-radius:7px;background:var(--surface);color:var(--ink);font:500 11px/1.25 'Inter',sans-serif}
.rotc-lupa b{font-weight:800;letter-spacing:.02em}
.rotc-lupa>span{font-weight:600}
.rotc-sem{display:inline-flex;align-items:center;min-height:24px;font:500 11.5px 'Inter',sans-serif;color:var(--ink-3)}
.rotc .rot-card-chips .imp-chip{min-height:24px;border-radius:7px}
.rotc-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2)}
.rotc-ft .rot-card-dt{font-size:11.5px;color:var(--ink-3)}
.rotc-ft .rot-ib{width:32px;height:32px;border-radius:9px}
.rotc .rot-conf{margin-top:auto}
:root[data-theme="dark"] .rotc .p{background:#8DA9AD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rotc .p{background:#8DA9AD}}
@media (max-width:700px){
  .rotc{padding:14px;gap:12px}
  .rotc-nut{gap:12px;padding:10px 12px}.rotc-kc{padding-right:12px}.rotc-kc b{font-size:24px}
  .rotc-ft .rot-ib{width:36px;height:36px}
}
/* energia em cima; barra e os três macros em colunas iguais embaixo (cabe nos cartões estreitos) */
.rotc-nut:not(.vz){grid-template-columns:minmax(0,1fr);gap:10px}
.rotc-kc{padding-right:0;border-right:0;gap:6px}
.rotc-kc>span{flex-direction:row;align-items:baseline;gap:6px}
.rotc-kc small{font-size:11.5px}
.rotc-leg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rotc-leg>span{flex-direction:column;align-items:flex-start;gap:1px;padding-left:9px;position:relative}
.rotc-leg i{position:absolute;left:0;top:4px}
.rotc-leg b{font-size:12.5px}
.rotc-ft .rot-card-dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rotc-ft .rot-card-ic{gap:0;flex:none}
.rotc-ft .rot-ib{width:30px;height:30px}
.rot-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important}
.rotc-ft .rot-card-dt{font-size:11px}
.rotc-lupa b{white-space:nowrap;flex:none}.rotc-lupa svg{flex:none}.rotc-lupa>span{min-width:0}