/* Caminho do processo + Dados do cliente (painel do cliente) — usa a cor escolhida pelo cliente (--portal-accent) */
@property --p { syntax:"<number>"; inherits:true; initial-value:0 }
.cm-card{ --ac:var(--portal-accent, #e8830f); --ac-l:color-mix(in srgb, var(--ac) 80%, #fff); --ac-d:color-mix(in srgb, var(--ac) 80%, #000) }
.cm-rota{ display:grid; grid-template-columns:repeat(5,1fr); margin:16px 0 4px; padding:0; list-style:none }
.cm-et{ position:relative; text-align:center }
.cm-et::before, .cm-et::after{ content:""; position:absolute; top:28px; left:-50%; width:100%; height:4px; border-radius:4px }
.cm-et::before{ background:var(--border) }
.cm-et:first-child::before, .cm-et:first-child::after{ display:none }
.cm-et::after{ background:linear-gradient(90deg, var(--ac-l), var(--ac)); transform-origin:left center; transform:scaleX(0); opacity:0 }
.cm-et.f::after, .cm-et.a::after{ opacity:1; animation:cmCarrega .8s cubic-bezier(.3,.7,.2,1) both; animation-delay:calc(var(--i, 0) * .4s) }
.cm-et.a::after{ animation-name:cmCarregaAtual }
@keyframes cmCarrega{ to{ transform:scaleX(1) } }
@keyframes cmCarregaAtual{ to{ transform:scaleX(1) } }
.cm-bt{ position:relative; z-index:1; display:block; width:100%; border:0; background:none; padding:0 4px; cursor:pointer; font:inherit; color:var(--muted) }
.cm-bt:focus-visible{ outline:2px solid var(--ac); outline-offset:4px; border-radius:12px }
.cm-nome{ display:block; margin-top:12px; font-size:.8rem; line-height:1.3 }
.cm-et.a .cm-nome, .cm-et.f .cm-nome{ color:var(--text) }
.cm-pct{ display:block; margin-top:2px; font-weight:700; color:var(--ac); font-size:.78rem }
.cm-et.sel .cm-nome{ text-decoration:underline; text-decoration-color:var(--ac); text-underline-offset:4px; text-decoration-thickness:2px }

/* ícones */
.cm-bola, .cm-hi{ position:relative; display:block; margin:0 auto }
.cm-bola{ width:56px; height:56px }
.cm-face{ position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:17px; color:#fff; background:linear-gradient(145deg, var(--ac-l), var(--ac) 55%, var(--ac-d)); box-shadow:0 5px 12px -3px color-mix(in srgb, var(--ac) 50%, transparent); transition:transform .15s ease, box-shadow .15s ease; overflow:hidden }
.cm-face svg{ position:relative; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.cm-et.f .cm-face, .cm-et.a .cm-face{ animation:cmPop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(var(--i, 0) * .4s) }
@keyframes cmPop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.cm-bt:hover .cm-face{ transform:translateY(-2px); box-shadow:0 9px 16px -4px color-mix(in srgb, var(--ac) 55%, transparent) }
.cm-bt:active .cm-face{ transform:scale(.96) }
/* etapa atual: maior, com anel de carregamento que mostra o % do processo e um brilho que passa */
.cm-et.a .cm-bola{ width:64px; height:64px; margin-top:-4px }
.cm-et.a .cm-face svg{ width:30px; height:30px }
.cm-et.a .cm-face::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform:translateX(-120%); animation:cmBrilho 2.8s ease-in-out 1.6s infinite }
@keyframes cmBrilho{ 60%, 100%{ transform:translateX(120%) } }
.cm-anel{ position:absolute; inset:-8px; border-radius:25px; padding:3px; pointer-events:none; --p:0; animation:cmAnel 1.6s cubic-bezier(.3,.7,.2,1) both; animation-delay:calc(var(--i, 0) * .4s);
  background:conic-gradient(from 0deg, var(--ac) calc(var(--p) * 1%), color-mix(in srgb, var(--ac) 16%, transparent) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
@keyframes cmAnel{ to{ --p:var(--pct, 0) } }
.cm-et:not(.f):not(.a) .cm-face{ color:#9aa0aa; background:color-mix(in srgb, var(--border) 60%, var(--panel, #fff)); box-shadow:none }
.cm-ok{ position:absolute; right:-6px; bottom:-6px; z-index:3; width:22px; height:22px; border-radius:50%; background:#1e8e5a; border:2px solid var(--panel, #fff); display:grid; place-items:center; animation:cmPop .4s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(var(--i, 0) * .4s + .35s) }
.cm-ok svg{ width:11px; height:11px; stroke:#fff; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round }
.cm-info{ margin:18px 0 0; padding:12px 14px; border-radius:12px; font-size:.86rem; line-height:1.5; background:color-mix(in srgb, var(--ac) 9%, transparent); border-left:4px solid var(--ac) }
.cm-aviso{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#fdecea; color:#a1291d; font-size:.84rem }

.cm-hist{ list-style:none; margin:22px 0 0; padding:0 }
.cm-hist li{ --c:var(--ac); position:relative; display:grid; grid-template-columns:40px 96px 1fr; gap:0 10px; align-items:center; padding:0 0 16px; font-size:.88rem }
.cm-hist li.neg{ --c:#c0392b }
.cm-hi{ width:36px; height:36px }
.cm-hi .cm-face{ border-radius:11px; animation:none; background:linear-gradient(145deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000)); box-shadow:0 3px 8px -3px color-mix(in srgb, var(--c) 50%, transparent) }
.cm-hi .cm-face svg{ width:18px; height:18px }
.cm-hist li::after{ content:""; position:absolute; left:17px; top:40px; bottom:-2px; width:2px; background:var(--border) }
.cm-hist li:last-child{ padding-bottom:0 }
.cm-hist li:last-child::after{ display:none }
.cm-hist time{ color:var(--muted); font-variant-numeric:tabular-nums; font-size:.82rem }
.cm-hist .cm-agora{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px; background:color-mix(in srgb, var(--c) 16%, transparent); color:var(--c); font-size:.72rem; font-weight:700 }
.cm-prox{ margin-top:16px; font-size:.84rem; color:var(--muted) }

/* Dados do cliente: mesmo padrão do bloco de informações da marca, minimizado (abre ao tocar) */
.cm-dados > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; -webkit-tap-highlight-color:transparent }
.cm-dados > summary::-webkit-details-marker{ display:none }
.cm-dados > summary:focus-visible{ outline:2px solid var(--portal-accent, #e8830f); outline-offset:4px; border-radius:8px }
.cm-dados:not([open]) > summary.card-head{ margin-bottom:0; padding-bottom:0; border-bottom:0 }
.cm-dados .cm-seta{ width:20px; height:20px; flex:none; fill:none; stroke:var(--muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s }
.cm-dados[open] .cm-seta{ transform:rotate(180deg) }
@media (prefers-reduced-motion:reduce){ .cm-et::after, .cm-face, .cm-anel, .cm-ok, .cm-face::after{ animation:none !important } .cm-et.f::after, .cm-et.a::after{ transform:scaleX(1) } .cm-anel{ --p:var(--pct, 0) } }
@media (max-width:520px){
  .cm-bola{ width:44px; height:44px } .cm-et.a .cm-bola{ width:50px; height:50px } .cm-face{ border-radius:14px } .cm-anel{ inset:-6px; border-radius:20px; padding:2px }
  .cm-face svg{ width:21px; height:21px } .cm-et.a .cm-face svg{ width:24px; height:24px }
  .cm-et::before, .cm-et::after{ top:20px } .cm-nome{ font-size:.68rem } .cm-bt{ padding:0 1px }
  .cm-hist li{ grid-template-columns:40px 1fr } .cm-hist time{ grid-column:2; align-self:end } .cm-hist li div{ grid-column:2 }
}