.vp-kiosk {
  /* Motion tokens locais: confirmação (500ms), feedback (150ms), traço (80ms). */
  --duration-very-slow: 500ms;
  --duration-quick: 150ms;
  --duration-micro: 80ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --blur-large: 8px;
  --distance-base: 8px;
  --check-opacity-dur: var(--duration-very-slow);
  --check-rotate-dur: var(--duration-very-slow);
  --check-rotate-from: 0deg;
  --check-bob-dur: var(--duration-very-slow);
  --check-y-amount: var(--distance-base);
  --check-blur-dur: var(--duration-very-slow);
  --check-blur-from: var(--blur-large);
  --check-path-dur: var(--duration-very-slow);
  --check-path-delay: var(--duration-micro);
  --check-ease-out: var(--ease-smooth-out);
  --check-ease-opacity: var(--ease-smooth-out);
  --check-ease-rotate: var(--ease-smooth-out);
  --check-ease-bob: var(--ease-smooth-out);
  --check-ease-path: var(--ease-smooth-out);
}

/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* Conferência e captura já recebida confirmam o registro sem nova celebração. */
.t-success-check[data-state="static"] { opacity: 1; }
.t-success-check[data-state="static"] svg path { stroke-dashoffset: 0 !important; }
.vp-kiosk #resultSymbol [hidden] { display: none; }
.vp-kiosk .vp-result.info { border-color: var(--info-line); background: var(--info-soft); }
.vp-kiosk .vp-result.info .vp-result-symbol { color: var(--info); }
.vp-kiosk #resultStatus { margin-top: 8px; white-space: normal; }
.vp-kiosk #feedback.info::before { content: "ⓘ"; flex: 0 0 auto; font-weight: 700; }
.vp-kiosk .vp-feedback.show {
  animation: vp-confirmation-feedback var(--duration-quick) var(--ease-in-out);
}
@keyframes vp-confirmation-feedback { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Confirmação principal: legível sem depender de animação ou cor. */
.vp-kiosk [hidden]{display:none!important}
.vp-kiosk-card .v-card-body{grid-template-columns:minmax(0,1fr)}
.vp-kiosk-card .v-card-body>*{min-width:0}
.vp-kiosk .vp-sensor-list{grid-template-columns:minmax(0,1fr)}
.vp-kiosk .vp-sensor{min-width:0}
.vp-kiosk .vp-camera-actions .v-btn{min-height:44px}
@media(max-width:640px){
  .vp-kiosk-topbar{gap:12px}
  .vp-kiosk-topbar .vp-brand-copy{display:none}
  .vp-kiosk-topbar .vp-brand-logo{width:120px;height:auto;max-width:100%}
  .vp-kiosk-topbar .vp-brand-lockup{min-width:0}
  .vp-kiosk-clock{min-width:0}
  .vp-kiosk-clock span{text-overflow:ellipsis}
}
@media(max-width:500px){.vp-kiosk .vp-camera-actions .v-btn{flex:none}}
.vp-kiosk #resultTitle{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.vp-kiosk .vp-result-head>div:last-child{min-width:0}
.vp-kiosk :is(#result,#feedback,button,a,input):focus-visible{outline:3px solid var(--green);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.vp-kiosk *{scroll-behavior:auto!important;transition:none!important}.vp-kiosk .vp-feedback.show,.vp-kiosk .vp-loading{animation:none!important}}