/* Plataforma AXIS, frente 18 (rodada 5): portal do cliente, "Meu fechamento" e a faixa do fechamento no Início.
   Escopado em .r518 / .r518-mini. Usa os tokens --ax-* do app-tema.css (web/TEMA.md). */

.r518{--r518-ok:var(--ax-ok,#15805A);--r518-at:var(--ax-alerta,#D08A12);--r518-and:var(--ax-acento,#8436FE);--r518-info:var(--ax-info,#2F6FE0);--r518-ne:var(--ax-texto-fraco,#9A97B5)}
.r518-ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.r518 h3{margin:0}

/* ---------- topo escuro com o anel ---------- */
.r518-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 34px;border-radius:20px;color:#fff;
  background:radial-gradient(640px 300px at 88% -40%,rgba(132,54,254,.6),transparent 62%),radial-gradient(460px 240px at -8% 130%,rgba(132,54,254,.24),transparent 60%),linear-gradient(150deg,#17184A 0%,#0F1030 72%);
  box-shadow:0 22px 48px rgba(15,16,48,.24),0 2px 6px rgba(15,16,48,.18),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08)}
.r518-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%)}
.r518-hero::after{content:"";position:absolute;left:34px;right:45%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,119,255,.9),transparent);box-shadow:0 0 14px rgba(167,119,255,.8)}
.r518-hero-tx{position:relative;display:flex;flex-direction:column;gap:10px;max-width:640px}
.r518-selo{align-self:flex-start;font:600 10px/1 var(--ax-fonte-mono,monospace);letter-spacing:.22em;text-transform:uppercase;padding:7px 11px;border-radius:999px;color:#D9C7FF;background:rgba(167,119,255,.14);box-shadow:inset 0 0 0 1px rgba(167,119,255,.32)}
.r518-hero h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;line-height:1.1;color:#fff;letter-spacing:-.02em}
.r518-hero p{font-size:15px;line-height:1.55;color:#C9C6E8}
.r518-hero p b{color:#fff;font-weight:600}
.r518-volta{align-self:flex-start;margin-top:4px;font:600 13px var(--ax-fonte);color:#E4D7FF;background:rgba(255,255,255,.07);border:0;border-radius:999px;padding:8px 14px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background var(--ax-dur-1,150ms)}
.r518-volta:hover{background:rgba(255,255,255,.13)}
.r518-hero-anel{position:relative;display:flex;align-items:center;gap:14px}
.r518-hero-anel>.r518-anel,.r518-hero-anel>.r518-anel-t{flex:none}
.r518-anel{display:block;filter:drop-shadow(0 6px 18px rgba(132,54,254,.45))}
.r518-anel-f{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9}
.r518-anel-v{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 900ms var(--ax-curva,cubic-bezier(.2,.7,.2,1))}
.r518-anel-t{position:absolute;left:0;top:0;width:112px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.r518-anel-t b{font-size:34px;font-weight:700;letter-spacing:-.03em}
.r518-anel-t small{font-size:12px;color:#B8B3E0;margin-top:4px}
.r518-anel-r{font:500 10px/1.5 var(--ax-fonte-mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:#9C98CC}

/* ---------- linha do tempo ---------- */
.r518-linha{background:var(--ax-superficie-1);border-radius:20px;padding:30px 26px 26px;box-shadow:var(--ax-anel),var(--ax-sombra-2);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--ax-acento) 5%,transparent),transparent 70%)}
.r518-nos{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.r518-trilho{position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:27px;height:4px;border-radius:4px;background:var(--ax-afundada);
  box-shadow:inset 0 1px 2px rgba(15,16,48,.12)}
.r518-trilho i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#A66FFE,#8436FE);box-shadow:0 0 12px rgba(132,54,254,.55);
  transform:scaleX(0);transform-origin:left center;transition:transform 900ms var(--ax-curva,cubic-bezier(.2,.7,.2,1)) 150ms}
.r518-nos.pronto .r518-trilho i{transform:scaleX(var(--trilho))}
.r518-no{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  opacity:0;transform:translateY(6px);animation:r518-sobe 420ms var(--ax-curva,ease) forwards;animation-delay:calc(var(--i) * 80ms)}
@keyframes r518-sobe{to{opacity:1;transform:none}}
.r518-bola{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-bottom:6px;color:var(--ax-texto-mudo);
  background:linear-gradient(180deg,var(--ax-superficie-1),var(--ax-superficie-2));box-shadow:var(--ax-anel),0 6px 16px rgba(15,16,48,.10),inset 0 1px 0 rgba(255,255,255,.6)}
.r518-no.ok .r518-bola{color:#fff;background:linear-gradient(150deg,#2BB07D,#15805A);box-shadow:0 8px 20px color-mix(in srgb,var(--r518-ok) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.r518-no.and .r518-bola{color:#fff;background:linear-gradient(150deg,#A66FFE,#7A2FF2);box-shadow:0 8px 22px rgba(132,54,254,.42),inset 0 1px 0 rgba(255,255,255,.3)}
.r518-no.and .r518-bola::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(132,54,254,.35);animation:r518-pulso 2.2s ease-out infinite}
@keyframes r518-pulso{0%{opacity:1;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
.r518-no.at .r518-bola{color:var(--r518-at);background:linear-gradient(180deg,var(--ax-superficie-1),color-mix(in srgb,var(--r518-at) 10%,var(--ax-superficie-1)));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--r518-at) 60%,transparent),0 6px 16px color-mix(in srgb,var(--r518-at) 22%,transparent)}
.r518-no.info .r518-bola{color:var(--r518-info);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--r518-info) 55%,transparent),0 6px 16px color-mix(in srgb,var(--r518-info) 20%,transparent)}
.r518-no-dia{font:600 10px/1 var(--ax-fonte-mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--ax-texto-mudo)}
.r518-no-n{font-size:15px;font-weight:650;color:var(--ax-texto);letter-spacing:-.01em}
.r518-no-st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ax-texto-2)}
.r518-pt{width:7px;height:7px;border-radius:50%;background:var(--r518-ne)}
.r518-no.ok .r518-pt{background:var(--r518-ok)}.r518-no.and .r518-pt{background:var(--r518-and)}.r518-no.at .r518-pt{background:var(--r518-at)}.r518-no.info .r518-pt{background:var(--r518-info)}
.r518-no-det{font-size:12px;color:var(--ax-texto-mudo);font-variant-numeric:tabular-nums}

/* ---------- o que falta do cliente ---------- */
.r518-falta{border-radius:18px;padding:20px 22px;background:linear-gradient(180deg,color-mix(in srgb,var(--r518-at) 9%,var(--ax-superficie-1)),var(--ax-superficie-1) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r518-at) 35%,transparent),var(--ax-sombra-1)}
.r518-falta-cab{display:flex;gap:14px;align-items:center}
.r518-falta h2{font-size:16.5px;font-weight:650;margin:0}
.r518-falta p{font-size:13px;color:var(--ax-texto-mudo);margin-top:3px}
.r518-falta-sel{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;font-weight:700;color:#fff;background:linear-gradient(150deg,#F0B65A,#D08A12);
  box-shadow:0 6px 16px color-mix(in srgb,var(--r518-at) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.r518-falta ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.r518-f{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ax-superficie-1);box-shadow:var(--ax-anel)}
.r518-f-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;color:var(--r518-at);background:color-mix(in srgb,var(--r518-at) 12%,transparent)}
.r518-f-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r518-f-t b{font-size:14px;font-weight:600}
.r518-f-t small{font-size:12px;color:var(--ax-texto-mudo)}
.r518-f-ac{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.r518-falta.vazio{display:flex;gap:14px;align-items:center;background:linear-gradient(180deg,color-mix(in srgb,var(--r518-ok) 8%,var(--ax-superficie-1)),var(--ax-superficie-1) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r518-ok) 28%,transparent),var(--ax-sombra-1)}
.r518-falta-ok{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;color:#fff;background:linear-gradient(150deg,#2BB07D,#15805A);box-shadow:0 6px 16px color-mix(in srgb,var(--r518-ok) 35%,transparent)}

/* ---------- botões da tela ---------- */
.r518-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:0;cursor:pointer;font:600 13px var(--ax-fonte);text-decoration:none;white-space:nowrap;
  color:#fff;background:var(--ax-degrade,linear-gradient(135deg,#9352FF,#7A2FF2));box-shadow:var(--ax-sombra-acento,0 6px 16px rgba(132,54,254,.35));transition:transform var(--ax-dur-1,150ms),box-shadow var(--ax-dur-1,150ms)}
.r518-btn:hover{transform:translateY(-1px)}
.r518-btn.sec{color:var(--ax-texto);background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.r518-btn.sec:hover{box-shadow:var(--ax-anel),var(--ax-sombra-2)}
.r518-btn:focus-visible,.r518-h:focus-visible,.r518-volta:focus-visible,.r518-mini:focus-visible{outline:2px solid var(--ax-acento);outline-offset:2px}

/* ---------- etapas em detalhe ---------- */
.r518-dets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.r518-det{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:16px;background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1);
  transition:box-shadow var(--ax-dur-2,200ms),transform var(--ax-dur-2,200ms)}
.r518-det:hover{box-shadow:var(--ax-anel),var(--ax-sombra-2);transform:translateY(-1px)}
.r518-det::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--r518-ne)}
.r518-det.ok::before{background:var(--r518-ok)}.r518-det.and::before{background:var(--r518-and)}.r518-det.at::before{background:var(--r518-at)}.r518-det.info::before{background:var(--r518-info)}
.r518-det header{display:flex;align-items:flex-start;gap:12px}
.r518-det header>div{flex:1;min-width:0}
.r518-det small{font-size:11.5px;color:var(--ax-texto-mudo);font-variant-numeric:tabular-nums}
.r518-det h3{font-size:15.5px;font-weight:650;letter-spacing:-.01em;margin-top:2px}
.r518-det-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;color:var(--ax-acento);background:var(--ax-acento-suave)}
.r518-det>p{font-size:13.5px;line-height:1.55;color:var(--ax-texto-2);margin:0}
.r518-det-l{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;padding:10px 12px;border-radius:12px;background:var(--ax-superficie-2)}
.r518-det-l b{font-weight:600}
.r518-mudo{color:var(--ax-texto-mudo)}
.r518-conf{display:flex;gap:6px;align-items:flex-start;color:var(--r518-ok);font-weight:500}
.r518-conf .r518-ic{margin-top:3px}
.r518-det .r518-btn{align-self:flex-start}
.r518-pill{flex:none;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;color:var(--ax-texto-mudo);background:var(--ax-superficie-3)}
.r518-pill.ok{color:var(--r518-ok);background:var(--ax-ok-suave)}
.r518-pill.and{color:var(--ax-acento);background:var(--ax-acento-suave)}
.r518-pill.at{color:var(--r518-at);background:var(--ax-alerta-suave)}
.r518-pill.info{color:var(--r518-info);background:var(--ax-info-suave)}

