/* Switcher: layout de página y estilos del panel de visión (js/vision/ui.js). Los tokens y
   componentes compartidos (cabecera, tarjetas, botones, medidor) están en base.css. */

main.switcher {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Tarjetas de stream ---------- */

#streamsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.stream-card { display: flex; flex-direction: column; }
.stream-card > h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#addStreamBtn { align-self: center; }

/* ---------- Tarjeta "On air" ---------- */

.onair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: start;
}
.onair h2 { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.onair h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(217, 48, 37, .2);
}
.onair .video-wrap { box-shadow: 0 0 0 3px rgba(66, 133, 244, .7); }
#forwardButtons { display: flex; flex-direction: column; gap: 8px; }
#forwardButtons .btn { text-align: left; }

/* ---------- Paneles globales de visión ---------- */

#visionPanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
#visionPanel .card { font-size: 13px; min-width: 0; }
#visionPanel .row {
  margin: 6px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}
#visionPanel small { font-size: 11px; color: var(--ink-2); }
#visionPanel .kv { display: block; margin: 3px 0; }
#visionPanel input[type="number"] { width: 70px; }
#visionPanel input[type="range"] { width: 90px; vertical-align: middle; }
#visionPanel b { font-weight: 600; }

.cls-list {
  max-height: 160px;
  overflow-y: auto;
  columns: 2;
  background: rgba(255, 255, 255, .45);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.cls-item { display: block; font-size: 12px; }

.rule {
  border: 1px solid rgba(23, 32, 38, .15);
  border-radius: 9px;
  padding: 6px 10px;
  margin: 6px 0;
  background: rgba(255, 255, 255, .35);
}
.rule button {
  cursor: pointer;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .55);
}
#rulesPanel .row > button {
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .55);
}
#rulesPanel .row > button:hover, .rule button:hover { filter: brightness(1.05); }

.not-cand, .decision-log { margin: 4px 0 8px; padding-left: 18px; color: var(--ink-2); }
.decision-log { max-height: 180px; overflow-y: auto; font-size: 12px; }

/* ---------- Visión por stream (dentro de .vision-slot) ---------- */

.vision-stream { font-size: 12px; margin-top: 10px; min-width: 0; }
.vs-bars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; border-radius: 4px; }
.vs-bars.stale { opacity: .45; }
.vs-bars.pulse { animation: vs-pulse .8s ease-out; }
@keyframes vs-pulse {
  0% { box-shadow: 0 0 0 3px var(--warn); }
  100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0); }
}
.bar-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-bars .bar-track { margin-top: 2px; }
.vs-line { padding: 3px 8px; border-radius: 7px; margin: 3px 0; overflow-wrap: anywhere; }
.src-remote { background: rgba(27, 138, 76, .16); color: var(--ok-ink); }
.src-local { background: rgba(66, 133, 244, .16); color: #153e86; }
.src-none { background: rgba(23, 32, 38, .08); color: var(--ink-2); }
.vs-chips { min-height: 4px; }
.vs-over { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; color: var(--ink-2); }
.eff { color: var(--ok-ink); }
.eff.limited { color: #b7410e; font-weight: 600; }

@media (max-width: 900px) {
  .onair { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  main.switcher { padding: 14px 16px 32px; gap: 12px; }
  #streamsContainer { grid-template-columns: 1fr; }
  .cls-list { columns: 1; }
}