/* En vivo · consola de camaras. Misma paleta que el mapa vivo: fondo profundo, turquesa, verde y ambar. */
#streaming .ls-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; height: 100%; min-height: 0; background: #071218; }
#streaming .ls-panel .panel-header { margin-bottom: 0; }
#streaming .ls-panel .panel-header p { margin: 2px 0 0; font-size: 12px; }
.ls-pill { background: #0b2a33; color: #96f0d6; border: 1px solid #306771; white-space: nowrap; }
.ls-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); gap: 12px; min-height: 0; }
/* Above 1180px each view gets exactly the viewport height, so the main feed absorbs the free space. */
.ls-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 8px; min-width: 0; min-height: 0; background: #071218; }
.ls-stage[data-layout=grid] { grid-template-rows: minmax(0, 1fr) auto auto; }
.ls-stage:fullscreen { padding: 12px; }
.ls-feed { position: relative; min-width: 0; aspect-ratio: 16 / 9; background: #030b10; border: 1px solid #1d4550; overflow: clip; container-type: size; }
.ls-feed.is-main, .ls-grid .ls-feed { height: 100%; width: auto; max-width: 100%; min-height: 0; justify-self: center; }
.ls-feed:not(.is-main) { cursor: pointer; }
.ls-feed:not(.is-main):focus-visible, .ls-feed.is-selected:not(.is-main) { outline: 2px solid #ffca73; outline-offset: -2px; }
.ls-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-hud { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; pointer-events: none; font: 12px var(--font-mono, monospace); color: #e8fbff; text-shadow: 0 1px 2px #000; }
.ls-hud-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ls-hud-row strong { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ls-hud time { font-variant-numeric: tabular-nums; }
.ls-badge { padding: 2px 7px; background: #0b2a33e6; border: 1px solid #306771; color: #a6efdf; font-size: 11px; white-space: nowrap; }
.ls-badge.is-live { color: #8dffb8; border-color: #47e686; }
.ls-badge.is-off { color: #ffca73; border-color: #ffca73; }
.ls-rec { margin-left: auto; color: #ff7f8c; white-space: nowrap; }
/* Small tiles: tighter text; the clock stays on the larger feeds. */
@container (max-width: 340px) {
  .ls-hud { padding: 4px 6px; font-size: 10px; }
  .ls-hud-row { gap: 5px; }
  .ls-badge { padding: 1px 4px; font-size: 9px; }
  .ls-hud time { display: none; }
}
.ls-paused { position: absolute; inset: 0; display: grid; place-items: center; background: #030b10cc; color: #ffca73; font: 600 14px var(--font-mono, monospace); }
.ls-strip, .ls-grid { display: grid; gap: 8px; }
.ls-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-strip .ls-hud { padding: 4px 6px; font-size: 10px; }
.ls-strip .ls-hud-row:last-child, .ls-strip .ls-badge, .ls-strip time { display: none; }
.ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; }
.ls-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-controls button, .ls-url button { padding: 7px 12px; background: #0b2028; border: 1px solid #306771; color: #d7faf2; font: 12px var(--font-body, sans-serif); cursor: pointer; }
.ls-controls button[aria-pressed=true] { color: #ff9aa4; border-color: #ff7f8c; }
.ls-controls button:disabled, .ls-url button:disabled { opacity: .45; cursor: not-allowed; }
.ls-note { margin: 0; font-size: 11px; line-height: 1.45; color: #86a3aa; }
.ls-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; max-height: 100%; background: #0a1a21; border: 1px solid #1d4550; padding: 10px; align-self: start; }
.ls-tabs { display: flex; gap: 2px; }
.ls-tabs button { flex: 1; min-width: 0; padding: 6px 2px; font: 12px var(--font-body, sans-serif); color: #9ebdc6; border: 0; border-bottom: 2px solid transparent; background: #0b2028; cursor: pointer; }
.ls-tabs button[aria-pressed=true] { color: #96f0d6; border-color: #96f0d6; }
.ls-side-body { display: grid; gap: 10px; align-content: start; min-width: 0; min-height: 0; overflow-y: auto; }
.ls-camera-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ls-camera-list button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; background: #0b2028; border: 1px solid #1d4550; color: #d7faf2; cursor: pointer; }
.ls-camera-list button[aria-pressed=true] { border-color: #ffca73; }
.ls-camera-list strong { font-size: 13px; }
.ls-camera-list span { font-size: 11px; color: #86a3aa; }
.ls-field { display: grid; gap: 4px; font-size: 12px; color: #9ebdc6; }
.ls-field select, .ls-url input { min-height: 34px; padding: 5px 8px; background: #061820; border: 1px solid #306771; color: #e8fbff; font: 13px var(--font-body, sans-serif); min-width: 0; }
.ls-url { display: flex; gap: 6px; }
.ls-url input { flex: 1; }
.ls-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ls-log li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid #1d4550; font-size: 12px; }
.ls-log time { color: #ffca73; font: 11px var(--font-mono, monospace); }
.ls-log span { color: #86a3aa; }
/* At 1180px and below the page scrolls, so feeds keep their own 16:9 height. */
@media (max-width: 1180px) {
  #streaming .ls-panel { height: auto; }
  .ls-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ls-stage, .ls-stage[data-layout=grid] { grid-template-rows: none; }
  .ls-feed.is-main, .ls-grid .ls-feed { height: auto; width: 100%; }
  .ls-grid { grid-template-rows: none; }
  .ls-side { max-height: none; }
}
@media (max-width: 760px) {
  #streaming .ls-panel { padding: 10px; }
  #streaming .ls-panel .panel-header { flex-wrap: wrap; gap: 6px; }
  .ls-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-hud { font-size: 11px; padding: 6px 8px; }
  .ls-controls button { flex: 1 1 calc(50% - 6px); }
}