/* Pedidos dos clientes: caixa de entrada + conversa. */
@keyframes pd-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pd-entra-lado { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes pd-msg { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pd-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .5); } 60% { box-shadow: 0 0 0 7px rgba(255, 90, 31, 0); } }
@keyframes pd-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pd-brilho { 0%, 65% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes pd-voa { 0% { transform: translate(0, 0); } 45% { transform: translate(6px, -6px); opacity: 0; } 55% { transform: translate(-6px, 6px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }

.pd { display: flex; flex-direction: column; gap: 16px; height: calc(100vh - 64px); min-height: 520px; }

/* topo */
.pd-topo { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; animation: pd-entra .4s both; }
.pd-titulo { flex: 1; min-width: 240px; }
.pd-titulo h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.025em; }
.pd-titulo p { margin: 4px 0 0; font-size: 13.5px; opacity: .6; }
.pd-numeros { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-num { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 14px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.pd-num b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pd-num.novo b { color: #ff9a6b; } .pd-num.voce b { color: #fbbf24; } .pd-num.cliente b { color: #60a5fa; }
.pd-quadro { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: inherit;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none; filter: none; transition: background .2s, transform .2s; }
.pd-quadro svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.pd-quadro:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }

/* grade */
.pd-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; animation: pd-entra .45s .05s both; }
.pd-lado, .pd-conversa { min-height: 0; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), #10131a; box-shadow: 0 22px 54px -34px #000, inset 0 1px 0 rgba(255, 255, 255, .05); }
.pd-lado { display: flex; flex-direction: column; padding: 12px; gap: 10px; }

.pd-filtros { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 13px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); }
.pd-filtros-marca { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 122, 61, .3), rgba(255, 90, 31, .14)); border: 1px solid rgba(255, 122, 61, .5); box-shadow: 0 8px 18px -10px rgba(255, 90, 31, .8);
  transform: translateX(calc(100% * var(--pos, 0))); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.pd-filtros button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; opacity: .55; background: none; box-shadow: none; filter: none; transition: opacity .25s; }
.pd-filtros button.ativo { opacity: 1; color: #fff; }
.pd-filtros em { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.pd-filtros em:empty { display: none; }
.pd-busca { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); transition: border-color .2s, box-shadow .25s; }
.pd-busca svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }
.pd-busca input { flex: 1; min-width: 0; height: 100%; border: 0 !important; padding: 0; background: none !important; color: inherit; font: inherit; font-size: 13px; box-shadow: none !important; }
.pd-busca input:focus { outline: none; }
.pd-busca:focus-within { border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }

