/* ==========================================================================
   diag — cartão "Diagnóstico rápido" do hero (ordem de serviço de bancada)
   Usa .ticket, .pill, .chip-label e .btn do base.css. Prefixo dg-.
   ========================================================================== */

.dg {
  --dg-edge: transparent;          /* contorno dos aparelhos (só aparece no escuro) */
  --dg-soft: .11;                  /* força do "cinza de tela" sobre a tela clara */
  --dg-stage-dot: var(--border-2);
  --dg-mut: 1;                     /* no escuro o "apagado" fica mais leve sobre a tela clara */
  position: relative;
}
:root[data-theme="dark"] .dg { --dg-edge: var(--border-2); --dg-soft: .16; --dg-stage-dot: var(--border-2); --dg-mut: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dg { --dg-edge: var(--border-2); --dg-soft: .16; --dg-stage-dot: var(--border-2); --dg-mut: .5; }
}

/* ---------- Cabeçalho: ordem de serviço ---------- */
.dg-head { gap: 10px 12px; }
.dg-os {
  order: 1; display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.dg-os__pad { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--accent); }
.dg-chip { order: 2; }
.dg-title { order: 3; flex: 1 0 100%; }

/* ---------- Corpo ---------- */
.dg-field { display: block; }
.dg-legend {
  display: block; width: 100%; padding: 0; margin-bottom: 12px;
  font-weight: 700; font-size: 17px; line-height: 1.25;
}
.dg-n {
  display: inline-block; margin-right: 9px; vertical-align: .08em;
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; color: var(--accent-ink);
}
.dg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-pills.is-sizing { overflow: hidden; transition: height .32s var(--ease-out); }
.dg-pill { max-width: 100%; text-align: left; -webkit-tap-highlight-color: transparent; }
.dg-pill.is-new { animation: dg-k-pill .34s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes dg-k-pill { from { opacity: 0; transform: translateY(6px); } }
/* no toque o :hover fica grudado: sem isto, a pílula desmarcada continua com borda de selecionada */
@media (hover: none) {
  .dg-pill[aria-pressed="false"]:hover { border-color: var(--border-2); }
}

/* ---------- Painel de resultado ---------- */
.dg-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px;
  padding: 16px; border-radius: 10px; background: var(--bg);
}
/* a arte fica ao lado do texto quando cabe; quando não cabe, vira uma faixa inteira acima */
.dg-art {
  flex: 1 1 136px; min-width: 136px; display: flex; justify-content: center;
  padding: 6px 0; border-radius: 8px;
  background-image: radial-gradient(circle, var(--dg-stage-dot) 1px, transparent 1.4px);
  background-size: 12px 12px; background-position: center;
}
.dg-svg { width: 100%; max-width: 172px; height: auto; aspect-ratio: 4 / 3; overflow: visible; }
.dg-col { position: relative; flex: 999 1 200px; min-width: 0; }
.dg-out { min-height: 186px; }
.dg.is-ready .dg-out { transition: min-height .35s var(--ease-out); }
.dg-out__in {
  display: flex; flex-direction: column; gap: 10px;
  transition: opacity .22s ease, transform .3s var(--ease-out);
}
.dg-out__in.is-out { opacity: 0; transform: translateY(4px); transition-duration: .11s, .11s; }
.dg-ghost { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; transition: none; }
.dg-out__title { font-size: 19px; line-height: 1.2; font-weight: 800; }
.dg-out__intro { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.dg-laudo { display: flex; flex-direction: column; gap: 10px; }
.dg-laudo > div { display: flex; flex-direction: column; gap: 3px; }
.dg-laudo dt { font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--accent-ink); }
.dg-laudo dd { font-size: 15px; line-height: 1.45; color: var(--text-2); }
/* campo em branco da ordem de serviço: linha tracejada esperando o preenchimento */
.dg-laudo dd:empty::before, .dg-laudo dd:empty::after { content: ''; display: block; height: 16px; border-bottom: 2px dashed var(--border-2); }
.dg-laudo dd:empty::after { width: 64%; }

