/* Barra de plataformas: plataformas sin activar (o suspendidas) en gris, con «Inactivo» arriba y «ACTIVAR» debajo. */
.pn.pn-off { --pc: #94A3B8; background: color-mix(in srgb, var(--surface, #fff) 70%, #E5E7EB); border-style: dashed; color: var(--muted, #5B6080); }
.pn.pn-off .pn-ico { background: #A1A1AA; box-shadow: none; }
.pn.pn-off .pn-t { display: grid; gap: 1px; line-height: 1.2; }
.pn.pn-off .pn-t b { color: var(--muted, #5B6080); font-weight: 800; }
.pn.pn-off .pn-state { font-style: normal; font-size: .62rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; color: #8B8FA6; }
.pn.pn-off .pn-act { justify-self: start; margin-top: 2px; padding: 1px 11px; border-radius: 99px; font-size: .66rem; font-weight: 900; letter-spacing: .12em; color: #fff; background: var(--action, #4F46E5); transition: filter .2s; }
.pn.pn-off:hover { border-style: solid; border-color: var(--action, #4F46E5); } .pn.pn-off:hover .pn-act { filter: brightness(1.12); } .pn.pn-off:hover .pn-ico { background: var(--action, #4F46E5); }
.pn.pn-off.is-sus { background: color-mix(in srgb, #FEE2E2 55%, var(--surface, #fff)); border-color: #FCA5A5; } .pn.pn-off.is-sus .pn-state { color: #B91C1C; } .pn.pn-off.is-sus .pn-act { background: #B91C1C; }
@media (prefers-color-scheme: dark) { .pn.pn-off { background: color-mix(in srgb, var(--surface, #171B36) 80%, #475569); } }