/* p3group v3: diagnóstico (agente VIDA). Painel de vidro estilo terminal, enxuto. */
.diag-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.diag-cab{margin-bottom:0;position:sticky;top:calc(var(--nav-h) + 48px)}
.diag-cab .corpo{max-width:34ch}

.diag-painel{min-width:0;overflow:hidden}
.diag-painel::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,122,77,.7),transparent)}

/* barra de título */
.diag-topo{display:flex;align-items:center;gap:14px;height:46px;padding:0 20px;border-bottom:1px solid var(--linha);font:500 12px var(--mono);color:var(--osso-3)}
.diag-pontos{display:flex;gap:6px}
.diag-pontos i{width:8px;height:8px;border-radius:50%;background:rgba(236,234,228,.16)}
.diag-arq{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diag-passo{margin-left:auto;color:var(--tang-claro);font-variant-numeric:tabular-nums;white-space:nowrap}

/* progresso neon em 4 partes */
.diag-prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:16px 22px 0}
.diag-prog i{position:relative;height:3px;border-radius:3px;background:rgba(236,234,228,.09);overflow:hidden}
.diag-prog i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tang);box-shadow:var(--brilho);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.diag-prog i.feito::after{transform:scaleX(1)}
.diag-prog i.agora::after{transform:scaleX(.42);background:linear-gradient(90deg,var(--tang),var(--tang-brilho));animation:diag-agora 1.6s var(--ease-io) infinite alternate}
@keyframes diag-agora{from{transform:scaleX(.18)}to{transform:scaleX(.62)}}
.no-fim .diag-prog i::after{transform:scaleX(1);animation:none;background:var(--tang)}

/* fila de agentes que acende com as dores marcadas */
.diag-agentes{display:grid;gap:14px;padding:18px 22px 20px;border-bottom:1px dashed var(--linha-2)}
.diag-ag-tit{display:flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--osso-3)}
.diag-ag-tit b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--pill);border:1px solid var(--linha-2);font:500 12px var(--mono);letter-spacing:0;color:var(--osso-2);transition:color .3s,border-color .3s,box-shadow .3s}
.tem-agente .diag-ag-tit b{color:var(--tang-brilho);border-color:var(--tang-borda);box-shadow:0 0 12px -2px rgba(255,77,36,.6)}
.diag-ag-fila{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.diag-ag-fila::before{content:"";position:absolute;left:10%;right:10%;top:20px;height:0;border-top:1px dashed rgba(236,234,228,.16)}
.diag-ag-fila::after{content:"";position:absolute;left:10%;top:19px;width:16%;height:3px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--tang-brilho),transparent);filter:blur(.5px);box-shadow:0 0 10px rgba(255,77,36,.8)}
.tem-agente .diag-ag-fila::after{opacity:1;animation:diag-pacote 2.8s var(--ease-io) infinite}
@keyframes diag-pacote{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(400%);opacity:0}}
.diag-ag-fila li{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;min-width:0}
.diag-no{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:18px;color:var(--osso-3);
  background:var(--preto-3);border:1px solid var(--linha-2);transition:color .35s,border-color .35s,box-shadow .45s var(--ease),background-color .35s,transform .45s var(--ease)}
.diag-ag-nome{font:500 11px var(--mono);color:var(--osso-3);white-space:nowrap;transition:color .35s}
.diag-ag-fila li.on .diag-no{color:var(--tang);border-color:var(--tang-borda);background:#1d0a05;
  box-shadow:inset 0 1px 0 rgba(255,200,180,.25),0 0 22px -2px rgba(255,77,36,.7);transform:translateY(-2px)}
.diag-ag-fila li.on .diag-ag-nome{color:var(--tang-brilho)}
.diag-ag-fila li.pisca .diag-no::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--tang);animation:diag-onda .8s var(--ease) forwards}
@keyframes diag-onda{from{transform:scale(1);opacity:1}to{transform:scale(1.9);opacity:0}}

/* etapa */
.diag-etapa{padding:26px 22px 6px;min-height:318px}
.diag-q{font:500 clamp(22px,2vw,28px)/1.15 var(--sans);letter-spacing:-.03em;color:var(--osso);text-wrap:balance}
.diag-q:focus{outline:none}
.diag-q:focus-visible{outline:2px solid var(--tang);outline-offset:4px}
.diag-etapa > .diag-q::after{content:"";display:inline-block;width:.45em;height:.08em;margin-left:.18em;background:var(--tang);box-shadow:var(--brilho);vertical-align:baseline;animation:diag-cursor 1.05s steps(1) infinite}
@keyframes diag-cursor{50%{opacity:0}}
.diag-dica{margin-top:8px;font:500 12px var(--mono);color:var(--osso-3)}

.diag-ops{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.diag-op{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 7px;border-radius:var(--pill);border:1px solid var(--linha-2);
  background:rgba(255,255,255,.03);font:500 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--osso-2);text-align:left;cursor:pointer;min-width:0;
  transition:border-color .25s,background-color .25s,color .25s,box-shadow .35s var(--ease),transform .2s var(--ease)}