.pd-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.pd-item { position: relative; display: flex; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 15px; cursor: pointer; text-align: left; font: inherit; color: inherit; filter: none; box-shadow: none;
  border: 1px solid transparent; background: none; animation: pd-entra-lado .35s calc(var(--n, 0) * 30ms) cubic-bezier(.2, .8, .2, 1) both;
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.pd-item:hover { background: rgba(255, 255, 255, .04); transform: translateX(2px); }
.pd-item.ativo { background: linear-gradient(90deg, rgba(255, 90, 31, .14), rgba(255, 90, 31, .03)); border-color: rgba(255, 122, 61, .35); }
.pd-item.ativo::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: #ff7a3d; box-shadow: 0 0 10px #ff7a3d; }
.pd-item-av { position: relative; flex: none; }
.pd-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pd-av img { width: 100%; height: 100%; object-fit: cover; }
.pd-item-tipo { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #111; background: var(--c); box-shadow: 0 0 0 2px #10131a; }
.pd-item-tipo svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pd-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-item-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-item-linha strong { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-item-linha time { flex: none; font-size: 11px; opacity: .45; }
.pd-item-titulo { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-item-previa { flex: 1; min-width: 0; font-size: 12px; opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-nao-lidas { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: #ff5a1f; animation: pd-pulso 2s infinite; }
.pd-urgente { margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 800; color: #fca5a5; background: rgba(248, 113, 113, .15); }
.pd-item.q-voce .pd-item-linha strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #fbbf24; vertical-align: middle; box-shadow: 0 0 8px #fbbf24; }
.pd-item.q-fechado { opacity: .6; }
.pd-lista-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; }
.pd-lista-vazia svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .35; margin-bottom: 4px; }
.pd-lista-vazia small { font-size: 12px; opacity: .5; }

/* conversa vazia */
.pd-conversa { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.pd-vazio { margin: auto; max-width: 440px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pd-entra .45s both; }
.pd-vazio-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; color: #ff9a6b; margin-bottom: 6px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 122, 61, .3), rgba(255, 90, 31, .08)); border: 1px solid rgba(255, 122, 61, .35); box-shadow: 0 20px 40px -20px #ff5a1f; animation: pd-flutua 4s ease-in-out infinite; }
.pd-vazio-ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pd-vazio strong { font-size: 18px; font-weight: 800; }
.pd-vazio p { margin: 0; font-size: 13.5px; line-height: 1.6; opacity: .6; }
.pd-vazio-dicas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.pd-vazio-dicas span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.pd-vazio-dicas svg { width: 14px; height: 14px; fill: none; stroke: #ff9a6b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* pedido aberto */
.pd-aberto { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: pd-entra .35s both; }
.pd-cab { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(80% 160% at 0% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%); }
.pd-voltar { display: none; width: 34px; height: 34px; padding: 0; place-items: center; border-radius: 10px; cursor: pointer; color: inherit; background: rgba(255, 255, 255, .06); border: 0; box-shadow: none; filter: none; }
.pd-voltar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pd-av.grande { width: 50px; height: 50px; font-size: 15px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent); }
.pd-cab-texto { flex: 1; min-width: 0; }
.pd-cab-texto small { font-size: 12px; opacity: .55; }
.pd-cab-texto h3 { margin: 1px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cab-etqs { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-etq { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .06); }
.pd-etq svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-etq.tipo { color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pd-etq.urgente { color: #fca5a5; background: rgba(248, 113, 113, .14); }
.pd-etq.extra { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.pd-dono { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 10px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); flex: none; }
.pd-dono svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }
.pd-dono .sel { min-width: 0; }
.pd-dono select, .pd-dono .sel-botao { height: 30px !important; border: 0 !important; background: none !important; font-size: 12.5px !important; font-weight: 700 !important; box-shadow: none !important; }

/* andamento */
.pd-fluxo { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 14px 18px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pd-fluxo-trilha { position: absolute; left: calc(18px + 10%); right: calc(18px + 10%); top: 27px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.pd-fluxo-trilha i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #ff7a3d); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.pd-fluxo button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; color: inherit; background: none; box-shadow: none; filter: none; opacity: .6; transition: opacity .2s, transform .2s; }
.pd-fluxo button:hover { opacity: 1; transform: translateY(-1px); }
.pd-fluxo-bola { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #161b24; border: 2px solid rgba(255, 255, 255, .14); transition: background .3s, border-color .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pd-fluxo-bola em { font-style: normal; font-size: 11px; font-weight: 800; }
.pd-fluxo-bola svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pd-fluxo button.feito { opacity: .85; }
.pd-fluxo button.feito .pd-fluxo-bola { color: #052e1c; background: #34d399; border-color: #34d399; }
.pd-fluxo button.atual { opacity: 1; color: #ffb38a; }
.pd-fluxo button.atual .pd-fluxo-bola { color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f); border-color: #ff7a3d; transform: scale(1.12); animation: pd-pulso 2.2s infinite; }
.pd-cancelado { position: absolute; right: 18px; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fca5a5; background: rgba(248, 113, 113, .14); }

/* fio da conversa */
.pd-fio { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent;
  background-image: radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 18px 18px; }
.pd-pedido { align-self: stretch; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, .06));
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 9%, transparent), rgba(255, 255, 255, .015)); animation: pd-msg .4s both; }
.pd-pedido header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.pd-pedido header svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-pedido header time { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .45); }
.pd-pedido p { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.pd-anexos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-anexo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: inherit; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: transform .2s, border-color .2s; }
.pd-anexo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.pd-anexo.img { padding: 0; width: 84px; height: 84px; overflow: hidden; }
.pd-anexo.img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pd-anexo:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .2); color: inherit; }
.pd-anexo.img:hover img { transform: scale(1.06); }

.pd-dia-sep { display: flex; justify-content: center; margin: 6px 0; }
.pd-dia-sep span { padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .05); }
.pd-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; animation: pd-msg .3s cubic-bezier(.2, .8, .2, 1) both; }
.pd-msg.equipe { align-self: flex-end; flex-direction: row-reverse; }
.pd-msg-av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3b4252, #1f2430); }
.pd-bolha { padding: 9px 13px 7px; border-radius: 16px; transition: transform .2s; }
.pd-bolha b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; opacity: .75; }
.pd-bolha p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pd-bolha small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .55; text-align: right; }
.pd-msg.cliente .pd-bolha { border-bottom-left-radius: 6px; background: linear-gradient(180deg, rgba(34, 42, 55, .96), rgba(26, 33, 44, .96)); border: 1px solid rgba(255, 255, 255, .07); }
.pd-msg.equipe .pd-bolha { border-bottom-right-radius: 6px; color: #fff7f2; border: 1px solid rgba(255, 168, 120, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%), linear-gradient(155deg, #f2692f 0%, #de4d18 48%, #b8380f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 26px -16px rgba(230, 80, 25, .75); }
.pd-msg:hover .pd-bolha { transform: translateY(-1px); }
.pd-msg.enviando { opacity: .65; }
.pd-msg.falhou .pd-bolha { border-color: #f87171; }
.pd-msg.falhou small::after { content: " · não enviou"; color: #fca5a5; }

/* escrever */
.pd-escrever { padding: 10px 14px 12px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .18); }
.pd-rapidas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.pd-rapidas::-webkit-scrollbar { display: none; }
.pd-rapidas button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .8); filter: none; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: background .2s, border-color .2s, transform .15s, color .2s; }
.pd-rapidas button:hover { color: #fff; border-color: rgba(255, 122, 61, .5); background: rgba(255, 90, 31, .1); transform: translateY(-1px); }
.pd-campo { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); transition: border-color .25s, box-shadow .3s; }
.pd-campo:focus-within { border-color: rgba(255, 90, 31, .55); box-shadow: 0 0 0 4px rgba(255, 90, 31, .1); }
.pd-campo textarea { flex: 1; min-height: 38px; max-height: 160px; padding: 9px 0 !important; border: 0 !important; background: none !important; color: inherit; font: inherit; font-size: 14px; line-height: 1.45; resize: none; box-shadow: none !important; }
.pd-campo textarea:focus { outline: none; }
.pd-enviar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border-radius: 12px; cursor: pointer; color: #fff; filter: none;
  border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f); box-shadow: 0 10px 22px -10px #ff5a1f; transition: transform .2s, opacity .2s; }
.pd-enviar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-enviar:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); }
.pd-enviar:hover:not(:disabled) svg { animation: pd-voa .6s ease; }
.pd-enviar:active { transform: scale(.92); }
.pd-escrever:has(textarea:placeholder-shown) .pd-enviar { opacity: .55; box-shadow: none; }
.pd-dica { display: block; margin-top: 6px; font-size: 11px; opacity: .4; }
.pd-dica kbd { padding: 0 5px; border-radius: 5px; font-size: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.pd-fechado { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 13px; color: #6ee7b7; background: rgba(52, 211, 153, .05); }
.pd-fechado svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pd-fechado button { margin-left: 6px; height: 30px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: inherit; border: 1px solid rgba(110, 231, 183, .35); background: none; box-shadow: none; filter: none; }

@media (max-width: 960px) {
  .pd { height: auto; }
  .pd-grade { grid-template-columns: 1fr; }
  .pd-grade.com-conversa .pd-lado { display: none; }
  .pd-grade:not(.com-conversa) .pd-conversa { display: none; }
  .pd-conversa { min-height: 70vh; }
  .pd-voltar { display: grid; }
  .pd-fluxo button span:last-child { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pd *, .pd { animation: none !important; } }

/* =========================================================
   Pedidos v2: grupos, proximo passo, extra e animacoes
   ========================================================= */
@keyframes pd-troca { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pd-grupo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pd-aura { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes pd-seta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes pd-gira { to { transform: rotate(360deg); } }

/* 4 filtros */
.pd-filtros { grid-template-columns: repeat(4, 1fr); }
.pd-filtros-marca { width: calc((100% - 8px) / 4); }
.pd-filtros button { font-size: 12px; padding: 0 4px; }

/* grupos da lista */
.pd-grupo { display: flex; flex-direction: column; gap: 3px; animation: pd-grupo .35s both; }
.pd-grupo + .pd-grupo { margin-top: 10px; }
.pd-grupo h4 { display: flex; align-items: center; gap: 8px; margin: 4px 6px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.pd-grupo h4 i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 8px var(--g); }
.pd-grupo h4 em { margin-left: auto; font-style: normal; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.pd-item { overflow: hidden; isolation: isolate; }
.pd-item::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%); }
.pd-item:hover::after, .pd-item.ativo::after { opacity: 1; }
.pd-item .pd-av { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.pd-item:hover .pd-av { transform: scale(1.06); }
.pd-item.ativo .pd-av { box-shadow: 0 0 0 2px rgba(255, 122, 61, .6), 0 0 16px -2px rgba(255, 90, 31, .7); }
.pd-item-sit { flex: none; font-size: 10.5px; font-weight: 700; opacity: .5; }
.pd-item.cancelado .pd-item-titulo { text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .6); }

/* pedido aberto: entra deslizando quando troca */
.pd-aberto.trocou { animation: pd-troca .38s cubic-bezier(.2, .8, .2, 1) both; }
.pd-cab { position: relative; overflow: hidden; }
.pd-cab::after { content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%); animation: pd-aura 5s ease-in-out infinite; }

/* proximo passo */
.pd-proximo { display: flex; align-items: center; gap: 12px; margin: 12px 18px 0; padding: 12px 12px 12px 14px; border-radius: 16px;
  border: 1px solid rgba(255, 122, 61, .3); background: linear-gradient(90deg, rgba(255, 90, 31, .12), rgba(255, 90, 31, .02)); animation: pd-msg .35s .05s both; }
.pd-proximo-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; color: #ff9a6b; background: rgba(255, 90, 31, .16); }
.pd-proximo-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: pd-seta 1.6s ease-in-out infinite; }
.pd-proximo > div:not(.pd-mais) { flex: 1; min-width: 0; }
.pd-proximo small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff9a6b; }
.pd-proximo strong { display: block; margin-top: 1px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.pd-proximo-sim { position: relative; overflow: hidden; flex: none; height: 40px; padding: 0 18px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; color: #fff; filter: none;
  border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #ef4a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f; transition: transform .2s, box-shadow .2s; }
.pd-proximo-sim::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: pd-brilho 4.5s ease-in-out infinite; }
.pd-proximo-sim:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 32px -12px #ff5a1f; }
.pd-proximo-sim:active { transform: scale(.96); }
.pd-proximo-sim.indo { pointer-events: none; color: transparent; }
.pd-proximo-sim.indo::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: pd-gira .7s linear infinite; }
.pd-mais { position: relative; flex: none; }
.pd-mais-botao { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer; color: inherit; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none; filter: none; transition: background .2s; }
.pd-mais-botao svg { width: 16px; height: 16px; fill: currentColor; }
.pd-mais-botao:hover { background: rgba(255, 255, 255, .09); }
.pd-mais-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 230px; padding: 5px; border-radius: 14px; display: grid; gap: 2px;
  background: #141821; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px -20px #000; animation: pd-msg .2s both; }
.pd-mais-menu button { padding: 10px 12px; border: 0; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: inherit; background: none; box-shadow: none; filter: none; }
.pd-mais-menu button:hover { background: rgba(255, 255, 255, .06); }
.pd-mais-menu button.perigo { color: #fca5a5; }
.pd-mais-menu button.perigo:hover { background: rgba(248, 113, 113, .1); }

/* decisao de extra */
.pd-extra { margin: 12px 18px 0; padding: 14px; border-radius: 16px; border: 1px solid rgba(251, 191, 36, .3); background: linear-gradient(165deg, rgba(251, 191, 36, .08), rgba(251, 191, 36, .02)); animation: pd-msg .35s .08s both; }
.pd-extra header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pd-extra header > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #fbbf24; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-extra header strong { display: block; font-size: 13.5px; }
.pd-extra header small { font-size: 12px; opacity: .6; }
.pd-extra-opcoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pd-extra-opcoes button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: inherit; filter: none; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); transition: transform .2s, border-color .2s, background .2s; }
.pd-extra-opcoes button > svg { width: 18px; height: 18px; fill: none; stroke: #fbbf24; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-extra-opcoes b { display: block; font-size: 12.5px; }
.pd-extra-opcoes small { display: block; font-size: 11px; opacity: .55; }
.pd-extra-opcoes button:hover { transform: translateY(-2px); border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); }
.pd-extra-opcoes button.perigo > svg { stroke: #f87171; }
.pd-extra-opcoes button.perigo:hover { border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .08); }
.pd-extra-valor { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, .4); background: rgba(0, 0, 0, .2); animation: pd-msg .25s both; }
.pd-extra-valor span { font-weight: 800; opacity: .6; }
.pd-extra-valor input { flex: 1; min-width: 0; height: 34px; border: 0 !important; background: none !important; color: inherit; font: inherit; font-weight: 800; box-shadow: none !important; }
.pd-extra-valor input:focus { outline: none; }
.pd-extra-valor button { height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; color: #1a1206; border: 0; background: #fbbf24; box-shadow: none; filter: none; }

/* cancelado em vermelho */
.pd-fechado.cancelado { color: #fca5a5; background: rgba(248, 113, 113, .06); }
.pd-fechado.cancelado button { border-color: rgba(252, 165, 165, .35); }
.pd-cancelado { top: 6px; }

/* passos do andamento: mais vivos */
.pd-fluxo button .pd-fluxo-bola { box-shadow: 0 0 0 0 transparent; }
.pd-fluxo button:hover .pd-fluxo-bola { transform: scale(1.1); border-color: rgba(255, 122, 61, .6); }
.pd-fluxo button.atual:hover .pd-fluxo-bola { transform: scale(1.16); }

@media (max-width: 960px) { .pd-extra-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-proximo { flex-wrap: wrap; } .pd-proximo-sim { flex: 1; } }
/* atualizacao sozinha: o que muda entra sem reanimar a tela */
.pd.pd-quieto .pd-item, .pd.pd-quieto .pd-grupo, .pd.pd-quieto .pd-aberto, .pd.pd-quieto .pd-msg, .pd.pd-quieto .pd-pedido,
.pd.pd-quieto .pd-proximo, .pd.pd-quieto .pd-extra { animation: none !important; }

/* ---- o meio da janela rola como um bloco so (nada fica espremido) ---- */
.pd-aberto { min-height: 0; }
.pd-rolagem { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.pd-rolagem > * { flex-shrink: 0; }
.pd-rolagem .pd-fio { flex: 1 0 auto; min-height: 160px; overflow: visible; }
.pd-cab { flex-shrink: 0; }
.pd-cab-texto small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-escrever, .pd-fechado { flex-shrink: 0; }
.pd-rapidas { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 30px; }

/* etapa vista no andamento */
.pd-fluxo button.vista span:last-child { color: #fff; }
.pd-fluxo button.vista .pd-fluxo-bola { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.pd-fluxo button.vista::after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px; background: #ff7a3d; box-shadow: 0 0 10px #ff7a3d; }

/* detalhe da etapa */
@keyframes pd-etapa { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pd-etapa { margin: 12px 18px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.pd-etapa.trocou { animation: pd-etapa .3s cubic-bezier(.2, .8, .2, 1) both; }
.pd-etapa-cab { display: flex; align-items: center; gap: 12px; }
.pd-etapa-num { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 800; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .14); }
.pd-etapa-cab.feita .pd-etapa-num { color: #052e1c; background: #34d399; border-color: #34d399; }
.pd-etapa-cab.agora .pd-etapa-num { color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f); border-color: #ff7a3d; animation: pd-pulso 2.2s infinite; }
.pd-etapa-cab > div { flex: 1; min-width: 0; }
.pd-etapa-cab small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.pd-etapa-cab.agora small { color: #ff9a6b; opacity: 1; }
.pd-etapa-cab.feita small { color: #6ee7b7; opacity: 1; }
.pd-etapa-cab strong { display: block; font-size: 15px; font-weight: 800; }
.pd-etapa-mover { flex: none; height: 34px; padding: 0 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: inherit; filter: none; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); transition: background .2s, border-color .2s; }
.pd-etapa-mover:hover { background: rgba(255, 90, 31, .12); border-color: rgba(255, 122, 61, .45); }
.pd-etapa-texto { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.pd-etapa-info { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.pd-etapa-info b { color: #fff; }

/* producao do conteudo */
.pd-prod { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(167, 139, 250, .22); }
.pd-prod.vazia { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .6); border-style: dashed; }
.pd-prod.vazia svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #c4b5fd; stroke-width: 2; stroke-linecap: round; }
.pd-prod-topo { display: flex; gap: 12px; align-items: center; }
.pd-prod-arte { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: inherit; }
.pd-prod-arte img, .pd-prod-arte video { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pd-prod-arte:hover img { transform: scale(1.08); }
.pd-prod-arte em { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, .6); }
.pd-prod-arte.sem { display: flex; flex-direction: column; gap: 2px; }
.pd-prod-arte.sem svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .45; }
.pd-prod-arte.sem small { font-size: 9.5px; opacity: .5; }
.pd-prod-info { flex: 1; min-width: 0; }
.pd-prod-info small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.pd-prod-info strong { display: block; margin: 1px 0 5px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-prod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.pd-prod-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pd-prod-meta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pd-prod-estado { padding: 2px 8px; border-radius: 999px; font-size: 11px; color: #ede9fe; background: rgba(167, 139, 250, .2); }
.pd-prod-trilha { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin: 14px 0 2px; padding: 0; list-style: none; }
.pd-prod-trilha::before, .pd-prod-trilha::after { content: ""; position: absolute; top: 5px; left: 7%; right: 7%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.pd-prod-trilha::after { right: auto; width: calc(86% * var(--prog, 0)); background: linear-gradient(90deg, #8b5cf6, #c4b5fd); transition: width .6s; }
.pd-prod-trilha li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pd-prod-trilha li i { width: 12px; height: 12px; border-radius: 50%; background: #161b24; border: 2px solid rgba(255, 255, 255, .18); }
.pd-prod-trilha li span { font-size: 10px; font-weight: 700; line-height: 1.2; opacity: .45; }
.pd-prod-trilha li.feito i { background: #a78bfa; border-color: #a78bfa; }
.pd-prod-trilha li.feito span { opacity: .75; }
.pd-prod-trilha li.agora i { background: #fff; border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, .25), 0 0 12px #a78bfa; animation: pd-pulso 2s infinite; }
.pd-prod-trilha li.agora span { opacity: 1; color: #ede9fe; }
.pd-prod-falta { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 12px; color: #fbbf24; }
.pd-prod-falta svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 700px) { .pd-prod-trilha li span { font-size: 8.5px; } .pd-etapa-cab { flex-wrap: wrap; } }

/* ---- proposta de valor (etapa Em analise) ---- */
.pd-prop { margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid rgba(74, 222, 128, .22); background: linear-gradient(165deg, rgba(74, 222, 128, .07), rgba(74, 222, 128, .01)); }
.pd-prop header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pd-prop header > svg { width: 20px; height: 20px; flex: none; padding: 7px; box-sizing: content-box; border-radius: 11px; fill: none; stroke: #4ade80; stroke-width: 2; stroke-linecap: round; background: rgba(74, 222, 128, .12); }
.pd-prop header strong { display: block; font-size: 14px; }
.pd-prop header small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; opacity: .6; }
.pd-prop-atual { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); }
.pd-prop-valor { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #4ade80; font-variant-numeric: tabular-nums; }
.pd-prop-atual b { display: block; font-size: 12.5px; }
.pd-prop-atual small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .7; }
.pd-prop-atual small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pd-prop-atual.espera small { color: #fbbf24; opacity: 1; } .pd-prop-atual.espera small::before { animation: pd-pulso 1.8s infinite; }
.pd-prop-atual.ok small { color: #4ade80; opacity: 1; }
.pd-prop-atual.nao small { color: #f87171; opacity: 1; } .pd-prop-atual.nao .pd-prop-valor { color: #f87171; text-decoration: line-through; }
.pd-prop-form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.pd-prop-reais { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(74, 222, 128, .35); background: rgba(0, 0, 0, .22); transition: box-shadow .25s, border-color .25s; }
.pd-prop-reais span { font-weight: 800; opacity: .6; }
.pd-prop-reais input { flex: 1; min-width: 0; height: 100%; border: 0 !important; padding: 0; background: none !important; color: #fff; font: inherit; font-size: 18px; font-weight: 800; box-shadow: none !important; font-variant-numeric: tabular-nums; }
.pd-prop-reais input:focus { outline: none; }
.pd-prop-reais:focus-within { border-color: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .14); }
.pd-prop-form textarea { min-height: 46px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; font-size: 13px; line-height: 1.45; resize: vertical; box-shadow: none; }
.pd-prop-form textarea:focus { outline: none; border-color: rgba(74, 222, 128, .45); }
.pd-prop-enviar { grid-column: 1 / -1; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: #052e1c; filter: none; border: 1px solid #4ade80; background: linear-gradient(180deg, #6ee7a8, #22c55e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 26px -12px #22c55e; transition: transform .2s, box-shadow .2s; }
.pd-prop-enviar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.pd-prop-enviar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 32px -12px #22c55e; }
.pd-prop-enviar:hover:not(:disabled) svg { transform: translate(3px, -3px); }
.pd-prop-enviar.indo { color: transparent; pointer-events: none; }
.pd-prop-enviar.indo::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(5, 46, 28, .3); border-top-color: #052e1c; animation: pd-gira .7s linear infinite; }
.pd-prop-dica { grid-column: 1 / -1; font-size: 11.5px; opacity: .55; }
.pd-prop-dica b { color: #fff; }
.pd-proximo-espera { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fbbf24; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .3); }
.pd-proximo-espera::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; animation: pd-pulso 1.8s infinite; }
@media (max-width: 700px) { .pd-prop-form { grid-template-columns: 1fr; } }

/* ---- Valor do pedido: isento ou cobrar a parte ---- */
@keyframes pd-valor { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pd-valor-caixa { margin: 12px 18px 0; }
.pd-valor-caixa.trocou .pd-valor { animation: pd-valor .3s cubic-bezier(.2, .8, .2, 1) both; }
.pd-valor { padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); animation: pd-valor .35s .06s both; }
.pd-valor header small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff9a6b; }
.pd-valor header strong { display: block; margin: 2px 0 12px; font-size: 15px; font-weight: 800; }
.pd-valor-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-valor-op { --t: #4ade80; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 14px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; filter: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .025);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, background .25s, box-shadow .25s; }
.pd-valor-op.cobrar { --t: #fbbf24; }
.pd-valor-op > span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s; }
.pd-valor-op > span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-valor-op b { font-size: 14px; font-weight: 800; }
.pd-valor-op small { font-size: 11.5px; line-height: 1.35; opacity: .6; }
.pd-valor-op:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--t) 50%, transparent); background: color-mix(in srgb, var(--t) 7%, transparent); box-shadow: 0 14px 28px -18px var(--t); }
.pd-valor-op:hover > span { transform: rotate(-8deg) scale(1.08); }
.pd-valor-op.ativo { border-color: var(--t); background: color-mix(in srgb, var(--t) 10%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 14%, transparent); }
.pd-valor-op.ativo > span { color: #111; background: var(--t); }
.pd-valor-op.indo { pointer-events: none; opacity: .6; }
.pd-valor-form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); animation: pd-valor .3s both; }
.pd-valor-form .pd-prop-reais { border-color: rgba(251, 191, 36, .4); }
.pd-valor-form .pd-prop-reais:focus-within { border-color: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .14); }
.pd-valor-cancelar { margin-top: 10px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: inherit; border: 1px solid rgba(255, 255, 255, .1); background: none; box-shadow: none; filter: none; }

.pd-valor.feito { display: flex; align-items: center; gap: 12px; padding: 12px 14px; --t: #fbbf24; border-color: color-mix(in srgb, var(--t) 30%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--t) 10%, transparent), rgba(255, 255, 255, .01)); }
.pd-valor.feito.isento, .pd-valor.feito.ok { --t: #4ade80; }
.pd-valor.feito.nao { --t: #f87171; }
.pd-valor-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: #111; background: var(--t); box-shadow: 0 8px 18px -10px var(--t); }
.pd-valor-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pd-valor-texto { flex: 1; min-width: 0; }
.pd-valor-texto small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.pd-valor-texto strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--t); }
.pd-valor-texto span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .75; }
.pd-valor.feito.espera .pd-valor-texto span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; animation: pd-pulso 1.8s infinite; }
.pd-valor-mudar { flex: none; height: 34px; padding: 0 14px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); box-shadow: none; filter: none; transition: background .2s; }
.pd-valor-mudar:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 700px) { .pd-valor-opcoes, .pd-valor-form { grid-template-columns: 1fr; } }
.pd-etq.isento { color: #4ade80; background: rgba(74, 222, 128, .12); }

/* ---- iniciar producao a partir do pedido ---- */
.pd-prod-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pd-prod-pe .pd-prod-falta { margin: 0; }
.pd-prod-iniciar, .pd-prod-abrir { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer; flex: none;
  font: inherit; font-size: 13.5px; font-weight: 800; color: #fff; filter: none; transition: transform .2s, box-shadow .2s; }
.pd-prod-iniciar { border: 1px solid #a78bfa; background: linear-gradient(180deg, #a78bfa, #7c3aed); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 26px -12px #8b5cf6; }
.pd-prod-iniciar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pd-prod-iniciar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: pd-brilho 4.5s ease-in-out infinite; }
.pd-prod-iniciar:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 32px -12px #8b5cf6; }
.pd-prod-iniciar:hover svg { transform: rotate(-15deg) scale(1.1); }
.pd-prod-abrir { border: 1px solid rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .12); box-shadow: none; }
.pd-prod-abrir:hover { transform: translateY(-2px); background: rgba(167, 139, 250, .2); }
.pd-prod-iniciar.indo, .pd-prod-abrir.indo { pointer-events: none; opacity: .7; }

/* ---- status da aprovacao do conteudo ---- */
.pd-aprov { --t: #94a3b8; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--t) 35%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--t) 12%, transparent), rgba(255, 255, 255, .01)); animation: pd-valor .3s both; }
.pd-aprov.espera { --t: #fbbf24; } .pd-aprov.ok { --t: #4ade80; } .pd-aprov.nao { --t: #f87171; }
.pd-aprov-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: #111; background: var(--t); box-shadow: 0 8px 18px -10px var(--t); }
.pd-aprov.espera .pd-aprov-ic { animation: pd-pulso 1.8s infinite; }
.pd-aprov-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.pd-aprov > div { flex: 1; min-width: 0; }
.pd-aprov strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--t); }
.pd-aprov small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; opacity: .7; }
.pd-aprov .pd-prod-arte { width: 52px; height: 52px; }

/* ---- producao pronta ---- */
.pd-prod-estado.pronta { color: #052e1c; background: #4ade80; }
.pd-prod-botoes { display: flex; gap: 8px; }
.pd-prod-enviar { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 800; color: #052e1c; filter: none; border: 1px solid #4ade80; background: linear-gradient(180deg, #6ee7a8, #22c55e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 26px -12px #22c55e; transition: transform .2s, box-shadow .2s; }
.pd-prod-enviar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.pd-prod-enviar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); animation: pd-brilho 4.5s ease-in-out infinite; }
.pd-prod-enviar:hover:not(:disabled) { transform: translateY(-2px); }
.pd-prod-enviar:hover:not(:disabled) svg { transform: translate(3px, -3px); }
.pd-prod-enviar.indo, .pd-proximo-sim.indo { pointer-events: none; opacity: .7; }
.pd-prod:has(.pd-prod-estado.pronta) { border-color: rgba(74, 222, 128, .3); }
.pd-prod:has(.pd-prod-estado.pronta) .pd-prod-info small { color: #4ade80; }

/* =========================================================
   Linha do tempo do pedido (andamento) v2
   ========================================================= */
@property --pd-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pdf-enche { from { transform: scaleX(0); } }
@keyframes pdf-corre { from { background-position: 0 0; } to { background-position: 60px 0; } }
@keyframes pdf-gira { to { --pd-ang: 360deg; } }
@keyframes pdf-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pdf-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pdf-onda { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 43, .55); } 100% { box-shadow: 0 0 0 14px rgba(255, 106, 43, 0); } }

.pd-fluxo { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 18px 18px 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); }
/* trilha: base, preenchimento verde→laranja e um brilho correndo */
.pd-fluxo-trilha { position: absolute; left: calc(18px + 10%); right: calc(18px + 10%); top: 37px !important; height: 4px !important; border-radius: 4px; background: rgba(255, 255, 255, .07) !important; overflow: hidden; }
.pd-fluxo-trilha i { position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--prog, 0)) !important; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, #34d399, #a3e635 45%, #ff7a3d) !important; box-shadow: 0 0 12px rgba(52, 211, 153, .5);
  animation: pdf-enche .9s .15s cubic-bezier(.2, .8, .2, 1) both; transition: width .6s cubic-bezier(.2, .8, .2, 1) !important; }
.pd-fluxo-trilha i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .45) 26px, transparent 30px 60px); animation: pdf-corre 1.4s linear infinite; mix-blend-mode: overlay; }

.pd-fluxo button { gap: 7px !important; opacity: 1 !important; animation: pdf-entra .4s calc(.08s + var(--i, 0) * 70ms) cubic-bezier(.2, .8, .2, 1) both; }
.pd-fluxo button:hover { transform: translateY(-2px) !important; }
.pd-fluxo-bola { position: relative; isolation: isolate; width: 40px !important; height: 40px !important; color: rgba(255, 255, 255, .45);
  background: #141922 !important; border: 2px solid rgba(255, 255, 255, .12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), border-color .3s, background .3s, color .3s !important; }
.pd-fluxo-bola svg { width: 17px !important; height: 17px !important; fill: none; stroke: currentColor; stroke-width: 2 !important; stroke-linecap: round; stroke-linejoin: round; }
.pd-fluxo-anel { display: none; }
.pd-fluxo-nome { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .5); transition: color .3s; }
.pd-fluxo-sub { min-height: 14px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: 0; }

/* feito: verde, com o check entrando */
.pd-fluxo button.feito .pd-fluxo-bola { color: #052e1c; background: linear-gradient(160deg, #6ee7a8, #22c55e) !important; border-color: #34d399 !important; box-shadow: 0 8px 18px -10px #22c55e, inset 0 1px 0 rgba(255, 255, 255, .4); }
.pd-fluxo button.feito .pd-fluxo-bola svg { stroke-width: 3 !important; animation: pdf-pop .45s calc(.3s + var(--i, 0) * 90ms) cubic-bezier(.3, 1.5, .5, 1) both; }
.pd-fluxo button.feito .pd-fluxo-nome { color: rgba(255, 255, 255, .8); }
.pd-fluxo button.feito .pd-fluxo-sub { opacity: .7; color: #6ee7b7; }

/* atual: laranja, anel girando e onda saindo */
.pd-fluxo button.atual .pd-fluxo-bola { color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f) !important; border-color: #ff7a3d !important; transform: scale(1.12);
  animation: pdf-onda 1.8s ease-out infinite !important; }
.pd-fluxo button.atual .pd-fluxo-anel { display: block; position: absolute; inset: -7px; z-index: -1; border-radius: 50%;
  background: conic-gradient(from var(--pd-ang), transparent 0 55%, #ff7a3d 75%, #ffd3b8 85%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px); animation: pdf-gira 2.4s linear infinite; }
.pd-fluxo button.atual .pd-fluxo-nome { color: #ffb38a; }
.pd-fluxo button.atual .pd-fluxo-sub { opacity: 1; color: #ff9a6b; }

/* etapa sendo vista: um traco de luz embaixo */
.pd-fluxo button.vista::after { bottom: -6px !important; width: 28px !important; margin-left: -14px !important; transition: width .3s; }
.pd-fluxo button:not(.feito):not(.atual):hover .pd-fluxo-bola { border-color: rgba(255, 122, 61, .55) !important; color: #ffb38a; }

/* cancelado: tudo apagado e a trilha vermelha */
.pd-fluxo.cancelado .pd-fluxo-trilha i { background: linear-gradient(90deg, #f87171, #b91c1c) !important; box-shadow: none; }
.pd-fluxo.cancelado button { filter: grayscale(.8); opacity: .6 !important; }
@media (prefers-reduced-motion: reduce) { .pd-fluxo *, .pd-fluxo button { animation: none !important; } }
@media (max-width: 700px) { .pd-fluxo-nome { font-size: 10.5px; } .pd-fluxo-sub { display: none; } .pd-fluxo-bola { width: 34px !important; height: 34px !important; } .pd-fluxo-trilha { top: 34px !important; } }
/* espaco para o anel e a onda da etapa atual nao serem cortados no topo */
.pd-fluxo { padding: 28px 18px 16px !important; }
.pd-fluxo-trilha { top: 47px !important; }
.pd-fluxo button.atual .pd-fluxo-bola { transform: scale(1.08); }
@media (max-width: 700px) { .pd-fluxo-trilha { top: 44px !important; } }
/* hover sem crescer para fora da area: so brilho (nada e cortado pela rolagem) */
.pd-fluxo { padding-left: 24px !important; padding-right: 24px !important; }
.pd-fluxo-trilha { left: calc(24px + 10%) !important; right: calc(24px + 10%) !important; }
.pd-fluxo button:hover { transform: none !important; }
.pd-fluxo button:hover .pd-fluxo-bola { transform: none !important; filter: brightness(1.15); }
.pd-fluxo button.atual:hover .pd-fluxo-bola { transform: scale(1.08) !important; }
.pd-fluxo button.feito .pd-fluxo-bola { box-shadow: 0 4px 10px -6px #22c55e, inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
.pd-fluxo button:hover .pd-fluxo-nome { color: #fff; }

/* anel da etapa atual: circulo inteiro suave + arco de luz girando (antes parecia cortado) */
.pd-fluxo button.atual .pd-fluxo-anel {
  background: conic-gradient(from var(--pd-ang), rgba(255, 122, 61, .25) 0 60%, #ff7a3d 78%, #ffd3b8 86%, rgba(255, 122, 61, .25) 100%) !important;
  inset: -6px !important; -webkit-mask: radial-gradient(circle, transparent 22.5px, #000 23.5px) !important; mask: radial-gradient(circle, transparent 22.5px, #000 23.5px) !important; }
.pd-fluxo button.atual .pd-fluxo-bola { animation: none !important; }
.pd-fluxo-sub { white-space: nowrap; }

/* publicacao na linha do tempo: agendado (azul, com contagem) e publicado (verde) */
.pd-fluxo button.agendado .pd-fluxo-bola { background: linear-gradient(160deg, #60a5fa, #2563eb) !important; border-color: #60a5fa !important; }
.pd-fluxo button.agendado .pd-fluxo-anel { background: conic-gradient(from var(--pd-ang), rgba(96, 165, 250, .25) 0 60%, #60a5fa 78%, #dbeafe 86%, rgba(96, 165, 250, .25) 100%) !important; }
.pd-fluxo button.agendado .pd-fluxo-nome, .pd-fluxo button.agendado .pd-fluxo-sub { color: #93c5fd !important; }
.pd-fluxo button.agendado .pd-fluxo-sub { text-transform: none; letter-spacing: 0; font-size: 11px; }
.pd-fluxo button.publicado .pd-fluxo-sub { color: #4ade80 !important; opacity: 1; }

/* cartao da etapa Publicacao */
@keyframes pd-pub-tic { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pd-pub { --t: #fbbf24; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--t) 35%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--t) 12%, transparent), rgba(255, 255, 255, .01)); animation: pd-valor .3s both; }
.pd-pub.ok { --t: #4ade80; } .pd-pub.agendado { --t: #60a5fa; }
.pd-pub-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; color: #fff; background: var(--t); box-shadow: 0 10px 22px -10px var(--t); }
.pd-pub.ok .pd-pub-ic { color: #052e1c; }
.pd-pub-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pd-pub > div { flex: 1; min-width: 0; }
.pd-pub small { display: block; font-size: 11.5px; font-weight: 700; opacity: .7; text-transform: capitalize; }
.pd-pub strong { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; color: var(--t); }
.pd-pub-conta span { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.pd-pub-conta b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; animation: pd-pub-tic 2s ease-in-out infinite; }
.pd-pub-link { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: #052e1c; background: #4ade80; text-decoration: none; transition: transform .2s; }
.pd-pub-link:hover { transform: translateY(-2px); color: #052e1c; }

/* =========================================================
   Pedido aberto: acabamento minimalista (SaaS)
   Menos brilho, mais respiro, hierarquia clara. Movimento so
   onde informa: a etapa atual e o que acabou de mudar.
   ========================================================= */
@keyframes pdm-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pdm-linha { from { transform: scaleX(0); } }

/* ---- linha do tempo ---- */
.pd-fluxo { padding: 26px 24px 18px !important; background: none !important; border-bottom: 1px solid rgba(255, 255, 255, .055) !important; }
.pd-fluxo-trilha { top: 43px !important; height: 2px !important; background: rgba(255, 255, 255, .08) !important; }
.pd-fluxo-trilha i { background: linear-gradient(90deg, #34d399, #34d399 70%, #ff7a3d) !important; box-shadow: none !important; }
.pd-fluxo-trilha i::after { opacity: .5; }
.pd-fluxo.completo .pd-fluxo-trilha i { background: #34d399 !important; }
.pd-fluxo.completo .pd-fluxo-trilha i::after { display: none; }
.pd-fluxo-bola { width: 34px !important; height: 34px !important; border-width: 1.5px !important; background: #12161e !important; box-shadow: none !important; }
.pd-fluxo-bola svg { width: 15px !important; height: 15px !important; }
.pd-fluxo button.feito .pd-fluxo-bola { background: #34d399 !important; border-color: #34d399 !important; box-shadow: 0 0 0 4px rgba(52, 211, 153, .1) !important; }
.pd-fluxo button.atual .pd-fluxo-bola { transform: none !important; background: #ff6a2b !important; border-color: #ff7a3d !important; box-shadow: 0 0 0 4px rgba(255, 106, 43, .14), 0 6px 16px -6px rgba(255, 106, 43, .7) !important; }
.pd-fluxo button.agendado .pd-fluxo-bola { background: #3b82f6 !important; border-color: #60a5fa !important; box-shadow: 0 0 0 4px rgba(96, 165, 250, .14) !important; }
.pd-fluxo button.atual .pd-fluxo-anel, .pd-fluxo button.agendado .pd-fluxo-anel { inset: -5px !important;
  -webkit-mask: radial-gradient(circle, transparent 20px, #000 21px) !important; mask: radial-gradient(circle, transparent 20px, #000 21px) !important; opacity: .9; }
.pd-fluxo-nome { font-size: 12px !important; font-weight: 600 !important; color: rgba(255, 255, 255, .45) !important; }
.pd-fluxo button.feito .pd-fluxo-nome { color: rgba(255, 255, 255, .78) !important; }
.pd-fluxo button.atual .pd-fluxo-nome { color: #fff !important; font-weight: 700 !important; }
.pd-fluxo-sub { min-height: 16px; font-size: 10px !important; letter-spacing: .06em !important; }
.pd-fluxo-sub:empty { visibility: hidden; }
.pd-fluxo button.atual .pd-fluxo-sub:not(:empty) { padding: 1px 7px; border-radius: 999px; color: #ff9a6b !important; background: rgba(255, 106, 43, .12); }
.pd-fluxo button.publicado .pd-fluxo-sub { padding: 1px 7px; border-radius: 999px; background: rgba(52, 211, 153, .12); }
.pd-fluxo button.agendado .pd-fluxo-sub { padding: 1px 7px; border-radius: 999px; background: rgba(96, 165, 250, .12); }
.pd-fluxo button.vista::after { bottom: -8px !important; height: 2px !important; width: 20px !important; margin-left: -10px !important; background: rgba(255, 255, 255, .55) !important; box-shadow: none !important; }
.pd-fluxo button.feito .pd-fluxo-bola svg { animation-duration: .35s; }

/* ---- detalhe da etapa ---- */
.pd-etapa { margin: 16px 18px 0 !important; padding: 16px 18px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, .07) !important;
  background: rgba(255, 255, 255, .018) !important; position: relative; overflow: hidden; }
.pd-etapa::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 0 2px 2px 0; background: rgba(255, 255, 255, .15); }
.pd-etapa:has(.pd-etapa-cab.feita)::before { background: #34d399; }
.pd-etapa:has(.pd-etapa-cab.agora)::before { background: #ff7a3d; }
.pd-etapa.trocou { animation: pdm-entra .25s ease-out both !important; }
.pd-etapa-cab { gap: 10px !important; }
.pd-etapa-num { width: 26px !important; height: 26px !important; font-size: 11.5px !important; border-width: 1.5px !important; }
.pd-etapa-cab.agora .pd-etapa-num { animation: none !important; box-shadow: 0 0 0 4px rgba(255, 106, 43, .14); }
.pd-etapa-cab small { font-size: 10px !important; letter-spacing: .1em !important; }
.pd-etapa-cab strong { font-size: 14.5px !important; font-weight: 700 !important; }
.pd-etapa-texto { margin-top: 8px !important; font-size: 13px !important; color: rgba(255, 255, 255, .6) !important; }
.pd-etapa-info { font-size: 12.5px !important; color: rgba(255, 255, 255, .55) !important; }
.pd-etapa-mover { height: 30px !important; font-size: 11.5px !important; border-radius: 8px !important; }

/* ---- conteudo / aprovacao / publicacao: cartoes planos ---- */
.pd-prod { margin-top: 14px !important; padding: 14px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .07) !important; background: rgba(0, 0, 0, .18) !important; }
.pd-prod-info small { color: rgba(255, 255, 255, .45) !important; letter-spacing: .1em !important; font-size: 10px !important; }
.pd-prod:has(.pd-prod-estado.pronta) .pd-prod-info small { color: #4ade80 !important; }
.pd-prod-info strong { font-size: 14px !important; font-weight: 700 !important; }
.pd-prod-estado { background: rgba(255, 255, 255, .07) !important; color: rgba(255, 255, 255, .8) !important; font-weight: 700; }
.pd-prod-trilha { margin: 16px 0 4px !important; }
.pd-prod-trilha::after { background: rgba(167, 139, 250, .9) !important; }
.pd-prod-trilha li.agora i { box-shadow: 0 0 0 4px rgba(167, 139, 250, .2) !important; animation: none !important; }
.pd-prod-trilha li span { font-size: 10px !important; font-weight: 600 !important; }
.pd-prod-arte { width: 56px !important; height: 56px !important; border-radius: 10px !important; }
.pd-prod-iniciar, .pd-prod-enviar { height: 36px !important; font-size: 12.5px !important; border-radius: 10px !important; }
.pd-prod-iniciar::after, .pd-prod-enviar::after { display: none; }
.pd-prod-abrir { height: 34px !important; font-size: 12px !important; border-radius: 9px !important; }

.pd-aprov, .pd-pub { margin-top: 14px !important; padding: 12px 14px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--t) 7%, transparent) !important; border-color: color-mix(in srgb, var(--t) 25%, transparent) !important; }
.pd-aprov-ic, .pd-pub-ic { width: 36px !important; height: 36px !important; border-radius: 10px !important; box-shadow: none !important; }
.pd-aprov-ic svg, .pd-pub-ic svg { width: 17px !important; height: 17px !important; }
.pd-aprov.espera .pd-aprov-ic { animation: none !important; }
.pd-aprov strong, .pd-pub strong { font-size: 14px !important; font-weight: 700 !important; }
.pd-pub-conta b { font-size: 20px !important; animation: none !important; }
.pd-pub-link { height: 32px !important; border-radius: 9px !important; font-size: 12px !important; }
.pd-aprov .pd-prod-arte { width: 44px !important; height: 44px !important; }

/* ---- proximo passo e valor: mais sobrios ---- */
.pd-proximo { padding: 10px 10px 10px 12px !important; border-radius: 14px !important; background: rgba(255, 106, 43, .06) !important; border-color: rgba(255, 122, 61, .22) !important; }
.pd-proximo-ic { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
.pd-proximo-ic svg { animation: none !important; }
.pd-proximo-sim { height: 36px !important; font-size: 13px !important; border-radius: 10px !important; box-shadow: 0 6px 16px -8px #ff5a1f !important; }
.pd-proximo-sim::after { display: none; }
.pd-mais-botao { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
.pd-valor.feito { padding: 10px 12px !important; border-radius: 14px !important; }
.pd-valor-ic { width: 34px !important; height: 34px !important; border-radius: 10px !important; box-shadow: none !important; }
.pd-valor-texto strong { font-size: 16px !important; }

/* ---- cabecalho do pedido ---- */
.pd-cab::after { opacity: .5; animation: none !important; }
.pd-av.grande { box-shadow: none !important; }

/* pedido + conversa respiram */
.pd-pedido { border-radius: 14px !important; }

/* =========================================================
   Lista de pedidos e cabecalho: minimalista e vivo
   ========================================================= */
@property --pdl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pdl-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pdl-gira { to { --pdl-ang: 360deg; } }
@keyframes pdl-respira { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .5); } 70% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); } }
@keyframes pdl-varre { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes pdl-sobe { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* ---- filtros: cabem todos, contagem como selo ---- */
.pd-filtros { padding: 3px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .06) !important; }
.pd-filtros-marca { top: 3px !important; bottom: 3px !important; left: 3px !important; width: calc((100% - 6px) / 4) !important; border-radius: 9px !important;
  background: rgba(255, 106, 43, .16) !important; border: 1px solid rgba(255, 122, 61, .4) !important; box-shadow: none !important; }
.pd-filtros button { position: relative; height: 32px !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: -.01em; white-space: nowrap; overflow: visible; }
.pd-filtros button span { overflow: hidden; text-overflow: ellipsis; }
.pd-filtros em { position: absolute; top: -6px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px !important; border-radius: 999px; display: grid; place-items: center;
  font-size: 9.5px !important; font-weight: 800; color: #fff; background: #2a303c !important; border: 1.5px solid #10131a; }
.pd-filtros button.ativo em { background: #ff6a2b !important; animation: pdl-sobe .35s cubic-bezier(.3, 1.5, .5, 1) both; }

.pd-busca { height: 36px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .025) !important; }

/* ---- grupos e itens ---- */
.pd-grupo h4 { margin: 6px 8px 6px !important; font-size: 10px !important; letter-spacing: .14em !important; color: rgba(255, 255, 255, .38) !important; }
.pd-grupo h4 i { width: 6px !important; height: 6px !important; box-shadow: none !important; }
.pd-grupo h4 em { background: none !important; padding: 0 !important; font-size: 10.5px; color: rgba(255, 255, 255, .45); }
.pd-item { padding: 10px 10px !important; border-radius: 12px !important; gap: 11px !important; animation: pdl-entra .35s calc(var(--n, 0) * 40ms) cubic-bezier(.2, .8, .2, 1) both !important; }
.pd-item::after { background: linear-gradient(90deg, rgba(255, 255, 255, .04), transparent) !important; }
.pd-item:hover { transform: translateX(3px) !important; background: transparent !important; }
.pd-item.ativo { background: rgba(255, 106, 43, .07) !important; border-color: rgba(255, 122, 61, .22) !important; }
.pd-item.ativo::before { top: 12px !important; bottom: 12px !important; width: 2px !important; box-shadow: none !important; }
/* brilho que atravessa o item ativo de tempos em tempos */
.pd-item.ativo .pd-item-corpo { position: relative; overflow: hidden; }
.pd-item.ativo .pd-item-corpo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); animation: pdl-varre 4.5s ease-in-out infinite; }
.pd-av { width: 38px !important; height: 38px !important; }
.pd-item .pd-av { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) !important; }
.pd-item:hover .pd-av { transform: scale(1.06) rotate(-3deg) !important; }
.pd-item.ativo .pd-av { box-shadow: 0 0 0 2px #10131a, 0 0 0 3.5px rgba(255, 122, 61, .7) !important; }
.pd-item-tipo { width: 18px !important; height: 18px !important; border-radius: 6px !important; box-shadow: 0 0 0 2px #10131a !important; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.pd-item:hover .pd-item-tipo { transform: scale(1.12) rotate(8deg); }
.pd-item-linha strong { font-size: 13px !important; font-weight: 700 !important; letter-spacing: -.005em; }
.pd-item-titulo { font-size: 12.5px !important; font-weight: 500 !important; color: rgba(255, 255, 255, .72) !important; }
.pd-item-previa { font-size: 11.5px !important; opacity: .42 !important; }
.pd-item-sit { padding: 1px 7px; border-radius: 999px; font-size: 10px !important; opacity: .6 !important; background: rgba(255, 255, 255, .05); }
.pd-urgente { padding: 1px 5px !important; border-radius: 5px !important; font-size: 9.5px !important; }
/* quem precisa de voce: o ponto respira */
.pd-item.q-voce .pd-item-linha strong::after { width: 6px !important; height: 6px !important; box-shadow: none !important; animation: pdl-respira 2s ease-out infinite; }
.pd-item.q-fechado { opacity: .55 !important; transition: opacity .25s; }
.pd-item.q-fechado:hover, .pd-item.q-fechado.ativo { opacity: 1 !important; }
.pd-nao-lidas { min-width: 18px !important; height: 18px !important; font-size: 10px !important; }

/* ---- cabecalho do pedido ---- */
.pd-cab { padding: 16px 20px !important; gap: 14px !important; background: none !important; }
.pd-cab::after { display: none !important; }
.pd-av.grande { position: relative; width: 46px !important; height: 46px !important; }
/* anel de luz girando em volta do cliente */
.pd-cab-av { position: relative; isolation: isolate; flex: none; display: grid; }
.pd-cab-av::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 50%;
  background: conic-gradient(from var(--pdl-ang), rgba(255, 255, 255, .06) 0 55%, color-mix(in srgb, var(--c) 90%, #fff) 78%, rgba(255, 255, 255, .06) 100%);
  -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px); animation: pdl-gira 4s linear infinite; }
.pd-cab-texto small { font-size: 11.5px !important; opacity: .45 !important; }
.pd-cab-texto h3 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.015em !important; margin: 1px 0 7px !important; }
.pd-etq { padding: 2px 8px !important; font-size: 10.5px !important; font-weight: 600 !important; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .035) !important;
  animation: pdl-entra .35s calc(.1s + var(--i, 0) * 50ms) both; transition: transform .2s, border-color .2s; }
.pd-etq:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .14); }
.pd-etq.tipo { background: color-mix(in srgb, var(--c) 10%, transparent) !important; border-color: color-mix(in srgb, var(--c) 25%, transparent); }
.pd-etq.extra { background: rgba(251, 191, 36, .08) !important; border-color: rgba(251, 191, 36, .22); }
.pd-etq.isento { border-color: rgba(74, 222, 128, .25); }
.pd-etq.urgente { border-color: rgba(248, 113, 113, .25); }
.pd-dono { height: 34px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .025) !important; border-color: rgba(255, 255, 255, .08) !important; transition: border-color .2s, background .2s; }
.pd-dono:hover { border-color: rgba(255, 122, 61, .4) !important; background: rgba(255, 106, 43, .06) !important; }
.pd-voltar { border-radius: 9px !important; transition: background .2s, transform .2s; }
.pd-voltar:hover { transform: translateX(-2px); background: rgba(255, 255, 255, .1) !important; }

/* topo da aba: numeros com movimento ao entrar */
.pd-num { padding: 7px 12px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .025) !important; animation: pdl-entra .4s both; }
.pd-num:nth-child(2) { animation-delay: .06s; } .pd-num:nth-child(3) { animation-delay: .12s; }
.pd-num b { font-size: 16px !important; }

/* ---- filtros v3: contagem na mesma linha, discreta (sem selo flutuando) ---- */
.pd-filtros { padding: 4px !important; }
.pd-filtros-marca { top: 4px !important; bottom: 4px !important; left: 4px !important; width: calc((100% - 8px) / 4) !important; border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(255, 122, 61, .22), rgba(255, 90, 31, .1)) !important; border: 1px solid rgba(255, 122, 61, .45) !important;
  box-shadow: 0 6px 16px -10px rgba(255, 90, 31, .9) !important; }
.pd-filtros button { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px !important; height: 34px !important; padding: 0 4px !important; overflow: hidden !important;
  font-size: 11.5px !important; font-weight: 700 !important; color: rgba(255, 255, 255, .55) !important; opacity: 1 !important; transition: color .25s !important; }
.pd-filtros button:hover { color: rgba(255, 255, 255, .85) !important; }
.pd-filtros button.ativo { color: #fff !important; }
.pd-filtros em { position: static !important; display: inline-block !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important;
  font-size: 10.5px !important; font-weight: 800 !important; font-style: normal; color: rgba(255, 255, 255, .4) !important; background: none !important; animation: none !important; transition: color .25s; }
.pd-filtros button.ativo em { color: #ffb38a !important; background: none !important; }
.pd-filtros em:empty { display: none !important; }
@media (max-width: 420px) { .pd-filtros button { font-size: 10.5px !important; } }

/* ===== Comentarios & Ajustes do post: no desenho de Pedidos ===== */
.aj2 {
  position: relative; overflow: hidden; isolation: isolate; max-width: 880px; margin-top: 14px; padding: 22px 24px 24px; border-radius: 20px;
  background: color-mix(in srgb, var(--texto) 2.5%, var(--painel));
  border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
  animation: aj2-entra .45s cubic-bezier(.2,.8,.2,1);
}
.aj2::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 20% 50%, rgba(255, 90, 31, .1), transparent 70%);
  animation: qd-passeia 12s ease-in-out infinite alternate;
}
@keyframes aj2-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* cabecalho */
.aj2-cab { display: flex; align-items: center; gap: 14px; }
.aj2-cab-av { flex: none; }
.aj2-cab-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aj2-cab-texto small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--destaque); }
.aj2-cab-texto h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.015em; color: var(--texto); }
.aj2-numeros { display: flex; gap: 8px; }
.aj2-num {
  display: grid; justify-items: center; min-width: 74px; padding: 8px 12px; border-radius: 12px;
  font-size: 10.5px; color: var(--apagado);
  background: color-mix(in srgb, var(--texto) 3%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
}
.aj2-num b { font-size: 20px; font-weight: 750; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; animation: aj2-conta .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes aj2-conta { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.aj2-num.pendente.tem { border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .07); }
.aj2-num.pendente.tem b { color: #fbbf24; }
.aj2-num.ok b { color: #22c55e; }

/* andamento do post */
.aj2-fluxo { --prog: 0; position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0 0; padding: 0; }
.aj2-trilha { position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--texto) 9%, transparent); }
.aj2-trilha i { display: block; height: 100%; width: calc(var(--prog) * 100%); border-radius: inherit; background: linear-gradient(90deg, #22c55e, #ff7a3d); animation: aj2-trilha .9s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aj2-trilha { from { width: 0; } }
.aj2-passo { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--apagado); animation: qd-entra .4s calc(var(--i) * 70ms) both; }
.aj2-bola {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--apagado); background: var(--painel); border: 1.5px solid color-mix(in srgb, var(--texto) 12%, transparent);
  transition: all .3s ease;
}
.aj2-bola svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aj2-passo.feito { color: color-mix(in srgb, #22c55e 70%, var(--texto)); }
.aj2-passo.feito .aj2-bola { color: #fff; border-color: transparent; background: linear-gradient(160deg, #6ee7a8, #22c55e); box-shadow: 0 6px 14px -6px rgba(34, 197, 94, .8); }
.aj2-passo.atual { color: var(--texto); }
.aj2-passo.atual .aj2-bola { color: #fff; border-color: transparent; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 0 0 4px rgba(255, 90, 31, .15), 0 8px 18px -6px rgba(255, 90, 31, .8); animation: aj2-atual 2s ease-in-out infinite; }
@keyframes aj2-atual { 50% { box-shadow: 0 0 0 7px rgba(255, 90, 31, .06), 0 8px 18px -6px rgba(255, 90, 31, .8); } }

/* proximo passo */
.aj2-proximo {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--texto) 8%, transparent); background: color-mix(in srgb, var(--texto) 3%, transparent);
  animation: qd-entra .4s .2s both;
}
.aj2-proximo > svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aj2-proximo > span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.aj2-proximo small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aj2-proximo strong { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.aj2-proximo.voce { border-color: rgba(251, 191, 36, .28); background: linear-gradient(90deg, rgba(251, 191, 36, .09), transparent); }
.aj2-proximo.voce > svg, .aj2-proximo.voce small { color: #fbbf24; }
.aj2-proximo.voce > svg { background: rgba(251, 191, 36, .14); animation: aj2-seta 1.6s ease-in-out infinite; }
@keyframes aj2-seta { 50% { transform: translateX(3px); } }
.aj2-proximo.pronto { border-color: rgba(34, 197, 94, .3); background: linear-gradient(90deg, rgba(34, 197, 94, .1), transparent); }
.aj2-proximo.pronto > svg, .aj2-proximo.pronto small { color: #22c55e; }
.aj2-proximo.pronto > svg { background: rgba(34, 197, 94, .14); }
.aj2-proximo.cliente { border-color: rgba(167, 139, 250, .3); background: linear-gradient(90deg, rgba(167, 139, 250, .1), transparent); }
.aj2-proximo.cliente > svg, .aj2-proximo.cliente small { color: #a78bfa; }
.aj2-proximo.cliente > svg { background: rgba(167, 139, 250, .14); }
:root body .aj2-reenviar {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 14px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff; border: 0; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -10px rgba(255, 90, 31, .9);
  transition: transform .2s ease;
}
:root body .aj2-reenviar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
:root body .aj2-reenviar:hover { transform: translateY(-1px); }
:root body .aj2-reenviar:hover svg { transform: translate(2px, -2px); }

/* o fio da conversa */
.aj2-fio { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--texto) 7%, transparent); }
.aj2-msg { display: flex; gap: 11px; align-items: flex-start; animation: aj2-msg .45s calc(var(--n) * 60ms + .15s) cubic-bezier(.2,.8,.2,1) both; transition: opacity .28s ease, transform .28s ease; }
@keyframes aj2-msg { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.aj2-msg.resolvendo { opacity: .4; transform: scale(.98); }
.aj2-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f58529, #dd2a7b); box-shadow: 0 0 0 2px var(--painel), 0 0 0 3.5px rgba(255, 90, 31, .35); }
.aj2-bolha {
  --aj-cor: #60a5fa; flex: 1; min-width: 0; padding: 12px 14px 10px; border-radius: 4px 16px 16px 16px;
  background: color-mix(in srgb, var(--texto) 4%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
  border-left: 2px solid var(--aj-cor);
}
.aj2-pedido .aj2-bolha { --aj-cor: #fbbf24; background: linear-gradient(135deg, rgba(251, 191, 36, .07), transparent 60%), color-mix(in srgb, var(--texto) 3%, transparent); }
.aj2-observacao .aj2-bolha { --aj-cor: #22c55e; }
.aj2-bolha header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aj2-bolha header strong { font-size: 13px; font-weight: 650; color: var(--texto); }
.aj2-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: color-mix(in srgb, var(--aj-cor) 85%, var(--texto)); background: color-mix(in srgb, var(--aj-cor) 12%, transparent); }
.aj2-tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aj2-bolha time { margin-left: auto; font-size: 10.5px; color: var(--apagado); }
.aj2-bolha p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--texto); white-space: pre-wrap; word-break: break-word; }
.aj2-bolha footer { display: flex; justify-content: flex-end; margin-top: 8px; }
:root body .aj2-resolver {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 11px; border-radius: 9px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--apagado); background: transparent; border: 1px solid color-mix(in srgb, var(--texto) 11%, transparent); box-shadow: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
:root body .aj2-resolver svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root body .aj2-resolver:hover { color: #22c55e; border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .08); }
.aj2-feito { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #22c55e; }
.aj2-feito svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aj2-msg.resolvido .aj2-bolha { opacity: .62; border-left-color: #22c55e; }
.aj2-msg.resolvido .aj2-bolha p { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--apagado) 50%, transparent); }

/* vazio */
.aj2-vazio { display: grid; justify-items: center; gap: 8px; margin-top: 22px; padding: 34px 20px; text-align: center; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--texto) 12%, transparent); }
.aj2-vazio-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--destaque); background: radial-gradient(circle at 50% 35%, rgba(255, 90, 31, .2), rgba(255, 90, 31, .05)); box-shadow: inset 0 0 0 1px rgba(255, 90, 31, .25); animation: qd-flutua 4s ease-in-out infinite; }
.aj2-vazio-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aj2-vazio strong { font-size: 14.5px; font-weight: 650; color: var(--texto); }
.aj2-vazio p { margin: 0; max-width: 360px; font-size: 12.5px; line-height: 1.5; color: var(--apagado); }

@media (max-width: 680px) {
  .aj2 { padding: 18px 16px; }
  .aj2-cab { flex-wrap: wrap; }
  .aj2-numeros { width: 100%; }
  .aj2-num { flex: 1; }
  .aj2-proximo { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .aj2, .aj2 * { animation: none !important; } }