/* Admin · Marcador → Datos para vMix (partido al aire, enlaces y fotos). */

.broadcast-card { margin-top: 18px; }

.broadcast-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin-top: 14px;
}

.broadcast-body[hidden] { display: none; }

.broadcast-section { display: grid; gap: 10px; align-content: start; min-width: 0; }
.broadcast-section:last-child { grid-column: 1 / -1; }
.broadcast-section h3 { margin: 0; font-size: 1rem; }
.broadcast-section .hint { margin: 0; }

.broadcast-now {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  color: var(--text);
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.broadcast-now:empty { display: none; }

.broadcast-links { display: grid; gap: 8px; }

.broadcast-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
}

.broadcast-link strong { font-size: .86rem; }
.broadcast-link code {
  grid-column: 1;
  color: var(--primary);
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.broadcast-link button { grid-row: 1 / span 2; grid-column: 2; }

.broadcast-pair-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.broadcast-pair {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .18);
}

.broadcast-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(152, 217, 0, .18), rgba(0, 0, 0, .35) 70%);
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.broadcast-photo img { width: 100%; height: 100%; object-fit: contain; }

.broadcast-pair-info { display: grid; gap: 8px; padding: 10px 12px 12px; }
.broadcast-pair-name { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.broadcast-pair-state { margin: 0; color: var(--muted); font-size: .8rem; }
.broadcast-pair-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .broadcast-body { grid-template-columns: minmax(0, 1fr); }
  .broadcast-pair-list { grid-template-columns: minmax(0, 1fr); }
}