.diag-op:active{transform:scale(.985)}
.diag-op-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;font-size:17px;background:rgba(255,255,255,.05);color:var(--osso-2);transition:background-color .25s,color .25s}
.diag-op-t{min-width:0}
.diag-op-ok{display:grid;place-items:center;flex:none;width:0;height:20px;overflow:hidden;font-size:15px;color:var(--tang);opacity:0;transition:width .3s var(--ease),opacity .25s}
.diag-op[aria-pressed="true"]{border-color:var(--tang-borda);background:var(--tang-fundo);color:var(--osso);box-shadow:0 0 0 1px rgba(255,77,36,.12),0 0 26px -8px rgba(255,77,36,.7)}
.diag-op[aria-pressed="true"] .diag-op-ic{background:var(--tang);color:#160500}
.diag-op[aria-pressed="true"] .diag-op-ok{width:18px;opacity:1}
@media (hover:hover){.diag-op:hover{border-color:rgba(236,234,228,.3);color:var(--osso)}.diag-op[aria-pressed="true"]:hover{border-color:var(--tang)}}
.diag-erro{min-height:18px;margin-top:12px;font:500 12px var(--mono);color:var(--tang-claro)}

/* campos */
.diag-campos{display:grid;gap:14px;margin-top:22px}
.diag-campo{display:grid;gap:8px;min-width:0}
.diag-campo > span:first-child{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--osso-3)}
.diag-campo small{font-size:inherit;letter-spacing:inherit;color:rgba(236,234,228,.3)}
.diag-input{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;border-radius:var(--pill);border:1px solid var(--linha-2);background:rgba(0,0,0,.32);
  color:var(--osso-3);font-size:18px;transition:border-color .25s,box-shadow .3s}
.diag-input:focus-within{border-color:var(--tang);color:var(--tang);box-shadow:0 0 0 3px rgba(255,77,36,.16),0 0 24px -6px rgba(255,77,36,.6)}
.diag-input input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--osso);font:400 16px var(--sans);outline:none}
.diag-input input[aria-invalid="true"]{color:var(--tang-brilho)}

/* ações */
.diag-acoes{display:flex;align-items:center;gap:10px;padding:16px 22px 22px}
.diag-acoes .btn{min-height:46px;padding:0 20px;font-size:15px}
.diag-seguir{margin-left:auto}
.diag-acoes .btn[hidden]{display:none}
.no-fim .diag-acoes{display:none}

/* resultado */
.diag-res .diag-q{font-size:clamp(22px,1.9vw,27px)}
.diag-dest{color:var(--tang);text-shadow:0 0 18px rgba(255,77,36,.45)}
.diag-plano{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:20px}
.diag-plano li{position:relative;display:grid;gap:4px;align-content:start;min-width:0;padding:10px 14px;border-radius:var(--raio-p);border:1px solid var(--linha);background:rgba(255,255,255,.025);font:500 13.5px/1.3 var(--sans);color:var(--osso-2)}
.diag-plano li + li::before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:1px;background:var(--tang-borda)}
.diag-plano li + li::after{content:"";position:absolute;left:-9px;top:calc(50% - 3px);width:6px;height:6px;border-top:1px solid var(--tang-claro);border-right:1px solid var(--tang-claro);transform:rotate(45deg)}
.diag-plano b{font:500 11px var(--mono);color:var(--tang-claro)}
.diag-prazo{margin-top:12px;font:500 12px/1.5 var(--mono);color:var(--osso-3)}
.diag-msg{margin-top:16px;padding:14px 16px;border-radius:var(--raio-p);border:1px dashed var(--tang-borda);background:rgba(0,0,0,.34)}
.diag-msg-tit{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tang-claro)}
.diag-msg-tit .ic{font-size:15px}
.diag-msg p{margin-top:8px;font:400 14.5px/1.55 var(--sans);color:var(--osso);white-space:pre-line;overflow-wrap:anywhere}
.diag-aviso{margin-top:10px;font:500 12px/1.5 var(--mono);color:var(--osso-3)}
.diag-aviso.ok{color:var(--tang-brilho)}
.diag-fim{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 18px}
.diag-fim .btn{min-height:48px}

@media (max-width:900px){
  .diag-grade{grid-template-columns:minmax(0,1fr);gap:36px}
  /* no celular o painel é alto: vidro sem desfoque (o desfoque grande deixava faixas e pesa na rolagem) */
  .diag-painel{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(22,22,25,.96),rgba(12,12,14,.97))}
  .diag-cab{position:static}
  .diag-etapa{min-height:0;padding:22px 18px 4px}
  .diag-topo{padding:0 16px}
  .diag-prog{padding:14px 18px 0}
  .diag-agentes{padding:16px 18px 18px}
  .diag-acoes{padding:14px 18px 18px}
  .diag-no{width:36px;height:36px;font-size:16px}
  .diag-ag-fila::before{top:18px}
  .diag-ag-fila::after{top:17px}
  .diag-ops{display:grid;grid-template-columns:minmax(0,1fr)}
  .diag-op{width:100%}
  .diag-plano{gap:16px}
  .diag-plano li{padding:9px 10px;font-size:12.5px}
  .diag-plano li + li::before{left:-13px;width:10px}
  .diag-plano li + li::after{left:-7px;width:5px;height:5px;top:calc(50% - 2.5px)}
  .diag-fim .btn{flex:1 1 100%}
}
@media (max-width:380px){.diag-ag-nome{font-size:10px}}

@media (prefers-reduced-motion:reduce){
  .diag-prog i.agora::after{transform:scaleX(.5)}
  .diag-etapa > .diag-q::after{opacity:1}
  .tem-agente .diag-ag-fila::after{opacity:0}
}