/* Portal Vifer v3 · Mapa vivo. Tres columnas (entra, tu equipo, resultado) sobre un lienzo donde circulan los
   eventos; en el movil, tres filas. Los nodos son enlaces; el lienzo es decorativo. */
.lmap { position: relative; display: grid; gap: 10px; padding: 18px 18px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-xl); background:
  radial-gradient(70% 90% at 50% 50%, rgba(0, 194, 209, 0.07), transparent 70%),
  linear-gradient(rgba(var(--ink-rgb), 0.025) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(var(--ink-rgb), 0.025) 1px, transparent 1px) 0 0 / 28px 28px,
  var(--surface-1); overflow: hidden; }
.lmap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), 0.04); }
.lmap__stage { position: relative; }
.lmap__cv { position: absolute; inset: 0; pointer-events: none; }
.lmap__cols { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(40px, 8vw, 130px); align-items: center; }
.lmap__col { display: grid; gap: 8px; align-content: center; }
.lmap__col--mid { gap: 10px; }
.lmap__h { margin-bottom: 2px; color: var(--fg-dim); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.lmap__n { --nh: var(--cyan); position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: rgba(var(--paper-rgb), 0.92); color: var(--fg); font-size: 13px; line-height: 1.25; transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
a.lmap__n:hover { color: var(--fg); border-color: var(--nh); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--nh), 0 8px 24px rgba(16, 24, 40, 0.12); }
.lmap__n--mid { min-height: 50px; border-color: color-mix(in srgb, var(--nh) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--nh) 14%, rgba(var(--paper-rgb), 0.95)), rgba(var(--paper-rgb), 0.95) 70%); }
.lmap__ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--nh) 16%, transparent); color: var(--nh); }
.lmap__nt { display: grid; flex: 1; min-width: 0; }
.lmap__nt b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.lmap__ns { overflow: hidden; color: var(--fg-dim); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.lmap__c { flex: none; min-width: 34px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--fg); font-size: 11.5px; text-align: center; }
.lmap__n--out.is-good .lmap__ico { background: rgba(77, 213, 153, 0.14); color: var(--success); }
.lmap__n--out.is-warn .lmap__ico, .lmap__n.is-warn .lmap__ico { background: rgba(240, 179, 74, 0.14); color: var(--warning); }
.lmap__n.is-bad { border-color: rgba(255, 93, 93, 0.45); }
.lmap__n.is-bad .lmap__ico { background: rgba(255, 93, 93, 0.14); color: var(--danger); }
.lmap__n.is-ghost { border-style: dashed; opacity: 0.75; background: rgba(var(--paper-rgb), 0.7); }
.lmap__n.is-paused { opacity: 0.6; }
.lmap__n.is-paused .lmap__c::before { content: "II "; color: var(--warning); }
.lmap__n.is-bump { animation: nbump 520ms var(--ease-out); }
.lmap__n.is-bump .lmap__c { animation: cbump 520ms var(--ease-out); }
@keyframes nbump { 30% { transform: scale(1.035); box-shadow: 0 0 0 1px var(--nh), 0 0 22px color-mix(in srgb, var(--nh) 45%, transparent); } }
@keyframes cbump { 30% { background: var(--cyan); color: var(--fg-on-cyan); } }
.lmap__tick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-subtle); color: var(--fg-muted); font-size: 11.5px; letter-spacing: 0.02em; }
.lmap__tick b { color: var(--fg); font-weight: 500; }
.lmap__live { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(77, 213, 153, 0.6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(77, 213, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(77, 213, 153, 0); } }
.lmap--diagnostico .lmap__col--mid .lmap__n { border-color: rgba(240, 179, 74, 0.45); background: rgba(240, 179, 74, 0.07); }
@media (max-width: 639px) {
  .lmap { padding: 14px 12px 12px; }
  .lmap__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lmap__col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lmap__h { grid-column: 1 / -1; }
  .lmap__col--mid { grid-template-columns: minmax(0, 1fr); }
  .lmap__n { min-height: 40px; padding: 7px 10px; font-size: 12.5px; }
  .lmap__ns { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lmap__n.is-bump, .lmap__n.is-bump .lmap__c, .lmap__live { animation: none; } }