/* ═══ 5.0 · bloco c · estados em bolinhas que se carregam; Pedidos com quatro passos e o pedido aberto com ícones ═══ */

/* fios sempre cinzentos e iguais em todas as bolinhas da app (já não há fios verdes misturados com cinzentos) */
.stp47 .c+.c::before,.stp47 .c.on::before,.stp47 .c.cur::before{background:#d3d9da}

/* o título «Estado» manda nos passos: uma chaveta fina liga o título a todos os nomes dos passos */
.sth48>.thf43{text-align:center;text-align-last:center;padding-left:13px}
.sth48>.stph47{position:relative;padding-top:8px;margin-top:1px}
.sth48>.stph47::before{content:'';position:absolute;top:2px;left:calc(50% / var(--n,3));right:calc(50% / var(--n,3));height:5px;border:1.5px solid #c1c8c9;border-bottom:0;border-radius:4px 4px 0 0}
.sth48>.stph47::after{content:'';position:absolute;top:-2px;left:50%;height:4px;border-left:1.5px solid #c1c8c9}

/* bolinhas que se carregam: ✓ verde feito, ✕ vermelho não houve, ! à espera, vazio por fazer */
.stp50c .c{height:24px}
.stp50c .d50c{position:relative;z-index:1;width:18px;height:18px;padding:0;border-radius:50%;border:2px solid #c1c8c9;background:#fff;color:#fff;font-family:inherit;font-weight:800;font-size:10px;line-height:1;font-style:normal;display:flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:box-shadow .12s,transform .12s,border-color .12s}
.stp50c .d50c.ro{cursor:default}
.stp50c button.d50c:hover{border-color:#2b696e;box-shadow:0 0 0 4px rgba(43,105,110,.13);transform:scale(1.08)}
.stp50c button.d50c:focus-visible{outline:2px solid #2b696e;outline-offset:2px}
.stp50c .c.ok .d50c{background:#2b696e;border-color:#2b696e}
.stp50c .c.no .d50c{background:#c0392b;border-color:#c0392b;font-size:9px}
.stp50c .c.no button.d50c:hover{box-shadow:0 0 0 4px rgba(192,57,43,.14)}
.stp50c .c.w .d50c{background:#fdf1dc;border-color:#d9a54a;color:#8a5a14}

/* Pedidos: quatro passos, coluna mais larga */
.pd47.pd50c .th,.pd47.pd50c .tr{grid-template-columns:40px minmax(0,1fr) 138px 268px 22px}
.pd50c .stp47,.pd50c .stph47{max-width:268px}

/* pedido aberto: uma barra de ícones à esquerda (Resumo · Mensagem · História) e os dados ao lado, no mesmo cartão */
.pi50c{display:grid;grid-template-columns:72px minmax(0,1fr);border:1px solid var(--bd);border-radius:12px;background:#fff;overflow:hidden;min-height:156px;box-shadow:0 1px 2px rgba(19,40,41,.04)}
.pr50c{display:flex;flex-direction:column;gap:2px;padding:6px 5px;background:#f4f5f1;border-right:1px solid var(--bd)}
.pr50c>button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border:0;border-radius:9px;background:transparent;color:var(--mu);font-family:inherit;font-weight:600;font-size:10.5px;line-height:1.1;cursor:pointer}
.pr50c>button svg.i40{width:17px;height:17px}
.pr50c>button:hover{background:#e6ebec;color:var(--ink)}
.pr50c>button.on{background:#fff;color:#2b696e;box-shadow:0 1px 3px rgba(19,40,41,.1)}
.pr50c>button.on::before{content:'';position:absolute;left:-5px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#2b696e}
.pr50c>button em{position:absolute;top:3px;right:9px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#2b696e;color:#fff;font-family:inherit;font-weight:700;font-size:9.5px;line-height:15px;font-style:normal;text-align:center}
.pb50c{min-width:0;padding:9px 14px 10px;display:flex;flex-direction:column}
.pp50c{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.pp50c[hidden]{display:none}
.ph50c{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.ph50c span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--mu)}
.rl50c{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.rl50c li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;font-size:13px;line-height:1.4;color:var(--ink)}
.rl50c li::before{content:none}
.rl50c li b{font-weight:600;color:var(--mu);font-size:12.5px}
.rl50c li b::before{content:'•';margin-right:6px;color:var(--mu)}
.mt50c{font-size:13px;line-height:1.5;color:var(--tx);white-space:pre-wrap;flex:1 1 0;min-height:90px;overflow:auto;padding:8px 11px;border-radius:9px;background:#f4f6f7;border-left:3px solid #c1c8c9}
.hl50c{flex:1 1 0;min-height:90px;overflow:auto}
.hl50c .hv44{max-height:none;padding:0;margin:0}

/* o cartão dos dados ocupa a altura toda, ao lado da coluna das ações (sem branco vazio por baixo) */
.xp .cx47:has(.pi50c){align-items:stretch}
.cx45m:has(>.pi50c)>.pi50c{flex:1}

/* coluna das ações: o estado do pedido lê-se aqui e muda-se nas bolinhas */
.es50c{display:flex;flex-direction:column;gap:1px;padding:3px 3px 2px;font-size:12px;line-height:1.35;color:var(--ink)}
.es50c span{color:var(--mu);font-size:11.5px}
.es50c small{color:var(--mu);font-size:10.5px}

/* janela de confirmação */
.cf50c{width:min(440px,84vw);font-size:13.5px;line-height:1.5;color:var(--tx)}