@import url('./fonts.css');
:root{--ink:#203449;--muted:#69788b;--primary:#0056b3;--accent:#0a8ccc;--line:#dfe6ee;--bg:#f4f6f9;--red:#b42318;--radius:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}h1,h2,h3,p{margin-top:0}h1{font-size:32px;letter-spacing:-1.1px;line-height:1.25}h2{font-size:23px;letter-spacing:-.6px}h3{font-size:16px}small,.muted{color:var(--muted)}.brand{display:flex;align-items:center;gap:11px;font-size:36px;letter-spacing:-2px;font-weight:800}.brand span{font-size:9px;letter-spacing:1.5px;padding:3px 6px;border:1px solid #7898b8;border-radius:5px}.sidebar{position:fixed;inset:0 auto 0 0;width:246px;background:#233e5a;color:#e6eef7;display:flex;flex-direction:column;padding:25px 20px;overflow-y:auto;z-index:20}.workspace-label{margin:28px 0 20px;font-size:11px;letter-spacing:1px}.workspace-label span{display:block;color:#a5bdd5;font-size:12px;letter-spacing:0;margin-top:3px}nav p{font-size:9px;letter-spacing:1.5px;color:#a5bdd5;margin:25px 12px 8px}nav a{display:flex;gap:12px;align-items:center;border-radius:7px;padding:9px 12px;font-size:13px;color:#d0deec}nav a:hover,nav a.active{background:#315575;color:#ffffff}.sidebar-bottom{margin-top:auto;padding-top:35px;font-size:11px;color:#b1c5d9}.sidebar-bottom small{display:block;color:#93adc7}.shell{margin-left:246px}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between}.topbar-user{display:flex;align-items:center;gap:12px;font-size:12px}.topbar-user small{display:block;font-size:10px}.avatar{background:#eaf2fb;color:#0056b3;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-weight:700}.text-button{border:0;background:none;color:var(--muted);padding:8px}.page-footer{font-size:11px;color:#728297;margin:30px 38px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px}main#content{padding:34px 38px;min-height:calc(100vh - 160px);max-width:1600px;margin:auto}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.page-head h1{margin:4px 0 6px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700;color:#486c92;margin-bottom:12px}.page-head p{margin-bottom:0}.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:8px;padding:10px 17px;font-weight:600;font-size:13px;white-space:nowrap}.primary{background:var(--primary);color:white}.primary:hover{background:#004494}.secondary{background:#fff;border-color:#ccd8e5;color:var(--ink)}.secondary:hover{background:#f0f5fb}.danger{color:var(--red);background:#fff;border-color:#e4c3be}.full{width:100%}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px}.hero{padding:35px;background:#e8f1fb;border:1px solid #d2e2f3;display:grid;grid-template-columns:1.4fr 1fr;gap:35px;position:relative;overflow:hidden}.hero h2{font-size:29px;max-width:540px}.hero p{max-width:520px;color:#526e8c}.hero-path{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 20px}.hero-path div{display:flex;gap:14px;align-items:center;border-bottom:1px solid #c7dbee;padding:8px 0}.hero-path b{font-size:11px;border:1px solid #a3bfdf;padding:6px 9px;border-radius:6px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}.stat strong{font-size:34px;display:block;line-height:1.3;margin:8px 0}.stat span{color:#687a8f;font-size:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.step{padding:16px 0;border-bottom:1px solid var(--line)}.step:last-child{border:0}.step a{font-weight:600}.step p{font-size:12px;color:var(--muted);margin:5px 0}.toolbar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.toolbar input{max-width:380px;flex:1}.toolbar select{width:auto}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:white}.table-wrap table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left;font-size:13px}.table-wrap th{font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;background:#f5f8fc;color:#61768d}.table-wrap th,.table-wrap td{padding:15px 18px;border-bottom:1px solid var(--line)}.table-wrap tbody tr:last-child td{border-bottom:0}.table-wrap tr:hover td{background:#f8fbff}.table-wrap td small{display:block;font-size:11px;max-width:420px;white-space:normal}.table-wrap td a{font-weight:600}.badge{display:inline-flex;padding:3px 9px;border-radius:20px;background:#eaf2fb;font-size:10px;font-weight:600;color:#35618e;white-space:nowrap}.badge.draft{background:#faf2dd;color:#916d25}.badge.archived{background:#eee;color:#777}.badge.released,.badge.active{background:#e4f2e6;color:#326744}.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:22px 0;overflow:auto}.tabs button{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:12px 2px;color:var(--muted);white-space:nowrap}.tabs button.active{color:var(--primary);border-color:var(--primary);font-weight:700}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.detail-field span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.detail-field strong{font-size:14px;white-space:pre-line;font-weight:500}.detail-field.wide{grid-column:1/-1}.version-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#edf3fa;border:1px solid #d8e4f0;border-radius:12px;padding:16px;margin-bottom:20px}.version-bar select{max-width:330px;background:#fff}.version-bar small{margin-right:auto}.empty{padding:45px 25px;text-align:center;border:1px dashed #cbd9e8;border-radius:12px;color:var(--muted);background:#fafcff}.empty h3{color:var(--ink);font-size:19px}.empty p{max-width:560px;margin:8px auto 18px}.loading{padding:60px;text-align:center;color:var(--muted)}.error{padding:16px;border:1px solid #edcbc7;background:#fff4f1;color:#9f3126;border-radius:10px;margin:16px 0}.error ul{padding-left:18px;margin-bottom:0}.note{font-size:12px;padding:14px;background:#eff4fb;border:1px solid var(--line);border-radius:9px;color:#5a7088;white-space:pre-line;margin-bottom:20px}.example-value{color:var(--red)!important}.editor-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.editor-form .wide{grid-column:1/-1}label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#4c637b}input,select,textarea{width:100%;border:1px solid #ccd8e5;background:#fff;border-radius:7px;min-height:42px;padding:9px 11px;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:#0056b3;outline:2px solid #d4e7ff}textarea{min-height:95px;resize:vertical}label small{font-size:11px;font-weight:400}input[type=checkbox]{width:16px;min-height:16px;accent-color:var(--primary)}.check{flex-direction:row;align-items:center;font-size:12px;font-weight:400}.section-title{font-size:15px;font-weight:700;margin:14px 0 0;padding-top:18px;border-top:1px solid var(--line)}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:20px;border-top:1px solid var(--line);grid-column:1/-1}dialog{border:1px solid #d7e2ef;border-radius:16px;padding:0;width:min(820px,calc(100vw - 30px));max-height:90vh;box-shadow:0 25px 100px #10274455;color:var(--ink)}dialog::backdrop{background:#16304c99;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:white;padding:22px 28px;border-bottom:1px solid var(--line);z-index:2}.dialog-head h2{margin:0;font-size:21px}.dialog-body{padding:24px 28px}.icon-button{border:1px solid var(--line);background:white;border-radius:7px;min-width:32px;height:32px;font-size:20px}.operation{padding:20px;border:1px solid var(--line);border-radius:12px;margin:12px 0;background:white;display:flex;gap:18px}.operation-index{background:#e7effa;border-radius:8px;height:40px;min-width:40px;display:grid;place-items:center;font-weight:700}.operation-body{flex:1;min-width:0}.operation h3{margin:0 0 5px}.operation pre{font:12px/1.6 inherit;white-space:pre-wrap;color:#5e7087;margin:10px 0}.operation small{display:block}.document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.document-card{border:1px solid var(--line);padding:20px;border-radius:10px;background:white}.document-card strong{display:block;overflow-wrap:anywhere}.document-card small{display:block;margin:7px 0 14px}.tree ul{list-style:none;padding-left:25px;border-left:1px solid #c8d9eb}.tree li{padding:9px}.tree strong{margin-right:10px}.tree small{display:block}#toast{position:fixed;bottom:24px;right:24px;padding:13px 20px;background:#174c80;color:white;border-radius:10px;box-shadow:0 8px 35px #1b375a33;z-index:50;display:none}#toast.visible{display:block}.pagination{margin:18px 0;display:flex;justify-content:flex-end;gap:12px;align-items:center;font-size:12px}.mobile-menu{display:none}.login-page{min-height:100vh;display:grid;place-items:center;padding:35px;background:#eef3f9}.login-shell{max-width:1100px;width:100%;display:grid;grid-template-columns:1.1fr 1fr;border-radius:22px;overflow:hidden;box-shadow:0 25px 80px #25486b16;background:#fff}.login-story{padding:48px;background:#123f70;color:#edf5ff;min-height:650px;display:flex;flex-direction:column;justify-content:space-between}.login-story h1{font-size:40px;line-height:1.2;letter-spacing:-1.4px}.login-story .eyebrow{color:#b5dcff}.login-story p{color:#c2d8f0;font-size:13px}.login-foot{font-size:11px!important;margin:0}.login-form{padding:55px 46px}.login-form h2{font-size:29px;margin:18px 0 7px}.login-form form{display:grid;gap:19px;margin-top:25px}.mini-brand{font-size:10px;letter-spacing:2px;color:#356d9f;font-weight:700}.login-note{font-size:11px;color:#728297;margin:25px 0 0}.setup-box{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;font-size:12px}.setup-box summary{cursor:pointer;font-weight:600}.setup-box p{margin-top:15px;color:#61768d}.login-form .primary{padding:13px 18px;justify-content:space-between}
@media(max-width:1100px){.sidebar{width:215px;padding:20px 14px}.shell{margin-left:215px}main#content{padding:28px}.topbar{padding:0 28px}.detail-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.document-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.shell{margin-left:0}.mobile-menu{display:block}.topbar{padding:0 18px;height:66px;gap:12px}#breadcrumb{display:none}.topbar-user{margin-left:auto}main#content{padding:24px 18px}.page-head{align-items:flex-start;flex-direction:column;gap:12px}h1{font-size:27px}.hero{grid-template-columns:1fr;padding:24px;gap:15px}.hero h2{font-size:25px}.hero-path{padding:0}.grid2,.detail-grid,.document-grid{grid-template-columns:1fr}.stats{gap:10px}.stat{padding:15px}.stat strong{font-size:27px}.card{padding:20px}.editor-form{grid-template-columns:1fr}.dialog-head{padding:18px}.dialog-body{padding:20px}.tabs{gap:20px}.page-footer{margin:25px 18px}.page-footer span{font-size:10px}.login-page{padding:15px}.login-shell{grid-template-columns:1fr}.login-story{min-height:0;padding:25px}.login-story>div,.login-foot{display:none}.login-form{padding:28px}.operation{padding:14px;gap:10px}.version-bar select{max-width:100%}}

.spec-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.review-pending{padding:16px 20px;border:1px solid #e8ce89;background:#fff9e9;border-radius:12px;margin-bottom:18px;color:#775719}.review-pending ul{margin-bottom:0;padding-left:20px}.product-photo{float:right;width:240px;margin:0 0 20px 24px;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.product-photo img{width:100%;height:auto;display:block}.product-photo small{display:block;padding:10px;font-size:10px}.reference-topic{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:white;overflow:hidden}.reference-topic>summary{padding:16px 20px;cursor:pointer;font-weight:600}.reference-topic>div{padding:0 20px 20px}.reference-topic h3{margin-top:24px}.reference-topic .table-wrap{margin-top:14px}.reference-topic .table-wrap table{white-space:normal}.reference-topic .table-wrap td{vertical-align:top;min-width:120px;overflow-wrap:anywhere}.instruction-text{font:12px/1.7 Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}.detail-grid{min-width:0}#item-tab:after{content:"";display:block;clear:both}.page-head>div{max-width:100%}@media(max-width:760px){.spec-fields{grid-template-columns:1fr}.product-photo{float:none;width:100%;max-width:360px;margin:0 0 20px}.reference-topic>div{padding:0 12px 16px}}

.registration-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.registration-choice{border:1px solid var(--line);background:#f6f9fd;border-radius:12px;padding:22px;text-align:left;color:var(--ink)}.registration-choice:hover{border-color:var(--primary);background:#eaf2fc}.registration-choice strong{display:block;font-size:16px;margin-bottom:8px}.registration-choice span{display:block;font-size:12px;color:var(--muted)}@media(max-width:760px){.registration-choices{grid-template-columns:1fr}}

/* ---------- Seleção da grande área ---------- */
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin-top:6px}
.area-card{position:relative;display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px;min-height:186px;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.area-card h3{margin:0;font-size:19px;letter-spacing:-.4px}
.area-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.area-step{position:absolute;top:18px;right:20px;font-size:11px;font-weight:700;letter-spacing:1px;color:#b6c3d2}
.area-glyph{font-size:26px;line-height:1;color:var(--primary)}
.area-state{margin-top:auto;padding-top:14px;font-size:12px;font-weight:600;color:var(--primary)}
.area-card.open:hover,.area-card.open:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px #20344914;border-color:var(--accent)}
.area-card.open:focus-visible{outline:2px solid var(--accent)}
.area-card.soon,.area-card.locked{background:#fbfcfd;border-style:dashed;cursor:not-allowed}
.area-card.soon .area-glyph,.area-card.locked .area-glyph{color:#a9b8c8}
.area-card.soon h3,.area-card.locked h3{color:#7b8a9b}
.area-card.soon .area-state{color:#8d9cad}
.area-card.locked .area-state{color:var(--red)}
.area-foot{margin:22px 0 0;font-size:12px}

/* ---------- Menu com contexto de área ---------- */
.nav-back{margin-bottom:12px;border:1px solid #3a5b7d;color:#bed2e6 !important;font-size:12px}
.nav-back:hover{background:#315575}

/* ---------- Permissões de área no cadastro de usuário ---------- */
.area-picker-field .field-label{display:block;font-size:12px;font-weight:600;margin-bottom:9px}
.area-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 14px;margin-bottom:8px}
.area-checks .check{font-size:13px}
.area-checks input:disabled+*,.area-checks .check:has(input:disabled){color:var(--muted)}

@media(max-width:700px){.area-grid{grid-template-columns:1fr}.area-card{min-height:0}}

/* ---------- Chão de fábrica ---------- */
.confirm-text{font-size:14px;line-height:1.6;margin:4px 0 20px}
.progresso{margin-top:10px}
.progresso-barra{height:9px;border-radius:5px;background:#e6ecf3;overflow:hidden}
.progresso-barra span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:5px;transition:width .3s ease}
.progresso small{display:block;margin-top:6px;color:var(--muted)}
.operation.estado-running{border-left:4px solid var(--accent)}
.operation.estado-paused{border-left:4px solid #c98a00;background:#fffdf6}
.operation.estado-done{opacity:.62}
.operation.estado-draft .operation-index{background:#eef2f7}

/* ---------- Material a separar ---------- */
.material-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.material-list li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid #eef2f6}
.material-list li:last-child{border-bottom:0}
.material-nome{flex:1;font-size:14px;color:var(--ink)}
.material-list b{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.material-list small{color:var(--muted);font-size:11px;min-width:76px;text-align:right}
.operation.separacao{border-left:4px solid #6b53b4;background:#fbfaff}
.operation.separacao .operation-index{background:#efeaff;color:#5a43a3}
@media(max-width:640px){.material-list small{display:none}}

/* ---------- SKU do produto final ---------- */
.sku{display:inline-block;background:#eef3fa;color:var(--primary);border:1px solid #d3e0ef;border-radius:5px;padding:1px 7px;font-size:13px;font-weight:700;letter-spacing:.3px;margin-right:4px}
.operation.separacao .sku{background:#efeaff;color:#5a43a3;border-color:#ddd4f4}
.separar-chamada{margin:8px 0 2px;font-size:15px;font-weight:700;color:var(--ink)}
.sku-linha{display:block;margin-bottom:2px}
.falta{color:#b06a00;font-weight:600}
.estornada{color:var(--muted);text-decoration-thickness:2px}

/* ---------- Recebimento ---------- */
.vencido{color:var(--red);font-weight:700}
.vencendo{color:#b06a00;font-weight:600}
.chave{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.5px}
.sem-item{color:var(--red);font-size:12px;font-weight:600}
.entrada-linha{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:#fafcfe}
.entrada-linha>strong{display:block;margin-bottom:10px}
.vaga{display:inline-flex;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.vaga-livre{background:#e4f2e6;color:#2f6543}
.vaga-parcial{background:#faf2dd;color:#8a6720}
.vaga-cheio{background:#fdecea;color:#9f3126}
.vaga-inativo{background:#eef1f4;color:#71808f}
.progresso-barra.quase span{background:linear-gradient(90deg,#c88a12,#e0a92c)}
.progresso-barra.cheia span{background:linear-gradient(90deg,#9f3126,#c5493c)}
.stat-alerta{border-color:#e4c3be;background:#fff7f5}
/* Equipamento que voltou três vezes na janela: a ficha diz antes de alguém perguntar. */
.card-alerta{border-color:#e4c3be;background:#fffaf8}
/* A árvore do equipamento: subconjunto, item mantenível, peça. */
.comp-arvore{list-style:none;margin:0;padding-left:0}
.comp-arvore .comp-arvore{padding-left:22px;border-left:1px solid #dbe5f0;margin-left:6px}
.comp-arvore li{padding:6px 0;border-bottom:1px solid #f0f4f9}
.comp-arvore li:last-child{border-bottom:0}
.comp-arvore small{display:block;font-size:11px;color:var(--muted)}
.comp-cod{display:inline-block;min-width:44px;font-size:11px;color:#5d7a9a;font-weight:600}
.stat-alerta strong{color:var(--red)}
.rastro{list-style:none;margin:8px 0 0;padding-left:0}
.rastro .rastro{padding-left:26px;border-left:2px solid #d8e3ee;margin-left:8px}
.rastro li{padding:10px 0;border-bottom:1px solid var(--line)}
.rastro li:last-child{border-bottom:0}
.rastro li>div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rastro li>div>span{font-weight:600}
.rastro small{display:block;color:var(--muted)}

/* ---------- Tabela longa: rolagem própria e cabeçalho fixo ----------
   `overflow:auto` sozinho só resolvia a largura. Sem altura máxima, uma
   tabela de duzentas linhas empurrava o resto da página para fora da tela e
   o cabeçalho sumia antes da terceira rolagem. */
.table-wrap{max-height:min(68vh,620px)}
.table-wrap thead th{position:sticky;top:0;z-index:2}
.table-wrap tfoot td{position:sticky;bottom:0;background:#f5f8fc;font-weight:600}
.dialog-body .table-wrap{max-height:340px}

/* ---------- Gráficos ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font:11px Inter,Arial,sans-serif;fill:#61768d}
.chart text.valor{fill:#203449;font-weight:600}
.chart .grade{stroke:#e7edf4;stroke-width:1}
.chart .eixo{stroke:#cfdae6;stroke-width:1}
.chart-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:#61768d;margin-top:10px}
.chart-legenda span{display:inline-flex;align-items:center;gap:6px}
.chart-legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}
.chart-vazio{padding:28px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed #cbd9e8;border-radius:10px}
.grid2 .card{margin-bottom:0}

/* ---------------------------------------------- Árvore do produto
   O zoom e o arrasto trocam o atributo `transform` de um grupo do SVG —
   atributo de apresentação, não folha de estilo, porque a política de
   segurança não aceita `style` inline. Aqui fica só o que é estático. */
.arv-wrap{position:relative;height:min(64vh,620px);border:1px solid var(--linha,#e2e8f0);
  border-radius:12px;background:
    radial-gradient(circle at 1px 1px,#e2e8f0 1px,transparent 0) 0 0/22px 22px,#f8fafc;
  overflow:hidden;cursor:grab;touch-action:none;margin:14px 0 6px}
.arv-wrap.arrastando{cursor:grabbing}
.arv-wrap svg.arvore{width:100%;height:100%;display:block;overflow:visible}
.arv-no{cursor:default}
.arv-no:focus{outline:none}
.arv-no:focus rect:first-of-type{stroke-width:3}
.arv-abrir{cursor:pointer}
.arv-controles{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.arv-zoom-nivel{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;
  font-size:.82rem;color:var(--tinta-fraca,#64748b)}
.arv-legenda{margin:0 0 14px}
.campo-inline{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;
  color:var(--tinta-fraca,#64748b)}
.campo-inline input{width:110px}
.arv-barra{align-items:center}
.arv-barra .campo-inline{white-space:nowrap}
.arv-barra button{white-space:nowrap}
.campo-inline{flex-wrap:nowrap}
.arv-wrap svg.arvore{width:100%;height:100%}

/* ------------------------------------------- Reaproveitar preparação */
.reuso-lista{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow-y:auto;
  margin:8px 0 4px;padding-right:4px}
.reuso-item{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:left;
  padding:8px 10px;border:1px solid var(--linha,#e2e8f0);border-radius:9px;background:#fff;
  cursor:pointer;font:inherit}
.reuso-item:hover{border-color:#94a3b8;background:#f8fafc}
.reuso-item.escolhido{border-color:#2563eb;background:#eff6ff}
.reuso-item strong{font-size:.86rem;color:#0f172a}
.reuso-item span{font-size:.84rem;color:#475569}
.reuso-item small{grid-column:1/-1;font-size:.76rem;color:#64748b}
.field.desligado{opacity:.55}

/* -------------------------------------------------- Cartão do nó da árvore */
.arv-cartao{box-sizing:border-box;height:100%;display:flex;flex-direction:column;gap:3px;
  padding:9px 11px;border:1.4px solid #cbd5e1;border-left-width:5px;border-radius:10px;
  background:#fff;font-family:inherit;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.06)}
.arv-cab,.arv-nome,.arv-qtd{flex:none}
.arv-fatos{min-height:0}
.arv-cartao.arv-t-finished{border-left-color:#1d4ed8}
.arv-cartao.arv-t-intermediate{border-left-color:#2563eb}
.arv-cartao.arv-t-ingredient{border-left-color:#047857}
.arv-cartao.arv-t-packaging{border-left-color:#b45309}
.arv-cartao.arv-raiz{border-width:2px;border-left-width:6px;background:#f8fafc}
.arv-cartao.arv-direto{border-style:dashed}
.arv-cartao.arv-pendente{border-color:#f59e0b}
.arv-cartao.arv-apagado{opacity:.28}
.arv-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.arv-cab b{font-size:12.5px;color:#0f172a;letter-spacing:.01em}
.arv-cab span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}
.arv-nome{font-size:11px;color:#475569;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arv-qtd{font-size:12.5px;font-weight:600;color:#0f172a}
.arv-qtd i{display:block;font-style:normal;font-size:10px;font-weight:400;color:#64748b}
.arv-fatos{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:2px 0 0;font-size:10.5px}
.arv-fatos dt{color:#94a3b8;white-space:nowrap}
.arv-fatos dd{margin:0;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arv-fatos dd i{display:block;font-style:normal;color:#94a3b8;font-size:9.5px}
.arv-fatos dd b.arv-alerta{color:#b91c1c;font-weight:600}
.arv-vazio{color:#cbd5e1;font-style:italic}
.arv-motivo{font-size:10px;color:#b45309;line-height:1.2}
.arv-falta{margin-top:auto;font-size:10.5px;font-weight:600;color:#b45309;
  background:#fffbeb;border-radius:5px;padding:2px 6px;cursor:help}
.arv-pendencias code{font-size:.78rem;background:#f1f5f9;border-radius:4px;padding:1px 5px;margin-right:2px}
.note-ok{border-left:3px solid #059669}

/* ------------------------------------------- Detalhe do nó escolhido */
.arv-cartao{cursor:pointer}
/* A régua que mede o cartão antes de desenhá-lo. Fora da tela, com a mesma
   largura e o mesmo CSS — estimar a altura de um texto que o navegador ainda
   não quebrou é adivinhar, e foi assim que o cartão cortou nome duas vezes. */
#arv-regua{position:absolute;left:-10000px;top:0;visibility:hidden;pointer-events:none}
#arv-regua .arv-cartao{height:auto}
/* O cartão da etapa carrega a receita inteira: ele cresce com o que tem a
   dizer, e é por isso que a altura é medida. */
.arv-cartao-etapa{gap:5px}
.arv-entra{width:100%;border-collapse:collapse;font-size:10px;margin-top:3px}
.arv-entra td{padding:2px 3px;border-bottom:1px solid #ede9fe;vertical-align:top}
.arv-entra tr.cab td{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#7c3aed;border-bottom:1px solid #ddd6fe;padding-bottom:2px}
.arv-entra tr.soma td{font-weight:700;border-bottom:0;border-top:1px solid #c4b5fd;color:#0f172a}
.arv-entra tr.arv-vem td{background:#f5f3ff}
.arv-entra td.q{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.arv-entra td.un{color:#94a3b8;white-space:nowrap}
.arv-entra b{color:#0f172a}
.arv-perda{display:block;font-size:9px;color:#b45309}
.arv-conta{font-size:10px;line-height:1.35;border-radius:5px;padding:3px 6px;cursor:help}
.arv-conta.ok{background:#ecfdf5;color:#065f46}
.arv-conta.falta{background:#fffbeb;color:#92400e}
.arv-conta.falha{background:#fff4f1;color:#9f3126}
.arv-derivado{display:block;font-size:8.5px;font-style:italic;opacity:.8}
/* A coluna do lote fica ao lado da quantidade do pedido, e mais apagada:
   sao duas escalas diferentes lidas na mesma linha, e a do equipamento e a
   referencia, nao o que se vai produzir hoje. */
.arv-entra td.arv-lote-q{text-align:right;font-variant-numeric:tabular-nums;
 white-space:nowrap;color:#7c6ba8;background:#faf8ff}
.arv-entra tr.cab i{font-style:normal;font-weight:400;opacity:.75;text-transform:none;letter-spacing:0}
.arv-lote{font-size:10px;line-height:1.35;margin-top:3px;padding:3px 6px;border-radius:5px;
 background:#f5f3ff;color:#4c1d95;cursor:help}
.arv-lote-sai{font-size:9.5px;line-height:1.35;padding:2px 6px;border-radius:5px;margin-top:2px;cursor:help}
.arv-lote-sai.ok{background:#ecfdf5;color:#065f46}
.arv-lote-sai.falha{background:#fff4f1;color:#9f3126}
.arv-param{width:100%;border-collapse:collapse;font-size:10px;margin-top:3px}
.arv-param td{padding:2px 3px;border-bottom:1px solid #ede9fe;vertical-align:top}
.arv-param tr.cab td{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
 color:#6d28d9;border-bottom:1px solid #c4b5fd;padding-top:4px}
.arv-param td.v{text-align:right;font-weight:600;color:#0f172a;white-space:nowrap}
.arv-param td.v .un{color:#94a3b8;font-weight:400}
/* Regulagem que a receita pede e o catalogo do centro nao conhece. */
.arv-param tr.falta td{background:#fffbeb}
.arv-alerta{font-size:8.5px;padding:0 4px;border-radius:999px;background:#fde68a;color:#92400e;font-weight:600}
.arv-exemplo{font-size:8.5px;padding:0 4px;border-radius:999px;background:#e0e7ff;color:#3730a3;font-weight:600}
.arv-controles{display:flex;flex-wrap:wrap;gap:3px}
.arv-pc{font-size:9px;padding:1px 5px;border-radius:999px;background:#eef2ff;color:#3730a3;cursor:help}
.arv-pc.ccp{background:#fef2f2;color:#991b1b;font-weight:700}
.arv-instrucao-cartao{font-size:9.5px;line-height:1.4;color:#475569;background:#f5f3ff;
  border-radius:5px;padding:4px 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.arv-instrucao-cartao b{display:block;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#7c3aed;margin-bottom:2px}
.arv-cartao.arv-escolhido{border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.16)}
.arv-detalhe{margin:6px 0 4px}
.arv-det-cab{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:flex-start;padding:14px 16px;border:1px solid var(--linha,#e2e8f0);
  border-radius:12px;background:#fff;margin-bottom:12px}
.arv-det-cab h3{margin:2px 0 4px}
.arv-det-cab p{margin:0}
.arv-det-falta{background:#fffbeb;border:1px solid #fcd34d;border-radius:9px;padding:8px 12px;max-width:520px}
.arv-det-falta strong{color:#b45309;font-size:.84rem}
.arv-det-falta ul{margin:4px 0 0;padding-left:16px}
.arv-det-falta li{font-size:.82rem;color:#78350f;line-height:1.4}
.arv-det-ok{background:#ecfdf5;border:1px solid #6ee7b7;border-radius:9px;padding:8px 12px;
  font-size:.84rem;color:#065f46}
.arv-etapa{border:1px solid var(--linha,#e2e8f0);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.arv-etapa-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.arv-etapa-cab b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border-radius:7px;background:#eff6ff;color:#1d4ed8;font-size:.8rem}
.arv-etapa-cab span{font-weight:600;color:#0f172a}
.arv-etapa-cab small{color:#64748b}
.arv-etapa-fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px 14px;margin:10px 0 8px}
.arv-etapa-fatos dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}
.arv-etapa-fatos dd{margin:0 0 6px;font-size:.86rem;color:#334155}
.arv-etapa-ins{width:100%;border-collapse:collapse;font-size:.84rem}
.arv-etapa-ins th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:#94a3b8;font-weight:500;padding:4px 8px 4px 0;border-bottom:1px solid var(--linha,#e2e8f0)}
.arv-etapa-ins td{padding:5px 8px 5px 0;border-bottom:1px solid #f1f5f9;color:#334155}
.arv-etapa-ins strong{color:#0f172a}
.arv-sem-ins{margin:4px 0 0;font-size:.84rem}
.arv-instrucao{margin:10px 0 0;padding:10px 12px;background:#f8fafc;border-radius:8px;
  font-size:.82rem;white-space:pre-wrap;color:#475569}

/* ------------------------------------------- Cartão da etapa do roteiro */
.arv-cartao.arv-t-etapa{border-left-color:#7c3aed;background:#faf9ff}
.arv-cartao.arv-t-etapa .arv-cab b{color:#5b21b6}
.arv-etapa-nome{font-size:12.5px;font-weight:600;color:#0f172a;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arv-instr-resumo{margin-top:auto;font-size:10px;color:#475569;line-height:1.3;
  background:#f5f3ff;border-radius:5px;padding:4px 6px;cursor:help;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arv-instr-vazia{margin-top:auto;font-size:10px;font-style:italic;color:#c4b5fd;
  background:#faf9ff;border:1px dashed #ddd6fe;border-radius:5px;padding:3px 6px}

/* ------------------------------------------- Bloco da etapa no cadastro */
.bloco-etapa{border:1px solid var(--linha,#e2e8f0);border-radius:12px;background:#fff;
  padding:16px 18px;margin-bottom:14px}
.bloco-cab{display:flex;align-items:flex-start;gap:12px}
.bloco-cab b{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  border-radius:9px;background:#eff6ff;color:#1d4ed8;font-size:.92rem}
.bloco-cab h4{margin:0;font-size:1rem;color:#0f172a}
.bloco-cab small{color:#64748b}
.bloco-cab>div{flex:1}
.bloco-balanco{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:14px 0;padding:12px 14px;background:#f8fafc;border-radius:10px}
.bloco-balanco>div{display:flex;flex-direction:column;gap:1px}
.bloco-balanco span{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}
.bloco-balanco strong{font-size:1.05rem;color:#0f172a}
.bloco-balanco small{font-size:.74rem;color:#94a3b8;line-height:1.3}
.bloco-balanco .bloco-perda{color:#b45309}
.bloco-medir{font-style:italic;color:#94a3b8;font-size:.9rem}
.bloco-tab{width:100%;border-collapse:collapse;font-size:.86rem}
.bloco-tab th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:#94a3b8;font-weight:500;padding:5px 10px 5px 0;border-bottom:1px solid var(--linha,#e2e8f0)}
.bloco-tab td{padding:7px 10px 7px 0;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:top}
.bloco-tab small{display:block;color:#94a3b8;font-size:.76rem}
.bloco-vazio,.bloco-contados{font-size:.84rem;margin:8px 0 0}
.bloco-instr{margin-top:12px}
.bloco-instr>span{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}
.bloco-instr pre{margin:4px 0 0;padding:11px 13px;background:#f8fafc;border-radius:9px;
  white-space:pre-wrap;font-size:.85rem;line-height:1.5;color:#334155}
.bloco-sem-instr{margin:4px 0 0;padding:9px 12px;border:1px dashed #cbd5e1;border-radius:9px;
  font-size:.83rem;color:#94a3b8;font-style:italic}

/* ---------------------------------------------- a ordem vista pelo operador
   Três passos numerados, porque é assim que a pessoa vive o turno: recebe,
   faz, entrega. O que ela tem de apontar vem depois — primeiro ela precisa
   saber o que fazer. */
.op-briefing{border-left:4px solid var(--accent)}
.op-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:12px 0}
.op-passo{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:10px;background:#f5f8fc}
.op-passo.op-alerta{border-color:#e8ce89;background:#fff9e9}
.op-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.op-passo.op-alerta .op-num{background:#b06a00}
.op-rotulo{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700}
.op-passo strong{display:block;font-size:21px;line-height:1.25;margin:4px 0 2px;letter-spacing:-.4px}
.op-passo small{display:block;color:var(--muted);font-size:12px}
.op-tempo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 14px;border:1px dashed #ccd8e5;border-radius:10px}
.op-tempo>span{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700}
.op-tempo strong{font-size:17px}
.op-tempo small{color:var(--muted)}

.op-etapa{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:#fff}
.op-etapa:last-child{margin-bottom:0}
.op-etapa-cab{display:flex;align-items:flex-start;gap:14px}
.op-etapa-cab>b{flex:none;width:40px;height:40px;border-radius:8px;background:#e7effa;display:grid;place-items:center;font-size:14px}
.op-etapa-cab>div{flex:1;min-width:0}
.op-etapa-cab h4{margin:0 0 3px;font-size:16px}
.op-etapa-cab small{display:block;color:var(--muted);font-size:12px}
.op-instrucao{margin:14px 0 0;padding:14px 16px;background:#f5f8fc;border-radius:9px;border-left:3px solid var(--accent);
 font:13.5px/1.65 Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.op-sem-instrucao{margin:14px 0 0;padding:12px 14px;border:1px solid #e8ce89;background:#fff9e9;border-radius:9px;color:#775719;font-size:12px}
.note-alerta{border-color:#e8ce89;background:#fff9e9;color:#775719}
@media(max-width:760px){.op-passos{grid-template-columns:1fr}.op-etapa{padding:14px}}

.ordem-col{width:44px;text-align:center}
.ordem-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:700}
.fora-balanco{color:#916d25!important}

.arv-ir{display:block;width:100%;margin-top:8px;border:1px solid #c7d6e6;background:#eef4fb;color:var(--primary);border-radius:6px;padding:6px 8px;font-size:11px;font-weight:700;text-align:center;line-height:1.3}
.arv-ir:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.arv-ir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.codigo-par{font-size:20px;letter-spacing:4px;font-family:ui-monospace,monospace}
.passos-app{padding-left:20px;line-height:1.9}
.passos-app code.endereco{background:#eef4fb;padding:3px 7px;border-radius:5px;font-size:13px}
.badge.running{background:#e4f2e6;color:#326744}

.linha-tempo{list-style:none;margin:0;padding:0}
.linha-tempo li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.linha-tempo li:last-child{border-bottom:0}
.lt-icone{flex:none;width:32px;height:32px;border-radius:50%;background:#eef4fb;display:grid;place-items:center;font-size:14px}
.linha-tempo b{display:block;font-size:14px}
.linha-tempo small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.lt-detalhe{white-space:pre-wrap;overflow-wrap:anywhere}
.lt-maquina .lt-icone{background:#fff4e2}
.lt-qualidade .lt-icone{background:#e4f2e6}
.lt-alerta .lt-icone{background:#fff4f1;color:var(--red)}
.lt-alerta b{color:var(--red)}

.arv-ir{text-decoration:none;display:block}

.pend-item{display:block;margin:3px 0;font-size:12px}
.pend-item code{margin-right:6px}


/* ------------------------------------------------------------------
   A FICHA DE PRODUÇÃO
   Coluna única, largura de leitura, sem pan e sem zoom. É para ser lida
   em pé na frente do equipamento — e impressa, que é como a fábrica
   ainda leva instrução para a bancada.
   ------------------------------------------------------------------ */
.ficha{max-width:820px;margin:0 auto}
.ficha-escala{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;margin-bottom:18px}
.ficha-escala label{font-size:12px;color:#475569}
.ficha-escala input{width:120px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:6px;
 font-variant-numeric:tabular-nums}
.ficha-escala em{flex-basis:100%;font-size:11px;color:#64748b;font-style:normal}

.ficha-etapa{border:1px solid #e2e8f0;border-left:4px solid #6d28d9;border-radius:10px;
 padding:16px 18px;margin-bottom:16px;background:#fff}
.ficha-etapa.exemplo{border-left-color:#f59e0b}
.ficha-etapa-cab{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;margin-bottom:12px}
.ficha-num{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:#6d28d9;color:#fff;
 display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.ficha-etapa-cab h3{margin:0;font-size:17px;color:#0f172a}
.ficha-etapa-cab p{margin:0;font-size:12px;color:#64748b}

.ficha-tab{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.ficha-tab th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
 color:#6d28d9;border-bottom:1px solid #c4b5fd;padding:4px 6px;font-weight:600}
.ficha-tab th.q,.ficha-tab td.q{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ficha-tab td{padding:6px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.ficha-tab td.un{color:#94a3b8;white-space:nowrap;width:1%}
.ficha-tab td.lote{color:#7c6ba8;background:#faf8ff}
.ficha-tab tr.vem td{background:#f5f3ff}
.ficha-tab tr.soma td{font-weight:700;border-top:1px solid #c4b5fd;border-bottom:0}
.ficha-tab small{display:block;font-size:11px;color:#b45309;margin-top:2px}
.ficha-ordem{display:inline-block;min-width:18px;margin-right:6px;padding:0 5px;border-radius:4px;
 background:#eef2ff;color:#3730a3;font-size:11px;text-align:center}
.ficha-pronto{font-size:11px;color:#6d28d9;cursor:help}

.ficha-bloco{margin:14px 0}
.ficha-bloco h4{margin:0 0 6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6d28d9}
.ficha-param{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13px}
.ficha-param dt{color:#475569}
.ficha-param dd{margin:0;text-align:right}
.ficha-param dd.falta{background:#fffbeb;border-radius:4px;padding:0 4px}

/* Os passos são o que o leigo lê. Espaçados o bastante para achar a linha
   depois de olhar para a panela e voltar. */
.ficha-passos{margin:0;padding-left:26px;font-size:14px;line-height:1.55}
.ficha-passos li{margin-bottom:6px}
.ficha-min{display:inline-block;margin-left:8px;font-size:11px;color:#64748b;
 background:#f1f5f9;border-radius:4px;padding:0 5px}

.ficha-sai{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:12px 0 4px;
 padding:8px 12px;border-radius:8px;font-size:14px}
.ficha-sai span{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.ficha-sai b{font-size:17px}
.ficha-sai em{flex-basis:100%;font-size:11px;font-style:normal;opacity:.85}
.ficha-sai.ok{background:#ecfdf5;color:#065f46}
.ficha-sai.derivado{background:#f8fafc;color:#334155}
.ficha-sai.falta{background:#fffbeb;color:#92400e}

.ficha-lote{margin:8px 0;padding:6px 10px;border-radius:6px;background:#f5f3ff;color:#4c1d95;font-size:12px}
.ficha-chip{font-size:10px;padding:1px 6px;border-radius:999px;background:#e2e8f0;color:#334155;
 font-weight:600;cursor:help}
.ficha-chip.alerta{background:#fde68a;color:#92400e}
.ficha-chip.exemplo{background:#e0e7ff;color:#3730a3}
.ficha-aviso{margin:6px 0;font-size:12px;color:#9f3126;background:#fff4f1;border-radius:6px;padding:6px 10px}
.ficha-vazio{margin:8px 0;font-size:12px;color:#92400e;background:#fffbeb;border-radius:6px;padding:6px 10px}
.ficha-pcs{margin:0;padding-left:20px;font-size:13px;line-height:1.5}
.ficha-pcs span{color:#64748b;font-size:11px}
.ficha-obs{margin-top:12px;font-size:12px;color:#475569}
.ficha-obs summary{cursor:pointer;color:#6d28d9}
.ficha-obs pre{white-space:pre-wrap;font:inherit;background:#f8fafc;border-radius:6px;padding:8px 10px;margin:6px 0 0}
.ficha-rodape{margin-top:22px;padding-top:14px;border-top:1px solid #e2e8f0;font-size:13px}
.ficha-rodape p{margin:0 0 8px}
.ficha-rodape span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.ficha-rodape a{display:inline-block;margin:0 10px 4px 0;color:#6d28d9}

@media print{
 /* A bancada ainda lê papel. O que não é a ficha não vai junto. */
 #sidebar,.page-head .actions,.ficha-escala,nav,header,footer,button{display:none!important}
 .ficha{max-width:none}
 .ficha-etapa{break-inside:avoid;page-break-inside:avoid;border-left-width:3px}
 .ficha-obs[open] pre{display:block}
 .ficha-obs{display:none}
}

.ficha-recebe{margin:8px 0;padding:6px 10px;border-radius:6px;background:#f5f3ff;color:#4c1d95;font-size:13px}

.ficha-conta{margin:6px 0;padding:6px 10px;border-radius:6px;background:#f8fafc;color:#334155;font-size:12px}
.ficha-conta b{color:#0f172a}

/* A etapa que entrega o item e a OP: ela fecha a ordem, e por isso nao e
   um passo qualquer da corrente. */
.arv-cartao.arv-entrega{border-color:#6d28d9;box-shadow:0 0 0 2px rgba(109,40,217,.18)}
.arv-suposto{display:block;font-size:8.5px;font-style:italic;color:#b45309;cursor:help}

/* O BLOCO DA SEPARAÇÃO
   Uma lista, não uma ficha: quem separa não compra e não planeja, então
   fornecedor, política e saldo ficam de fora. Verde-azulado para não se
   confundir nem com a matéria-prima solta (verde) nem com a etapa (roxo). */
.arv-cartao.arv-cartao-req{border-color:#5eead4;background:#f0fdfa}
.arv-cartao-req .arv-cab b{color:#115e59}
.arv-cartao-req .arv-cab span{color:#0f766e;letter-spacing:.06em}
.arv-req-sub{font-size:9.5px;color:#0f766e;opacity:.85;margin-bottom:3px}
.arv-req-lista{width:100%;border-collapse:collapse;font-size:10px}
.arv-req-lista td{padding:2px 3px;border-bottom:1px solid #ccfbf1;vertical-align:top}
.arv-req-lista td b{color:#115e59;white-space:nowrap}
.arv-req-lista td.q{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:#0f172a;font-weight:600}
.arv-req-lista td.un{color:#5eead4;white-space:nowrap;width:1%}
.arv-req-lista tfoot tr.soma td{font-weight:700;border-bottom:0;border-top:1px solid #5eead4;color:#115e59}

/* A FAIXA DA ORDEM
   O bloco que vira ordem diz isso na testa, em faixa cheia, antes do codigo
   e do nome. E a primeira coisa que se le no cartao — e a unica que responde
   "isto aqui alguem vai executar?". */
.arv-cartao-op{border-width:2px}
.arv-op{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
 margin:-7px -8px 6px;padding:4px 8px;border-radius:7px 7px 0 0;
 background:#1d4ed8;color:#fff}
.arv-op b{font-size:9px;letter-spacing:.09em;font-weight:800}
.arv-op span{font-size:9px;opacity:.92;text-align:right;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.arv-op-sep{background:#0f766e}
/* Desvio contra o preço padrão: caro é vermelho, barato é verde. */
.desvio-acima{color:#b91c1c;font-weight:600}
.desvio-abaixo{color:#15803d;font-weight:600}
.desvio-igual{color:#64748b}
/* Cobertura: pouco tempo de estoque alerta, muito tempo tranquiliza. */
.cobertura-curta{color:#b91c1c;font-weight:600}
.cobertura-longa{color:#15803d;font-weight:600}

/* A posição na fila do setor: número grande e as duas setas ao lado. */
.fila-pos{display:flex;align-items:center;gap:4px}
.fila-pos b{min-width:22px;font-variant-numeric:tabular-nums}
.fila-pos .icon-button{padding:2px 6px;line-height:1}

/* A expedição tem ordem, mas não fabrica: entra na faixa em tom apagado. */
.arv-op em{font-size:9px;font-style:normal;opacity:.62;white-space:nowrap;padding-left:4px}

.arv-cartao-op.arv-t-etapa .arv-op{background:#6d28d9}
.arv-cartao-req.arv-cartao-op{border-color:#0f766e}

/* A LISTA DE CONFERÊNCIA DA SEPARAÇÃO
   O tique é a coluna mais à esquerda porque é por onde o olho desce a lista:
   quem está com o carrinho quer saber o que ainda falta, não o que já foi. */
.sep-tique{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;
 border-radius:50%;background:#059669;color:#fff;font-weight:700;font-size:13px}
.sep-tique.vazio{background:#fff;color:#cbd5e1;border:2px solid #cbd5e1;line-height:18px}
.sep-ok{color:#065f46;font-weight:600}
.sep-pronto{color:#92400e;font-weight:600}
.sep-progresso{position:relative;margin:0 0 12px;padding:8px 12px;border-radius:8px;
 background:#f8fafc;border:1px solid #e2e8f0;font-size:13px;color:#334155;overflow:hidden}
.sep-progresso b{color:#0f172a}
.sep-progresso.completo{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.sep-progresso i{position:absolute;left:0;right:0;bottom:0;height:3px;display:flex;gap:1px}
.sep-progresso i u{flex:1;background:#e2e8f0;text-decoration:none}
.sep-progresso i u.feito{background:#059669}

/* AS ATIVIDADES DA ORDEM
   O bloco passou a carregar o que entra nela, e não só o nome: quem pesa
   precisa do número desta atividade, não do total da ordem. */
.op-etapa.com-relogio{border-left:3px solid #6d28d9}
.op-etapa.feita{opacity:.72}
.op-entra{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.op-entra th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
 color:#6d28d9;border-bottom:1px solid #c4b5fd;padding:4px 6px;font-weight:600}
.op-entra th.q,.op-entra td.q{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.op-entra td{padding:6px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.op-entra td.un{color:#94a3b8;white-space:nowrap;width:1%}
.op-entra tr.soma td{font-weight:700;border-top:1px solid #c4b5fd;border-bottom:0}
.op-entra small{display:block;font-size:11px;color:#b45309;margin-top:2px}
.op-pronto{font-size:11px;color:#6d28d9}
.op-recebe,.op-lote{margin:8px 0;padding:6px 10px;border-radius:6px;background:#f5f3ff;color:#4c1d95;font-size:12px}
.op-aviso{margin:6px 0;padding:6px 10px;border-radius:6px;background:#fff4f1;color:#9f3126;font-size:12px}
.op-bloco{margin:12px 0}
.op-bloco h5{margin:0 0 6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6d28d9}
.op-param{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13px}
.op-param dt{color:#475569}
.op-param dd{margin:0;text-align:right}
.op-passos{margin:0;padding-left:24px;font-size:14px;line-height:1.55}
.op-passos li{margin-bottom:5px}
.op-chip{font-size:10px;padding:0 5px;border-radius:999px;background:#e0e7ff;color:#3730a3;font-weight:600}
.op-sai{margin:10px 0 0;padding:7px 12px;border-radius:7px;background:#f8fafc;color:#334155;font-size:14px}
.op-sai.ok{background:#ecfdf5;color:#065f46}
.op-sai.falta{background:#fffbeb;color:#92400e}
.op-sai i{display:block;font-size:11px;font-style:normal;opacity:.85}
.op-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #e2e8f0}
.op-feita{color:#065f46;font-weight:600;font-size:13px}

/* O número da ordem de adição encostava no nome e na seta. */
.op-entra .ordem-num{margin-right:9px;vertical-align:middle}
.op-entra .op-pronto{margin-right:4px}

.op-pct{display:inline-block;margin-left:8px;font-size:13px;font-style:normal;font-weight:700;
 color:#059669;background:#ecfdf5;border-radius:999px;padding:1px 8px;vertical-align:middle}
.op-equipe{align-self:center;font-size:13px;color:#475569;margin-right:4px}

/* O setor que trava a ordem é um caminho, e caminho se vê que é caminho. */
.botao-fila{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:7px;
 border:1px solid #cbd5e1;background:#fff;color:#1d4ed8;font-size:13px;font-weight:600;
 text-decoration:none;line-height:1.2}
.botao-fila:hover{border-color:#1d4ed8;background:#eff6ff}

/* Data editável na carteira de ordens: não pode esticar a coluna. */
.prog-data{width:auto;min-width:145px;min-height:34px;padding:5px 8px}

/* ---------- Mapa de ocupação dos recursos ---------- */
.rec-campo{flex-direction:row;align-items:center;gap:9px;font-size:12px;white-space:nowrap}
.rec-campo input{width:auto;min-height:38px}
.uso{display:inline-block;min-width:52px;text-align:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.uso-ok{background:#e4f2e6;color:#326744}
.uso-apertado{background:#faf2dd;color:#916d25}
.uso-estoura{background:#fdeceb;color:#9f3126}
.uso-nd{background:#eef2f7;color:#69788b}
.uso-rascunho{display:inline-block;width:6px;height:6px;border-radius:50%;background:#916d25;margin-left:5px;vertical-align:middle}

/* O passo a passo da etapa, onde antes havia um bloco de prosa. */
.passos-etapa{margin:.25rem 0 0;padding-left:1.35rem;display:grid;gap:.2rem}
.passos-etapa li{line-height:1.45}
.passos-etapa li b{font-weight:600}