/* ---------- histórico ---------- */
.r518-hs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.r518-h{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;padding:14px;border:0;border-radius:14px;cursor:pointer;font:inherit;color:var(--ax-texto);
  background:var(--ax-superficie-2);box-shadow:var(--ax-anel);transition:box-shadow var(--ax-dur-1,150ms),transform var(--ax-dur-1,150ms)}
.r518-h:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-2)}
.r518-h-n{font-size:14px;font-weight:650}
.r518-h-n small{font-size:11.5px;color:var(--ax-texto-mudo);font-weight:500;margin-left:5px}
.r518-h-p,.r518-mini-p{display:flex;gap:5px}
.r518-h-p i,.r518-mini-p i{width:22px;height:6px;border-radius:3px;background:var(--ax-borda-forte)}
.r518-h-p i.ok,.r518-mini-p i.ok{background:var(--r518-ok)}.r518-h-p i.and,.r518-mini-p i.and{background:var(--r518-and)}
.r518-h-p i.at,.r518-mini-p i.at{background:var(--r518-at)}.r518-h-p i.info,.r518-mini-p i.info{background:var(--r518-info)}
.r518-h-c{font:600 12px var(--ax-fonte-mono,monospace);color:var(--ax-texto-mudo)}
.r518-h.ok .r518-h-c{color:var(--r518-ok)}
.r518-rodape{font-size:12.5px;color:var(--ax-texto-mudo);text-align:center}
.r518-rodape:empty{display:none}

