/* Iconos de acceso remoto: el cliente pulsa SOLO el de su aparato. */
.os-pick{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;
  font-size:.98rem;
  margin:10px 0 12px;
  letter-spacing:-.01em;
}
.os-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.os-i{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:72px;
  padding:10px 8px 8px;
  background:var(--paper-2, #fff);
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
}
.os-i svg{width:32px;height:32px;display:block}
.os-i b{font-family:"Archivo",system-ui,sans-serif;font-size:.72rem;font-weight:800}
.os-i.mine{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
  background:var(--accent-wash);
}
.os-i.mine::after{
  content:attr(data-mine);
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-ink);
}

.os-chooser{margin:0 0 8px}
.os-lead{color:var(--muted);margin:0 0 16px;max-width:58ch}
.os-lead strong{color:var(--ink)}
.os-guess{
  display:none;
  background:var(--accent-wash);
  border:2px solid var(--accent);
  border-radius:14px;
  padding:14px 16px;
  margin:0 0 18px;
}
.os-guess.on{display:block}
.os-guess b{font-family:"Archivo",system-ui,sans-serif;display:block;font-size:1.12rem;margin:0 0 4px}
.os-guess p{margin:0;color:var(--muted);font-size:1rem}

.os-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  align-items:stretch;
}
@media(max-width:900px){.os-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.os-grid{grid-template-columns:1fr}}

.os-card{
  background:var(--paper-2, var(--surface, #fff));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 14px 14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}
.os-card.mine{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash), var(--shadow);
  background:var(--accent-wash);
}
.os-card .badge{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:var(--accent);
  border-radius:999px;
  padding:3px 8px;
  align-self:flex-start;
}
.os-card:not(.mine) .badge{display:none}
.os-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
  font:inherit;
  width:100%;
}
.os-head svg{width:48px;height:48px;display:block}
.os-head b{font-family:"Archivo",system-ui,sans-serif;font-size:1.05rem;font-weight:800}
.os-head span{font-size:.82rem;color:var(--muted);line-height:1.35}
.os-dls{display:none;flex-direction:column;gap:8px;margin-top:4px}
.os-card.open .os-dls,
.os-card.mine .os-dls,
.os-card[data-single] .os-dls{display:flex}
.os-dls a,
a.os-dl{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--paper, #F5F5F5);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  text-align:left;
}
.os-card.mine .os-dls a{background:var(--paper-2, #fff)}
.os-dls a:hover,
a.os-dl:hover{border-color:var(--accent)}
.os-dls a.preferred,
a.os-dl.preferred{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.os-dls a.preferred b,
a.os-dl.preferred b{color:#fff}
.os-dls a.preferred span,
a.os-dl.preferred span{color:rgba(255,255,255,.88)}
.os-dls b,
a.os-dl b{display:block;font-family:"Archivo",system-ui,sans-serif;font-size:.92rem}
.os-dls span,
a.os-dl span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}

.os-cfg{display:grid;gap:10px;margin:12px 0 0}
.os-row{
  background:var(--paper-2, var(--surface, #fff));
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.os-row label{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  display:block;
}
.os-row code{font-family:"IBM Plex Mono",monospace;font-size:.92rem;word-break:break-all}
button.os-copy{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:700;
  border:0;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}

.ad.leader .leader-remote{width:100%}
.ad.leader .leader-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  width:100%;
}
.ad .os-pick{margin:4px 0 10px;font-size:.92rem}
.rail-card .os-strip{margin-top:12px}
.rail-card .os-i{min-width:56px;padding:8px 6px}
.rail-card .os-i b{font-size:.65rem}

.tech-fold{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:8px 16px 16px;
  margin:28px 0 8px;
  background:transparent;
}
.tech-fold summary{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;
  cursor:pointer;
  padding:12px 0;
  color:var(--muted);
}
.tech-fold[open] summary{color:var(--ink)}
.tech-fold p,.tech-fold ol{color:var(--muted)}
.tech-fold code{font-family:"IBM Plex Mono",monospace;font-size:.9rem}