:root{color-scheme:dark;--bg:#050a0f;--panel:#0c1720;--line:#263b4a;--text:#f3f7fa;--muted:#8da2b1;--blue:#67b6ff;--green:#59df92;--red:#ff7c82;--yellow:#f0c968;--purple:#b095ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% -10%,rgba(50,115,170,.16),transparent 30%),linear-gradient(180deg,#071018,#050a0f);color:var(--text);font:14px system-ui}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 4vw;background:#071018e8;border-bottom:1px solid #ffffff0d;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border:1px solid #365266;border-radius:13px;background:#10212d;font-weight:900}.brand small,.section-title small,.dialog-head small{color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.14em}.brand h1{margin:2px 0;font-size:25px}.brand h1 span{color:#748a99;font-size:15px}.brand p{margin:0;color:var(--muted);font-size:11px}.top-actions,.actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}button,.button{padding:8px 11px;border:1px solid #345064;border-radius:9px;background:#122431;color:white;cursor:pointer;font:inherit;text-decoration:none}.primary{background:#e6f2fa;color:#071018;border-color:transparent}.pill{padding:7px 10px;border:1px solid #3d5260;border-radius:999px;font-size:11px}.pill.connected{color:var(--green)}.pill.disconnected{color:var(--red)}main{padding:23px 4vw 60px}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.summary article{padding:14px;border:1px solid #203541;border-radius:13px;background:linear-gradient(150deg,#101e29,#0a141c)}.summary small{display:block;color:var(--muted);font-size:10px;font-weight:800}.summary b{display:block;font-size:27px}.summary span{color:#607684;font-size:10px}.health{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0 18px;padding:9px;border:1px solid #ffffff0d;border-radius:11px;background:#ffffff05}.health div{font-size:11px;color:var(--green)}.health b{color:#9eb1bd;font-weight:600}.toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:23px}.toolbar input{flex:1;max-width:610px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{border-radius:999px;background:transparent;color:var(--muted);font-size:11px}.filter.active{background:#142735;color:white}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:11px}.section-title h2{margin:2px 0;font-size:17px}.section-title span{color:var(--muted);font-size:11px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:13px}.card{border:1px solid #213743;border-radius:15px;background:linear-gradient(150deg,#0f1d27,#09131a);overflow:hidden}.cardhead{display:flex;justify-content:space-between;gap:12px;padding:14px 14px 10px}.chips{display:flex;gap:6px}.mode,.status{padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900}.mode.ffmpeg{color:#d9d1ff;background:#b095ff12;border:1px solid #b095ff28}.mode.direct{color:#cce8ff;background:#67b6ff12;border:1px solid #67b6ff28}.mode.external{color:#ccd6dc;background:#ffffff0a;border:1px solid #ffffff10}.status.online{color:var(--green);background:#59df9210}.status.offline{color:var(--red);background:#ff7c8210}.card h3{margin:8px 0 2px}.card p{margin:0;color:var(--muted);font-size:11px}.play{width:42px;height:42px;border-radius:50%}.monitor{position:relative;min-height:120px;margin:0 14px;display:grid;place-content:center;text-align:center;border:1px solid #1d3340;border-radius:10px;background:radial-gradient(circle,#142532,#061018)}.scan{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:26px 26px}.monitor b,.monitor span{position:relative}.monitor b{color:#7f94a2}.monitor span{color:#536a78;font-size:10px}.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px}.tech div{min-width:0;padding:8px;border:1px solid #ffffff0b;border-radius:8px;background:#ffffff05}.tech small,.detailcards small,.pipeline small{display:block;color:#617886;font-size:8px;font-weight:900}.tech b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}.pipeline{display:flex;align-items:center;gap:5px;padding:0 14px 10px;overflow:auto;color:#587080}.pipeline div{flex:1;min-width:72px;padding:7px;text-align:center;border:1px solid #ffffff0b;border-radius:8px;background:#ffffff05}.pipeline b{display:block;font-size:9px;color:#b8c9d3;white-space:nowrap}.pipeline .accent{background:#67b6ff0c;border-color:#67b6ff22}.pipeline .process{background:#b095ff0c;border-color:#b095ff22}.runtimebar{display:grid;grid-template-columns:1.5fr repeat(3,auto);gap:9px;margin:0 14px 10px;padding:8px 10px;border-radius:8px;font-size:10px}.runtimebar.running{background:#59df920b;border:1px solid #59df9222}.runtimebar.stopped{background:#ff7c820b;border:1px solid #ff7c8222}.runtimebar.running b{color:var(--green)}.runtimebar.stopped b{color:var(--red)}.card>.actions{padding:0 14px 14px}.card>.actions button{padding:6px 9px;font-size:10px}.danger{color:#ffb5b8;border-color:#ff7c8233}.success{color:#bff5d3;border-color:#59df9233}input{width:100%;padding:10px;border:1px solid #304a5a;border-radius:8px;background:#071119;color:white}dialog{width:min(850px,94vw);max-height:92vh;overflow:auto;padding:18px;border:1px solid #304a5a;border-radius:15px;background:#09141d;color:white}dialog::backdrop{background:#000c;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;gap:18px}.dialog-head h2{margin:3px 0}.dialog-head p{color:var(--muted);font-size:11px}.dialog-head>button{width:36px;height:36px;padding:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}label{display:block;margin:10px 0;font-size:11px}.check{display:flex;gap:7px;align-items:center}.check input{width:auto}.probe{display:flex;gap:9px;align-items:center;margin-top:10px;padding:10px;border:1px solid #263c49;border-radius:9px}.probe div{color:var(--muted);font-size:11px}.meta{margin:10px 0;color:var(--muted);font-size:11px}.links{display:grid;gap:6px}.detailcards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.detailcards div{padding:9px;border:1px solid #ffffff0b;border-radius:8px;background:#ffffff05}.detailcards b{display:block;font-size:11px}.runtimehero{display:flex;justify-content:space-between;padding:10px;border-radius:9px}.runtimehero.running{background:#59df920b;border:1px solid #59df9222}.runtimehero.stopped{background:#ff7c820b;border:1px solid #ff7c8222}video{width:100%;background:black;aspect-ratio:16/9;border-radius:10px}pre{white-space:pre-wrap;max-height:55vh;overflow:auto;padding:12px;border:1px solid #213744;border-radius:8px;background:#050c12;color:#b8c8d2;font:11px monospace}@media(max-width:900px){.summary{grid-template-columns:1fr 1fr}.health{grid-template-columns:1fr 1fr}}@media(max-width:700px){.topbar{position:relative;flex-direction:column;align-items:flex-start}.toolbar{flex-direction:column}.filters{overflow:auto;flex-wrap:nowrap}.grid{grid-template-columns:1fr}.tech{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.detailcards{grid-template-columns:1fr 1fr}}
/* =========================================================
   TVABIERTA MEDIA CONSOLE V3.1
   MASTER + REALTIME ARCHITECTURE
   ========================================================= */

.branches{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px 14px 4px;
}

.branch{
  min-width:0;
  padding:11px;
  border:1px solid #ffffff10;
  border-radius:11px;
  background:#ffffff04;
}

.master-branch{
  border-color:#67b6ff22;
  background:linear-gradient(145deg,#67b6ff0a,#ffffff03);
}

.realtime-branch{
  border-color:#b095ff2d;
  background:linear-gradient(145deg,#b095ff0c,#ffffff03);
}

.branch-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.branch-head small{
  display:block;
  margin-bottom:3px;
  color:var(--blue);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.realtime-branch .branch-head small{
  color:var(--purple);
}

.branch-head b{
  display:block;
  font-size:11px;
}

.branch-state{
  flex:none;
  padding:4px 6px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
}

.branch-state.online{
  color:var(--green);
  background:#59df9210;
}

.branch-state.offline{
  color:var(--red);
  background:#ff7c8210;
}

.branch-media{
  display:grid;
  gap:6px;
}

.branch-media>div{
  min-width:0;
  padding:7px;
  border:1px solid #ffffff0b;
  border-radius:7px;
  background:#00000012;
}

.branch-media small{
  display:block;
  color:#617886;
  font-size:7px;
  font-weight:900;
}

.branch-media b{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  color:#c6d5de;
}

.output-row{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:8px;
}

.output-badge{
  padding:4px 6px;
  border-radius:6px;
  font-size:8px;
  font-weight:800;
}

.output-badge.enabled{
  color:#bff5d3;
  border:1px solid #59df9228;
  background:#59df920a;
}

.output-badge.disabled{
  color:#6c7d87;
  border:1px solid #ffffff0b;
  background:#ffffff03;
}

.realtime-meta{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:8px;
}

.realtime-meta span{
  padding:4px 6px;
  border:1px solid #ffffff0b;
  border-radius:6px;
  color:#728895;
  font-size:8px;
}

.realtime-meta b{
  color:#bacbd5;
}

.technical-path{
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#536b79;
  font:8px monospace;
}

.compact-tech{
  grid-template-columns:repeat(4,1fr);
}

.webrtc-button{
  color:#ded6ff;
  border-color:#b095ff38;
  background:#b095ff0c;
}

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

  .compact-tech{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================================================
   CUSTOM PUSH · MEDIA CONSOLE V3.3
   ========================================================= */

.push-button{
  border-color:#67b6ff35;
  color:#cde8ff;
}

.push-dialog{
  width:min(980px,96vw);
}

.push-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:16px 0 10px;
  padding:12px;
  border:1px solid #ffffff0c;
  border-radius:11px;
  background:#ffffff04;
}

.push-toolbar small,
.push-runtime small,
.push-source-badge small{
  display:block;
  color:#617886;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.push-toolbar b{
  display:block;
  margin-top:3px;
  font-size:12px;
}

.push-list{
  display:grid;
  gap:9px;
  margin-bottom:14px;
}

.push-empty{
  display:grid;
  gap:5px;
  place-content:center;
  min-height:110px;
  padding:20px;
  text-align:center;
  border:1px dashed #294250;
  border-radius:11px;
  color:#718794;
}

.push-empty b{
  color:#b8c9d3;
}

.push-empty.error{
  color:var(--red);
}

.push-item{
  padding:12px;
  border:1px solid #263d4b;
  border-radius:12px;
  background:linear-gradient(145deg,#0d1a23,#081219);
}

.push-item.connected{
  border-color:#59df9228;
}

.push-item-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.push-item h3{
  margin:8px 0 3px;
}

.push-destination{
  margin:0;
  color:#718794;
  font:10px monospace;
  overflow-wrap:anywhere;
}

.push-protocol{
  padding:4px 7px;
  border:1px solid #b095ff2c;
  border-radius:999px;
  background:#b095ff0b;
  color:#dcd5ff;
  font-size:9px;
  font-weight:900;
}

.push-source-badge{
  flex:none;
  min-width:120px;
  padding:8px 10px;
  border:1px solid #67b6ff20;
  border-radius:9px;
  background:#67b6ff08;
}

.push-source-badge b{
  display:block;
  margin-top:4px;
  font-size:10px;
}

.push-runtime{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:7px;
  margin-top:10px;
}

.push-runtime span{
  min-width:0;
  padding:8px;
  border:1px solid #ffffff0a;
  border-radius:8px;
  background:#ffffff04;
}

.push-runtime b{
  display:block;
  margin-top:3px;
  font-size:10px;
}

.push-actions{
  margin-top:10px;
}

.push-form{
  margin:14px 0;
  padding:14px;
  border:1px solid #345064;
  border-radius:12px;
  background:#071119;
}

.push-form[hidden]{
  display:none !important;
}

.push-form-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.push-form-head small{
  color:var(--purple);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.push-form-head h3{
  margin:3px 0 8px;
}

.push-form-head button{
  width:34px;
  height:34px;
  padding:0;
}

.push-form select{
  width:100%;
  padding:10px;
  border:1px solid #304a5a;
  border-radius:8px;
  background:#071119;
  color:white;
}

.field-help{
  display:block;
  margin-top:5px;
  color:#617886;
  font-size:9px;
  overflow-wrap:anywhere;
}

.push-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:13px;
  flex-wrap:wrap;
}

@media(max-width:700px){
  .push-item-head{
    flex-direction:column;
  }

  .push-source-badge{
    width:100%;
  }

  .push-runtime{
    grid-template-columns:1fr;
  }

  .push-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================================================
   TVABIERTA - ESTADO OPERATIVO
   ========================================================= */

.operational {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;

  margin: 10px 0;
  padding: 9px 11px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;

  background: rgba(255,255,255,.025);

  font-size: 12px;
}

.operational span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: .9;
}

.operational b {
  font-weight: 700;
}

.operational.runtime-warning {
  border-color: rgba(255,180,0,.28);
}

.operational.restart-loop {
  border-color: rgba(255,70,70,.45);
  background: rgba(255,50,50,.055);
}

.operational .op-alert {
  font-weight: 800;
  letter-spacing: .02em;
}


/* ==========================================================
   TVABIERTA LIVE GATEWAY UI
   ========================================================== */

.live-gateway-panel {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #2e5669;
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      rgba(31, 70, 91, .35),
      rgba(8, 20, 29, .92)
    );
  transition:
    border-color .2s ease,
    opacity .2s ease,
    box-shadow .2s ease;
}

.live-gateway-panel.enabled {
  border-color: rgba(89, 223, 146, .55);
  box-shadow:
    0 0 0 1px rgba(89, 223, 146, .06),
    0 12px 35px rgba(0, 0, 0, .18);
}

.live-gateway-panel.unavailable {
  opacity: .72;
}

.live-gateway-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.live-gateway-heading small {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.live-gateway-heading strong {
  display: block;
  font-size: 15px;
}

.live-gateway-badge {
  padding: 5px 8px;
  border: 1px solid rgba(89, 223, 146, .3);
  border-radius: 999px;
  color: var(--green);
  background: rgba(89, 223, 146, .08);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}

.live-gateway-toggle {
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  font-weight: 700;
}

.live-gateway-toggle input:disabled {
  cursor: not-allowed;
}

.live-gateway-state {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.live-gateway-panel.enabled
.live-gateway-state {
  color: var(--green);
}

.live-gateway-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.live-gateway-result label {
  min-width: 0;
  margin: 0;
}

.live-gateway-result input {
  margin-top: 5px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  font-size: 10px;
}

.live-gateway-result button {
  height: 38px;
  white-space: nowrap;
}

.live-gateway-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.live-gateway-notes span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #9eb1bd;
  background: rgba(255, 255, 255, .04);
  font-size: 8px;
  font-weight: 800;
}

.live-gateway-panel.enabled
.live-gateway-notes span {
  color: #bff5d3;
  background: rgba(89, 223, 146, .07);
}

@media (max-width: 700px) {
  .live-gateway-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .live-gateway-result {
    grid-template-columns: 1fr;
  }

  .live-gateway-result button {
    width: 100%;
  }
}