/* valor aproximado: a linha de "total" da ordem de serviço */
.dg-preco {
  display: flex; flex-direction: column; gap: 3px; margin-top: 4px; padding: 12px 14px; border-radius: 8px;
  background: var(--accent-wash); border: 1.5px dashed var(--accent-deep);
}
.dg-preco__rot { font-family: var(--mono); font-size: 11.5px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.dg-preco__val { text-wrap: balance; font-size: 27px; line-height: 1.05; font-weight: 800; font-stretch: 75%; color: var(--text); font-variant-numeric: tabular-nums; }
.dg-preco__nota { font-size: 14px; line-height: 1.4; color: var(--text-2); }

/* ---------- Envio ---------- */
.dg-send { display: flex; flex-direction: column; gap: 10px; }
.dg-send__btn { min-height: 56px; font-size: 18px; }
.dg-send__nota { font-size: 15px; line-height: 1.45; color: var(--text-3); }
html:not(.js) .dg-send__nota { display: none; }
.dg-nojs { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.js .dg-nojs { display: none; }
html:not(.js) .dg-field, html:not(.js) .dg-result { display: none; }
.dg-msg { margin-top: -6px; font-size: 15px; line-height: 1.45; }
.dg-msg summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer;
  font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.dg-msg summary::-webkit-details-marker { display: none; }
.dg-msg summary::after {
  content: ''; display: inline-block; flex-shrink: 0; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.dg-msg[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.dg-msg__txt {
  margin-top: 2px; padding: 12px 14px; border-radius: 4px 12px 12px 4px;
  background: var(--accent-wash); color: var(--text); border-left: 3px solid var(--accent);
  font-family: var(--mono); font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere;
}

/* ---------- Ilustrações: cores por token ---------- */
.dg-f-dev { fill: var(--device); }
.dg-f-scr { fill: var(--device-screen); }
.dg-f-mut { fill: var(--muted-fill); opacity: var(--dg-mut); }
.dg-f-brand { fill: var(--brand); }
.dg-f-acc { fill: var(--accent); }
.dg-f-red { fill: var(--red); }
.dg-f-blue { fill: var(--blue); }
.dg-f-on { fill: var(--device-screen); }
.dg-f-soft { fill: var(--device); opacity: var(--dg-soft); }
.dg-f-ink2 { fill: var(--device); opacity: .55; }
.dg-f-det { fill: #5C7268; }                 /* detalhes sobre o corpo do aparelho, sempre escuro */
.dg-f-bar { fill: #2B4039; }
.dg-edge { stroke: var(--dg-edge); stroke-width: 1.5; }
.dg-s-dev, .dg-s-ink, .dg-s-mut, .dg-s-brand, .dg-s-acc, .dg-s-red, .dg-s-dim { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-s-dev { stroke: var(--device); }
.dg-s-ink { stroke: #0E1F19; }
.dg-s-mut { stroke: var(--muted-fill); opacity: var(--dg-mut); }
.dg-s-brand { stroke: var(--brand); }
.dg-s-acc { stroke: var(--accent); }
.dg-s-red { stroke: var(--red); }
.dg-s-dim { stroke: #5C7268; }
.dg-s-win { stroke: var(--device); stroke-width: 2; }
.dg-s-win--b { stroke-width: 2.5; }
.dg-t { font-family: var(--font); font-weight: 700; }

/* ---------- Troca de ilustração: fade + leve escala, sem piscar ---------- */
.dg-dev, .dg-layer {
  opacity: 0; visibility: hidden; transform: scale(.94); transform-origin: 100px 75px;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.dg-dev.is-on, .dg-layer.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .26s ease .05s, transform .42s var(--ease-out) .05s, visibility 0s;
}

/* ---------- Vida discreta (só na camada ativa; tudo termina no estado final) ---------- */
.dg-layer [class*="dg-a-"] { transform-box: fill-box; transform-origin: center; }
.dg-layer.is-on .dg-a-pop   { animation: dg-k-pop .42s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
.dg-layer.is-on .dg-a-up    { animation: dg-k-up .4s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
.dg-layer.is-on .dg-a-fade  { animation: dg-k-fade .3s ease both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
.dg-layer.is-on .dg-a-rise  { animation: dg-k-rise .6s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
.dg-layer .dg-a-gx { transform-origin: left center; }
.dg-layer.is-on .dg-a-gx    { animation: dg-k-gx .45s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
.dg-layer .dg-a-gy { transform-origin: center top; }
.dg-layer.is-on .dg-a-gy    { animation: dg-k-gy .4s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
.dg-a-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg-layer.is-on .dg-a-draw  { animation: dg-k-draw .24s cubic-bezier(.5, 0, .2, 1) both; animation-delay: calc(.12s + var(--i, 0) * 60ms); }
.dg-layer.is-on .dg-a-jolt  { animation: dg-k-jolt .32s ease-out .12s both; }
.dg-layer.is-on .dg-a-wobble { animation: dg-k-wobble .7s var(--ease-out) .12s both; }
.dg-a-crt { opacity: 0; }
.dg-layer.is-on .dg-a-crt   { animation: dg-k-crt .46s cubic-bezier(.6, 0, .4, 1) .1s both; }
.dg-layer.is-on .dg-a-bolt  { animation: dg-k-bolt .7s linear .15s both; }
.dg-layer.is-on .dg-a-fill  { animation: dg-k-fill 1.4s cubic-bezier(.215, .61, .355, 1) .12s both; }
/* laços curtos e com motivo: carregando, pingando, bateria no fim, cursor, digitando */
.dg-layer .dg-a-spin { transform-box: view-box; transform-origin: 100px 50px; }
.dg-layer.is-on .dg-a-spin  { animation: dg-k-spin 1.1s linear infinite; }
.dg-layer .dg-a-crawl { transform-origin: left center; }
.dg-layer.is-on .dg-a-crawl { animation: dg-k-crawl 3.4s ease-in-out infinite alternate; }
.dg-layer.is-on .dg-a-drop  { animation: dg-k-drop 2.1s cubic-bezier(.45, 0, .8, .6) infinite; animation-delay: calc(var(--i, 0) * .22s); }
.dg-layer.is-on .dg-a-blink { animation: dg-k-blink 1.2s steps(1, end) infinite; }
.dg-layer.is-on .dg-a-cursor { animation: dg-k-blink0 1.1s steps(1, end) infinite; }
.dg-layer.is-on .dg-a-type  { animation: dg-k-type 1.3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .15s); }
.dg.is-paused .dg-svg * { animation-play-state: paused !important; }

@keyframes dg-k-pop { from { opacity: 0; transform: scale(.35); } 70% { transform: scale(1.06); } }
@keyframes dg-k-up { from { opacity: 0; transform: translateY(7px); } }
@keyframes dg-k-fade { from { opacity: 0; } }
@keyframes dg-k-rise { from { opacity: 0; transform: translateY(14px); } 60% { opacity: 1; transform: translateY(-3px); } }
@keyframes dg-k-gx { from { transform: scaleX(0); } }
@keyframes dg-k-gy { from { transform: scaleY(0); } }
@keyframes dg-k-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } }
@keyframes dg-k-jolt { 0% { transform: none; } 22% { transform: translate(2.5px, -1.5px); } 46% { transform: translate(-2px, 1px); } 72% { transform: translate(1px, 0); } 100% { transform: none; } }
@keyframes dg-k-wobble { 0% { transform: none; } 25% { transform: rotate(-11deg); } 55% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes dg-k-crt { 0% { opacity: 1; transform: none; } 50% { opacity: 1; transform: scale(1, .03); } 88% { opacity: 1; transform: scale(.03, .03); } 100% { opacity: 0; transform: scale(0, .03); } }
@keyframes dg-k-bolt { 0%, 28%, 56%, 100% { fill: var(--muted-fill); } 14%, 42% { fill: var(--accent); } }
@keyframes dg-k-fill { from { transform: translateX(-50px); } }
@keyframes dg-k-spin { to { transform: rotate(360deg); } }
@keyframes dg-k-crawl { to { transform: scaleX(1.7); } }
@keyframes dg-k-drop { 0% { opacity: 0; transform: translateY(-18px); } 22% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(20px); } }
@keyframes dg-k-blink { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes dg-k-blink0 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes dg-k-type { 0%, 55%, 100% { transform: none; } 28% { transform: translateY(-3.5px); } }

/* ---------- Telas estreitas ---------- */
@media (max-width: 420px) {
  .dg-os { font-size: 11px; letter-spacing: .04em; gap: 7px; }
  .dg-head { gap: 10px 8px; }
  .dg-chip { font-size: 13px; padding: 6px 10px; }
  .dg .ticket__head { padding: 18px 18px 16px; }
  .dg .ticket__body { padding: 20px 18px 22px; gap: 22px; }
  .dg-result { padding: 14px; }
}
@media (max-width: 379px) {
  .dg-os__os { display: none; }
  .dg-os { letter-spacing: .06em; }
}

/* ---------- Menos movimento: estado final direto ---------- */
@media (prefers-reduced-motion: reduce) {
  .dg-svg *, .dg-pill.is-new { animation: none !important; }
  .dg-dev, .dg-layer, .dg-out__in, .dg-out, .dg-pills.is-sizing { transition: none !important; }
}

@media print {
  .dg-send, .dg-art { display: none; }
}