/* ---------- faixa no Início ---------- */
.r518-mini{--r518-ok:var(--ax-ok,#15805A);--r518-at:var(--ax-alerta,#D08A12);--r518-and:var(--ax-acento,#8436FE);--r518-info:var(--ax-info,#2F6FE0);
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;text-decoration:none;color:var(--ax-texto);background:var(--ax-superficie-1);
  box-shadow:var(--ax-anel),var(--ax-sombra-1);transition:box-shadow var(--ax-dur-2,200ms),transform var(--ax-dur-2,200ms)}
.r518-mini:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-2)}
.r518-mini-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;background:var(--ax-degrade-marca,linear-gradient(140deg,#9A5BFF,#6E25E0));
  box-shadow:0 6px 16px rgba(132,54,254,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.r518-mini-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r518-mini-t b{font-size:14.5px;font-weight:650}
.r518-mini-t small{font-size:12.5px;color:var(--ax-texto-mudo)}
.r518-mini-t em{font-style:normal;color:var(--r518-at);font-weight:600}
.r518-mini>.r518-ic{color:var(--ax-texto-mudo)}

/* ---------- celular ---------- */
@media (max-width:980px){
  .r518-dets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .r518-hero{padding:24px 20px 22px;border-radius:18px}
  .r518-hero::after{left:20px;right:20%}
  .r518-linha{padding:20px 16px}
  .r518-nos{grid-template-columns:minmax(0,1fr);gap:0}
  .r518-trilho{left:27px;right:auto;top:29px;bottom:29px;width:4px;height:auto}
  .r518-trilho i{background:linear-gradient(180deg,#A66FFE,#8436FE);transform:scaleY(0);transform-origin:center top}
  .r518-nos.pronto .r518-trilho i{transform:scaleY(var(--trilho))}
  .r518-no{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:8px 0}
  .r518-bola{grid-row:1/span 4;margin:0}
  .r518-no-dia,.r518-no-n,.r518-no-st,.r518-no-det{grid-column:2}
  .r518-det header{flex-wrap:wrap}
  .r518-det header>div{flex-basis:calc(100% - 48px)}
  .r518-pill{margin-left:48px}
  .r518-f{flex-wrap:wrap}
  .r518-f-ac{width:100%;justify-content:flex-start}
  .r518-mini-p{display:none}
  .r518-hs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .r518-hero h1{font-size:26px}
  .r518-hero p{font-size:14px}
  .r518-hero-anel{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .r518 *,.r518-mini{animation:none!important;transition:none!important}
  .r518-no{opacity:1;transform:none}
}