/* =========================================================================
   digital-twin.css — Fase 5. Depende de design-system.css.
   ========================================================================= */
.twin-wrap { padding-top: calc(var(--header-h) + 30px); padding-bottom: 60px; }
.twin-resumo { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1.4rem; }

.twin-stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stroke);
  height: 64vh; min-height: 440px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/40px 40px,
    radial-gradient(80% 100% at 50% 0%, rgba(0,112,184,.1), transparent 55%),
    var(--bg-900);
}
.twin-floor { position:absolute; inset:8% 6%; border:1px dashed var(--stroke-strong); border-radius:14px; }
.twin-floor::after { content:'CHÃO DE FÁBRICA · GÊMEO DIGITAL'; position:absolute; top:10px; left:14px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; color:var(--text-dim); }

#twin-layer { position:absolute; inset:0; }
.twin-node {
  position:absolute; transform:translate(-50%,-50%); background:var(--bg-700);
  border:1px solid var(--c); border-radius:12px; padding:.5rem .6rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.1rem; min-width:64px;
  transition: transform .25s var(--ease), box-shadow .25s; z-index:2;
}
.twin-node:hover { transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 0 1px var(--c), 0 0 22px color-mix(in srgb,var(--c) 50%,transparent); z-index:3; }
.twin-node__ic { font-size:1.4rem; }
.twin-node__tag { font-family:var(--font-mono); font-size:.66rem; color:var(--text-soft); }
.twin-node__pulse { position:absolute; inset:-4px; border-radius:14px; border:2px solid var(--c); opacity:0; }
.twin-node--critico .twin-node__pulse { animation:twinpulse 1.6s infinite; }
.twin-node--alerta .twin-node__pulse { animation:twinpulse 2.6s infinite; }
@keyframes twinpulse { 0%{opacity:.7;transform:scale(1)} 100%{opacity:0;transform:scale(1.5)} }

/* painel de detalhe */
.twin-detail {
  position:absolute; top:14px; right:14px; width:min(340px,86vw); z-index:5;
  background:var(--bg-800); border:1px solid var(--stroke); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); padding:18px; max-height:calc(100% - 28px); overflow:auto;
  opacity:0; pointer-events:none; transform:translateX(12px); transition:all .3s var(--ease);
}
.twin-detail.is-open { opacity:1; pointer-events:auto; transform:none; }
.twin-detail__head { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.twin-detail__head .ic { font-size:1.8rem; }
.twin-detail__head h3 { margin:0; font-size:1.2rem; }
.twin-detail__head .tp { color:var(--text-dim); font-size:.8rem; }
#twin-d-close { margin-left:auto; background:none; border:0; color:var(--text-dim); font-size:1.4rem; cursor:pointer; }
.twin-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:.8rem 0; }
.twin-kpi { background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius-sm); padding:.5rem .7rem; }
.twin-kpi span { display:block; font-size:.68rem; color:var(--text-dim); letter-spacing:.06em; }
.twin-kpi b { font-family:var(--font-display); font-size:1.1rem; }
.twin-detail h5 { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin:1rem 0 .4rem; }
.twin-detail ul { margin:0; padding-left:1.1rem; color:var(--text-soft); font-size:.85rem; display:grid; gap:.3rem; }
.twin-detail ul.clean { list-style:none; padding:0; }

.twin-legend { position:absolute; left:14px; bottom:14px; display:flex; gap:.8rem; z-index:4; }
.twin-legend .lg { display:flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--text-soft); }
.twin-legend .dot { width:10px; height:10px; border-radius:50%; }
@media (max-width:620px){ .twin-stage { height:72vh; } }