/* ============================================================
   OLC · Signal Intelligence — ADN visual
   Componentes: Radiografía Cloud (diagnostic UI) + Home Hero
   Autocontenido. No modifica styles.css. Vanilla, sin librerías.
   Paleta heredada de :root en styles.css (--lime --cyan --navy --teal)
   ============================================================ */
:root{
  --sig-lime:#ABE200; --sig-cyan:#10ACDE; --sig-navy:#070D1A; --sig-teal:#0E5966;
  --sig-mesh:rgba(16,172,222,.06); --sig-line:rgba(16,172,222,.16);
  --sig-amber:#FFC83C; --sig-dim:#7E94B3;
}

/* ---------- Malla de profundidad (fondo compartido) ---------- */
.sig-stage{position:relative;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(16,172,222,.08), transparent 55%),
    radial-gradient(90% 70% at 20% 90%, rgba(171,226,0,.045), transparent 60%),
    linear-gradient(180deg,#0A1424,#070D18);
  border:1px solid var(--sig-line);
  box-shadow:0 30px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
}
.sig-stage::before{ /* depth grid */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--sig-mesh) 1px,transparent 1px),
    linear-gradient(90deg,var(--sig-mesh) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 60% 30%,#000 30%,transparent 85%);
          mask-image:radial-gradient(120% 100% at 60% 30%,#000 30%,transparent 85%);
  opacity:.7;
}
.sig-grain{position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Radiografía · Diagnostic UI ---------- */
.diag{--scan:0;position:relative;padding:0;min-height:420px;font-family:var(--mono,'IBM Plex Mono',monospace)}
.diag-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--sig-line);
  background:rgba(255,255,255,.02);position:relative;z-index:3}
.diag-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.diag-bar i:first-child{background:rgba(255,90,90,.55)}
.diag-bar .ttl{font-size:11px;letter-spacing:1.5px;color:var(--sig-dim);text-transform:uppercase}
.diag-bar .state{margin-left:auto;font-size:10.5px;letter-spacing:1px;color:var(--sig-cyan);
  display:flex;align-items:center;gap:7px}
.diag-bar .state .dot{width:7px;height:7px;border-radius:50%;background:var(--sig-cyan);
  box-shadow:0 0 8px var(--sig-cyan);animation:sig-pulse 1.6s ease-in-out infinite}

.diag-body{position:relative;padding:26px 24px 22px;min-height:340px}

/* Infra map (SVG) */
.diag-map{width:100%;height:auto;display:block}
.diag-node{fill:#0E1D31;stroke:var(--sig-line);stroke-width:1.2;transition:fill .35s,stroke .35s}
.diag-node.hit{fill:rgba(16,172,222,.12);stroke:var(--sig-cyan)}
.diag-node.sig{fill:rgba(171,226,0,.14);stroke:var(--sig-lime)}
.diag-link{stroke:rgba(16,172,222,.22);stroke-width:1;fill:none;transition:stroke .35s}
.diag-link.on{stroke:rgba(16,172,222,.5)}
.diag-scan{stroke:var(--sig-cyan);stroke-width:2;opacity:.9;filter:drop-shadow(0 0 6px var(--sig-cyan))}
.diag-sigmark{fill:var(--sig-lime);opacity:0;transform-box:fill-box;transform-origin:center}
.diag-sigmark.show{opacity:1;animation:sig-ping 1.8s ease-out infinite}

/* Readout lateral (estados conceptuales, sin cifras) */
.diag-read{position:absolute;top:22px;right:22px;width:210px;max-width:42%;
  display:flex;flex-direction:column;gap:8px;z-index:4}
.diag-step{border:1px solid var(--sig-line);border-radius:7px;padding:9px 12px;
  background:rgba(10,20,36,.72);backdrop-filter:blur(4px);
  opacity:.32;transform:translateX(8px);transition:opacity .4s,transform .4s,border-color .4s}
.diag-step.on{opacity:1;transform:none;border-color:rgba(16,172,222,.4)}
.diag-step.val.on{border-color:rgba(171,226,0,.5);background:rgba(171,226,0,.06)}
.diag-step .k{font-size:9px;letter-spacing:1.5px;color:var(--sig-dim);text-transform:uppercase;display:block;margin-bottom:3px}
.diag-step .v{font-size:13px;color:#fff;margin-top:2px;font-weight:500}
.diag-step.val .v{color:var(--sig-lime)}
.diag-step .tag{display:inline-block;font-size:9px;letter-spacing:1px;padding:1px 7px;border-radius:10px;margin-top:4px;
  background:rgba(16,172,222,.14);color:var(--sig-cyan)}
.diag-step.val .tag{background:rgba(171,226,0,.16);color:var(--sig-lime)}

/* Footer conceptual */
.diag-foot{position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  padding:13px 20px;border-top:1px solid var(--sig-line);background:rgba(255,255,255,.015);
  font-size:11.5px;color:var(--sig-dim);letter-spacing:.5px}
.diag-foot .phase{display:flex;gap:6px;align-items:center}
.diag-foot .phase b{color:var(--sig-cyan);font-weight:600}
.diag-foot .decide{margin-left:auto;color:var(--sig-lime);font-weight:600;opacity:0;transition:opacity .5s}
.diag-foot .decide.on{opacity:1}

@keyframes sig-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sig-ping{0%{opacity:1}70%{opacity:.4}100%{opacity:0}}

/* ---------- Home Hero · conceptual (Complejidad→Claridad→Negocio) ---------- */
.sighero{position:relative;width:100%;height:100%;min-height:340px}
.sighero svg{width:100%;height:100%;display:block}
.shx-node{fill:rgba(16,172,222,.35)}
.shx-node.faint{fill:rgba(16,172,222,.14)}
.shx-flow{stroke:rgba(16,172,222,.28);stroke-width:1;fill:none}
.shx-route{stroke:var(--sig-lime);stroke-width:2;fill:none;filter:drop-shadow(0 0 5px rgba(171,226,0,.5))}
.shx-label{fill:var(--sig-dim);font-family:var(--mono,monospace);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.shx-label.biz{fill:var(--sig-lime)}
.shx-scan{stroke:var(--sig-cyan);stroke-width:1.5;opacity:.55;filter:drop-shadow(0 0 5px var(--sig-cyan))}
.shx-chip{fill:rgba(10,20,36,.85);stroke:var(--sig-line)}

/* ---------- reduced motion: todo al estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .diag-bar .state .dot,.diag-sigmark.show{animation:none!important}
  .diag-step{opacity:1!important;transform:none!important}
  .diag-foot .decide{opacity:1!important}
  .sig-stage::before{opacity:.5}
}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .diag-body{min-height:auto;padding:18px 16px}
  .diag-read{position:static;width:100%;max-width:100%;margin-top:14px;flex-direction:row;flex-wrap:wrap}
  .diag-step{flex:1 1 45%;transform:none}
  .diag-map{max-height:220px}
  .diag-foot{flex-wrap:wrap;gap:6px}
  .sighero{min-height:260px}
}
@media(max-width:420px){
  .diag-read{flex-direction:column}
  .diag-step{flex:1 1 100%}
}