/* KONEXA LIVE TV - Tema visual estilo vMix */
:root {
  --bg: #2a2a2a;
  --bg-dark: #1c1c1c;
  --panel: #353535;
  --panel-2: #3f3f3f;
  --border: #4d4d4d;
  --text: #e8e8e8;
  --muted: #b5b5b5;
  --preview: #e07b1a;      /* naranja vMix (preview) */
  --program: #3f9a3f;      /* verde vMix (program) */
  --program-2: #2f7d2f;
  --accent-blue: #2f6db5;
  --tile-head: #3a4d6e;    /* azul del título de input */
  --live: #d4232c;
  --brand: #6b35ee;
  --green: #22e04a;
  --red: #d4232c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.vmix {
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 12px;
  display: grid; grid-template-rows: 34px 1fr auto 38px 22px; height: 100vh; overflow: hidden;
}
button { font-family: inherit; }
.link { color: #9fc3ff; word-break: break-all; }
.hint { color: var(--muted); font-size: 12px; margin: 0; }
code.inv { background: #1f1f1f; padding: 2px 6px; border-radius: 2px; }

/* ---- Menubar ---- */
.menubar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-dark); padding: 0 8px; border-bottom: 1px solid #000; }
.mb-left, .mb-right, .mb-center { display: flex; align-items: center; gap: 4px; }
.mb-logo { height: 20px; width: 20px; margin-right: 6px; }
.mb { background: #2e2e2e; color: var(--text); border: 1px solid #555; border-radius: 2px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.mb:hover { background: #444; }
.mb.full { background: #2f7d2f; border-color: #3f9a3f; color: #fff; min-width: 110px; }
.mb-status { color: var(--muted); font-size: 11px; margin-right: 8px; }
.ind-group { display: flex; gap: 2px; margin-left: 10px; }
.ind { background: #3a3a3a; color: #b8b8b8; padding: 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px; border-radius: 2px; }
.ind.on { background: var(--red); color: #fff; }

/* ---- Main: monitores + columna central ---- */
.main { display: grid; grid-template-columns: 1fr 112px 1fr; gap: 6px; padding: 6px 8px 4px; min-height: 0; background: var(--bg); }
.monitor { display: flex; flex-direction: column; min-height: 0; border: 1px solid #111; background: #000; }
.mon-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #fff; }
.monitor.preview .mon-head { background: var(--preview); color: #1b1b1b; }
.monitor.program .mon-head { background: var(--program-2); }
.mon-icons { opacity: .8; font-size: 11px; }
.mon-vid { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; background: #000; }
.mon-vid canvas { max-width: 100%; max-height: 100%; width: 100%; aspect-ratio: 16/9; object-fit: contain; display: block; }

.center-col { display: flex; gap: 4px; min-height: 0; }
.tcol { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tbtn { background: #3b3b3b; color: #fff; border: 1px solid #5a5a5a; border-radius: 2px; padding: 7px 4px; font-size: 12px; font-weight: 600; cursor: pointer; width: 100%; }
.tbtn:hover { background: #4a4a4a; }
.tbtn.sel { background: var(--program-2); border-color: var(--program); }
.tbtn.on { background: #000; border-color: var(--red); color: #ff7a7a; }
.ovquick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.ovquick button { background: #3b3b3b; color: #bbb; border: 1px solid #5a5a5a; border-radius: 2px; padding: 5px 0; font-size: 11px; font-weight: 700; cursor: pointer; }
.ovquick button.on { background: var(--program-2); color: #fff; }
.tbar-box { background: #2e2e2e; border: 1px solid #555; border-radius: 2px; padding: 6px 4px; }
.tbar { width: 100%; height: 22px; accent-color: #8a8a8a; margin: 0; }
.clock { background: #000; border: 1px solid #555; border-radius: 2px; padding: 6px 4px; text-align: center; margin-top: auto; }
.clk { font-family: Consolas, "Courier New", monospace; font-size: 15px; font-weight: 700; color: #35e05a; line-height: 1.5; }
.clk + .clk { font-size: 14px; color: #c8ffd4; }
.master-meter { width: 10px; background: #111; border: 1px solid #444; border-radius: 2px; position: relative; overflow: hidden; }
.master-meter span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #35e05a 0 70%, #f5c518 70% 90%, var(--red) 90%); }

/* ---- Lower: inputs + audio mixer ---- */
.lower { display: grid; grid-template-columns: 1fr 352px; gap: 6px; padding: 2px 8px 4px; min-height: 0; max-height: 46vh; }
.inputs-area { display: flex; flex-direction: column; min-height: 0; }
.cat-tabs { display: flex; align-items: center; gap: 3px; padding: 2px 0 4px; }
.cat { width: 14px; height: 10px; border-radius: 1px; cursor: pointer; border: 1px solid transparent; }
.cat.all { background: #666; } .cat.on { border-color: #fff; }
.cat.c1 { background: #d9a93b; } .cat.c2 { background: #4f9ad8; } .cat.c3 { background: #4fb85a; } .cat.c4 { background: #d85a5a; }
.cat-share { margin-left: auto; color: var(--muted); font-size: 11px; }
.inputs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; overflow-y: auto; align-content: start; padding-right: 2px; }

.inp { background: #1e1e1e; border: 1px solid #111; cursor: pointer; user-select: none; display: flex; flex-direction: column; }
.inp .head { display: flex; align-items: center; gap: 6px; background: var(--tile-head); color: #fff; padding: 4px 8px; font-size: 11px; font-weight: 600; }
.inp.pv .head { background: var(--preview); color: #1b1b1b; }
.inp.pg .head { background: var(--program-2); }
.inp .num { opacity: .9; }
.inp .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.inp .lbl:focus { background: rgba(0,0,0,.35); }
.inp .state { font-size: 11px; opacity: .8; }
.inp canvas { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.inp .foot { display: flex; align-items: center; gap: 2px; padding: 4px 6px 2px; font-size: 11px; color: #cfcfcf; }
.inp .foot button { background: none; border: 0; color: #cfcfcf; font-size: 11px; padding: 3px 5px; cursor: pointer; border-radius: 2px; }
.inp .foot button:hover { background: #3a3a3a; color: #fff; }
.inp .foot .sep { color: #666; }
.inp .ovrow { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; }
.inp .ovrow button { background: #333; color: #ccc; border: 1px solid #555; border-radius: 2px; padding: 3px 0; width: 20px; font-size: 11px; font-weight: 700; cursor: pointer; }
.inp .ovrow button.on { background: var(--program-2); color: #fff; border-color: var(--program-2); }
.inp .ovrow .audio-badge { margin-left: auto; background: var(--program-2); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 2px; border: 0; cursor: pointer; }
.inp .ovrow .audio-badge.muted { background: #555; color: #bbb; text-decoration: line-through; }

/* ---- Audio mixer ---- */
.audio-mixer { background: var(--bg-dark); border: 1px solid #111; display: flex; flex-direction: column; min-height: 0; }
.audio-mixer.hidden { display: none; }
.am-head { background: #0f3d1a; color: #a6f5b8; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.am-body { display: flex; gap: 6px; padding: 6px; overflow: auto; min-height: 0; }
.am-group { display: flex; gap: 4px; align-items: stretch; }
.am-group-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fff; background: var(--accent-blue); padding: 6px 2px; border-radius: 2px; text-align: center; }
.am-group.inputs-group .am-group-label { background: #1f5fa8; }
.am-inputs { display: flex; gap: 4px; }
.am-ch { width: 50px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #262626; border: 1px solid #3a3a3a; border-radius: 2px; padding: 4px 2px; }
.am-name { width: 100%; text-align: center; font-size: 11px; font-weight: 600; padding: 3px 2px; border-radius: 2px; background: #3a3a3a; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-name.master { background: var(--program-2); }
.am-name.recording { background: var(--red); }
.am-ch.pg .am-name { background: var(--program-2); }
.am-ch.pv .am-name { background: var(--preview); color: #1b1b1b; }
.am-fader { display: flex; gap: 3px; height: 110px; align-items: stretch; }
.am-meter { width: 8px; background: #111; border: 1px solid #444; position: relative; overflow: hidden; border-radius: 1px; }
.am-meter span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #35e05a 0 70%, #f5c518 70% 90%, var(--red) 90%); }
.vfader { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 110px; accent-color: #9a9a9a; margin: 0; }
.am-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; }
.am-b { background: #3b3b3b; color: #ddd; border: 1px solid #555; border-radius: 2px; font-size: 11px; font-weight: 700; padding: 3px 0; cursor: pointer; }
.am-b.on { background: var(--program-2); color: #fff; }
.am-b.m.on { background: var(--red); }
.am-b:disabled { opacity: .4; cursor: default; }

/* ---- Bottom bar + status ---- */
.bottombar { display: flex; align-items: center; gap: 4px; background: var(--bg-dark); border-top: 1px solid #000; padding: 0 8px; }
.bb { background: #2e2e2e; color: var(--text); border: 1px solid #555; border-radius: 2px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.bb:hover { background: #444; }
.bb.gear { border-color: #666; }
.bb.on { background: var(--red); border-color: var(--red); color: #fff; }
.bb-time { font-family: Consolas, monospace; font-size: 12px; color: #ddd; background: #111; padding: 5px 8px; border: 1px solid #444; border-radius: 2px; min-width: 70px; text-align: center; }
.bb-spacer { flex: 1; }
.bb-icons { color: #999; letter-spacing: 4px; }
.statusbar { display: flex; align-items: center; gap: 14px; background: #111; color: #aaa; font-size: 11px; padding: 0 10px; }
.st b { color: #fff; font-weight: 600; }
#statFormat { color: #35e05a; font-weight: 700; }

/* ---- Add Input menu ---- */
.add-menu { position: relative; }
.add-list { display: none; position: absolute; bottom: 36px; left: 0; z-index: 30; background: #262626; border: 1px solid #555; border-radius: 2px; padding: 4px; min-width: 210px; flex-direction: column; gap: 1px; }
.add-list.open { display: flex; }
.add-list button { background: none; border: 0; color: var(--text); text-align: left; padding: 7px 12px; border-radius: 2px; cursor: pointer; font-size: 12px; }
.add-list button:hover { background: var(--accent-blue); color: #fff; }

/* ---- Paneles laterales ---- */
.panel { position: fixed; top: 34px; right: 0; bottom: 60px; width: min(420px, 100%); background: var(--panel); border-left: 1px solid #111; z-index: 40; display: flex; flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,.45); }
.panel.hidden { display: none; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg-dark); font-weight: 700; font-size: 13px; }
.panel-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.panel-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
select, input[type=text], input[type=password], input[type=number] { background: #1f1f1f; color: var(--text); border: 1px solid #555; border-radius: 2px; padding: 7px 10px; font-size: 12px; min-width: 0; }
.panel-body label input, .panel-body label select { width: 100%; }
.panel-body input[type=color] { width: 100%; height: 34px; padding: 2px; background: #1f1f1f; border: 1px solid #555; border-radius: 2px; }
.panel-body input[type=range] { accent-color: var(--program); }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
label.chk { flex-direction: row; align-items: center; gap: 8px; }
label.chk input { width: auto; }
.row-actions { display: flex; align-items: center; gap: 12px; }
.tbtn.golive { background: var(--red); border-color: var(--red); width: auto; min-width: 120px; padding: 10px 18px; }
.tbtn.golive.on { background: #1f1f1f; color: #ff7a7a; }
.dest { display: grid; grid-template-columns: 100px 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.dest input, .dest select { width: 100%; }
.dest .on-chk { display: flex; align-items: center; justify-content: center; }
.ov { display: grid; grid-template-columns: 28px 1fr; gap: 6px 8px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 8px 10px; }
.ov.on { border-color: var(--program); }
.ov .ch { font-weight: 800; background: #3a3a3a; padding: 4px 0; text-align: center; border-radius: 2px; color: #ccc; grid-row: span 2; }
.ov.on .ch { background: var(--program); color: #fff; }
.ov .name { color: var(--muted); }
.ov .ctrls { display: flex; gap: 6px; align-items: center; }
.ov .ctrls select { flex: 1; }
.ov .ctrls input[type=range] { width: 60px; accent-color: var(--program); }
.ov .ctrls input[type=number] { width: 60px; }

@media (max-width: 1100px) {
  .lower { grid-template-columns: 1fr; }
  .audio-mixer { display: none; }
}

/* ---- extras: stingers, input settings, menús ---- */
.add-list.top { bottom: auto; top: 30px; }
.sub-head { font-weight: 700; font-size: 12px; color: #fff; border-bottom: 1px solid #555; padding-bottom: 4px; margin-top: 4px; }
.inp .foot .gear { margin-left: auto; }
.ck-preview { background: repeating-conic-gradient(#555 0 25%, #888 0 50%) 0 0 / 20px 20px; border: 1px solid #555; }
.ck-preview canvas { display: block; width: 100%; aspect-ratio: 16/9; cursor: crosshair; }
.mv-overlay { position: fixed; inset: 0; background: #000; z-index: 60; }
.mv-overlay.hidden { display: none; }
.mv-overlay canvas { width: 100%; height: 100%; display: block; }
.mv-overlay button { position: absolute; top: 10px; right: 10px; }

/* ---- audio settings, playlist, multicorder ---- */
.route-row { display: flex; gap: 4px; flex-wrap: wrap; }
.route-row button { background: #3b3b3b; color: #ddd; border: 1px solid #555; border-radius: 2px; min-width: 34px; padding: 6px 0; font-weight: 700; cursor: pointer; }
.route-row button.on { background: var(--program-2); color: #fff; border-color: var(--program-2); }
.panel-body label .val { color: #fff; font-size: 11px; }
.am-ch .am-route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; }
.am-ch .am-route button { background: #3b3b3b; color: #bbb; border: 1px solid #555; border-radius: 2px; font-size: 11px; font-weight: 700; padding: 3px 0; cursor: pointer; }
.am-ch .am-route button.on { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.am-ch .am-gear { background: none; border: 0; color: #bbb; cursor: pointer; font-size: 12px; padding: 2px; }
.am-name.bus { background: #1f5fa8; }
.bus-outputs { display: grid; grid-template-columns: 1fr; gap: 6px; }
.bus-outputs label { flex-direction: row; align-items: center; gap: 8px; }
.bus-outputs label span { width: 28px; font-weight: 700; color: #fff; }
.pl-items, .mc-items { display: flex; flex-direction: column; gap: 4px; }
.pl-item, .mc-item { display: grid; grid-template-columns: 24px 1fr 70px auto; gap: 6px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 6px 8px; }
.pl-item.now { border-color: var(--program); }
.pl-item .n { color: var(--muted); font-weight: 700; }
.pl-item input[type=number] { width: 70px; }
.mc-item { grid-template-columns: 24px 1fr auto; }
.mc-item .st { color: var(--muted); font-size: 11px; }
.mc-item .st.on { color: #ff7a7a; font-weight: 700; }
.bb.on-pl { background: var(--program-2); border-color: var(--program-2); color: #fff; }

/* ---- instant replay ---- */
.panel.wide { width: min(520px, 100%); }
.bb.mark { background: var(--red); border-color: var(--red); color: #fff; font-weight: 800; }
.bb.mark:active { filter: brightness(1.3); }
.rp-events { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.rp-ev { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 6px 8px; cursor: pointer; }
.rp-ev.sel { border-color: var(--program); background: #1f2b1f; }
.rp-ev .n { color: var(--muted); font-weight: 700; }
.rp-ev .t { color: var(--muted); font-size: 11px; }
.rp-progress { height: 8px; background: #111; border: 1px solid #444; border-radius: 2px; overflow: hidden; }
.rp-progress span { display: block; height: 100%; width: 0; background: var(--program); }
.mb.golive-mini { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.bb.on-rp { background: var(--program-2); border-color: var(--program-2); color: #fff; }

/* ---- data sources ---- */
.ds-list { display: flex; flex-direction: column; gap: 4px; }
.ds-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 6px 8px; cursor: pointer; }
.ds-item.sel { border-color: var(--program); }
.ds-item .meta { color: var(--muted); font-size: 11px; }
.ds-item .err { color: #ff8a8a; font-size: 11px; }
.ds-detail.hidden { display: none; }
.ds-table-wrap { max-height: 220px; overflow: auto; border: 1px solid #444; }
.ds-table { border-collapse: collapse; width: 100%; font-size: 11px; }
.ds-table th, .ds-table td { border: 1px solid #3a3a3a; padding: 4px 6px; text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ds-table th { background: #1f1f1f; position: sticky; top: 0; }
.ds-table tr.cur td { background: #1f2b1f; }
.ds-table td[contenteditable] { white-space: normal; cursor: text; }
.ds-table td[contenteditable]:focus { outline: 1px solid var(--program); background: #151515; }
.ds-table .rowbtn { background: none; border: 0; color: #bbb; cursor: pointer; }
.bb.on-ds { background: var(--program-2); border-color: var(--program-2); color: #fff; }

/* ---- minimizar inputs ---- */
.inp .head .minbtn { background: none; border: 0; color: rgba(255,255,255,.85); font-size: 13px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 2px; }
.inp .head .minbtn:hover { background: rgba(0,0,0,.3); }
.inp.min canvas, .inp.min .foot, .inp.min .ovrow, .inp.min .audio { display: none; }
.inp.min { min-height: 0; }
.inp.min .head { cursor: pointer; }
.inp.min::after { content: ""; display: block; height: 6px; background: #000; }
.mb.mini { padding: 3px 8px; font-size: 11px; margin-left: 8px; }

/* ---- Input Select (clon vMix) ---- */
.isel { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display: flex; align-items: center; justify-content: center; }
.isel.hidden { display: none; }
.isel-box { width: min(820px, 96vw); height: min(560px, 92vh); background: #262626; border: 1px solid #555; box-shadow: 0 10px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.isel-head { display: flex; justify-content: space-between; align-items: center; background: var(--bg-dark); padding: 8px 12px; font-weight: 700; font-size: 13px; }
.isel-body { flex: 1; display: grid; grid-template-columns: 230px 1fr; min-height: 0; }
.isel-list { list-style: none; margin: 0; padding: 4px 0; background: #1b1b1b; overflow-y: auto; border-right: 1px solid #444; }
.isel-list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 12px; color: #e8e8e8; }
.isel-list li .ic { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #3a3a3a; border-radius: 2px; font-size: 13px; }
.isel-list li:hover { background: #333; }
.isel-list li.sel { background: var(--program-2); color: #fff; }
.isel-list li.sel .ic { background: #fff; color: #1b1b1b; }
.isel-pane { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.isel-pane h3 { margin: 0; font-size: 15px; }
.isel-form { display: flex; flex-direction: column; gap: 10px; }
.isel-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.isel-form input[type=file] { color: #ddd; }
.isel-form .chk { display: flex; align-items: center; gap: 8px; color: #ddd; }
.isel-form input[type=range] { accent-color: var(--program); }
.inp .foot .nav { color: #cfcfcf; }

/* ---- corresponsales ---- */
.corr-list { display: flex; flex-direction: column; gap: 4px; }
.corr-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 6px 8px; }
.corr-item .tl { display: inline-block; min-width: 64px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 3px 6px; border-radius: 2px; background: #3a3a3a; color: #bbb; margin-right: 6px; }
.corr-item .tl.preview { background: var(--preview); color: #1b1b1b; } .corr-item .tl.program { background: var(--live); color: #fff; }
.corr-item .st { color: var(--muted); font-size: 11px; }
.corr-item .acts { display: flex; gap: 4px; }
.chat-log { max-height: 160px; overflow-y: auto; background: #1b1b1b; border: 1px solid #444; border-radius: 2px; padding: 6px 8px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.chat-log .me { color: var(--muted); }
.bb.on-corr { background: var(--program-2); border-color: var(--program-2); color: #fff; }

/* ---- input settings: tabs, position, layers ---- */
.ip-tabs { display: flex; gap: 4px; border-bottom: 1px solid #555; padding-bottom: 8px; }
.ip-tabs button.sel { background: var(--program-2); border-color: var(--program-2); color: #fff; }
#ipTabLayers, #ipTabPosition, #ipTabChroma { display: flex; flex-direction: column; gap: 10px; }
#ipTabLayers.hidden, #ipTabPosition.hidden, #ipTabChroma.hidden { display: none; }
.ly-editor { background: #000; border: 1px solid #555; }
.ly-editor canvas { display: block; width: 100%; aspect-ratio: 16/9; cursor: move; touch-action: none; }
.ly-head, .ly-row { display: grid; grid-template-columns: 22px 1fr 28px 46px 46px 46px 46px 60px 28px; gap: 4px; align-items: center; font-size: 11px; }
.ly-head { color: var(--muted); padding: 0 4px; }
.ly-list { display: flex; flex-direction: column; gap: 3px; }
.ly-row { background: #262626; border: 1px solid #444; border-radius: 2px; padding: 3px 4px; cursor: pointer; }
.ly-row.sel { border-color: var(--program); }
.ly-row.empty { opacity: .6; }
.ly-row .n { font-weight: 700; color: var(--muted); text-align: center; }
.ly-row select { padding: 4px 6px; font-size: 11px; min-width: 0; }
.ly-row .num { padding: 4px 4px; font-size: 11px; width: 100%; }
.ly-row .op { width: 100%; accent-color: var(--program); }
.ly-row .del { padding: 3px 6px; }
#ipTabPosition input[type=range] { width: 100%; accent-color: var(--program); }

/* ---- ajuste de botones del pie del input (overlays + Audio) ---- */
.inp { min-width: 0; overflow: hidden; }
.inp .foot { flex-wrap: wrap; row-gap: 2px; }
.inp .foot button, .inp .foot .sep { white-space: nowrap; }
.inp .ovrow { display: flex; align-items: center; gap: 3px; padding: 4px 8px 8px; }
.inp .ovrow button[data-ch] { flex: 1 1 0; min-width: 20px; max-width: 34px; width: auto; height: 22px; padding: 0; font-size: 11px; line-height: 22px; }
.inp .ovrow .audio-badge { flex: 0 0 auto; width: auto; min-width: 48px; margin-left: auto; height: 22px; line-height: 22px; padding: 0 9px; font-size: 11px; letter-spacing: .3px; white-space: nowrap; }
.inp .ovrow .audio-badge.muted { background: #555; color: #ccc; text-decoration: line-through; }

/* ---- vMix 29: pie de input con overlays 1-8, GO, loop/pausa; minimizado vertical ---- */
.ovquick { grid-template-columns: repeat(4, 1fr); }
.inputs-grid { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; align-content: flex-start; }
.inp { flex: 0 0 200px; width: 200px; }
.inp.hidden-search { display: none; }
.inp .head { gap: 6px; }
.inp .head .xbtn { background: none; border: 0; color: rgba(255,255,255,.9); font-size: 14px; line-height: 1; padding: 0 5px; cursor: pointer; border-radius: 2px; }
.inp .head .xbtn:hover { background: var(--red); color: #fff; }
.inp .foot { display: none; }
.inp .btnrows { display: grid; grid-template-columns: repeat(4, 22px) 1fr 1fr 26px 26px; gap: 3px; padding: 5px 6px 6px; align-items: center; }
.inp .btnrows button { height: 22px; border-radius: 2px; border: 1px solid #555; background: #333; color: #ccc; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.inp .btnrows button:hover { background: #444; color: #fff; }
.inp .btnrows button.ov.on { background: var(--program-2); color: #fff; border-color: var(--program-2); }
.inp .btnrows button.go { background: var(--program-2); border-color: var(--program-2); color: #fff; }
.inp .btnrows button.cutb { background: #3b3b3b; }
.inp .btnrows button.ic { padding: 0; }
.inp .btnrows button.ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inp .btnrows button.ic.on { color: #35e05a; border-color: #35e05a; }
.inp .btnrows button.audio-badge { background: var(--program-2); color: #fff; border-color: var(--program-2); grid-column: span 2; }
.inp .btnrows button.audio-badge.muted { background: #555; color: #ccc; text-decoration: line-through; border-color: #555; }
.inp .btnrows button.ghost { visibility: hidden; }
.inp .ovrow { display: none; }
.inp .kindrow { display: flex; gap: 4px; align-items: center; padding: 0 6px 6px; font-size: 11px; color: #cfcfcf; }
.inp .kindrow:empty { display: none; }
/* minimizado vertical (vMix 29): número arriba, nombre girado */
.inp.min { flex: 0 0 40px; width: 40px; min-height: 180px; }
.inp.min .head { flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding: 6px 0; gap: 8px; cursor: pointer; }
.inp.min .head .num { font-size: 12px; }
.inp.min .head .lbl { writing-mode: vertical-rl; transform: rotate(180deg); flex: 1; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: .3px; pointer-events: none; }
.inp.min .head .state, .inp.min .head .xbtn, .inp.min .head .minbtn { display: none; }
.inp.min::after { display: none; }
.inp.min canvas, .inp.min .btnrows, .inp.min .kindrow, .inp.min .audio { display: none; }
.cat-tabs .search { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; background: #1f1f1f; border: 1px solid #555; border-radius: 2px; padding: 0 8px; color: var(--muted); }
.cat-tabs .search input { background: none; border: 0; padding: 4px 0; width: 130px; font-size: 11px; color: var(--text); }
.cat-tabs .search input:focus { outline: none; }
.tb-cfg, .stinger-cfg { display: flex; flex-direction: column; gap: 6px; }
.tb-cfg .row, .stinger-cfg .row { display: grid; grid-template-columns: 26px 1fr 80px; gap: 6px; align-items: center; }
.stinger-cfg .row { grid-template-columns: 26px 1fr 72px auto; }
.stinger-cfg .row .st-name { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbcfg.sel { background: var(--program-2); border-color: var(--program); }

/* ---- v29: cuenta atrás, tags de replay, lista ---- */
.cd-triggers { display: flex; flex-direction: column; gap: 4px; }
.cd-trig { display: grid; grid-template-columns: 70px 1fr auto; gap: 6px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 4px 8px; font-size: 12px; }
.rp-ev .tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rp-ev .tag { background: var(--accent-blue); color: #fff; border-radius: 2px; padding: 1px 6px; font-size: 10px; }
.ls-items { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; }
.ls-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: center; background: #262626; border: 1px solid #444; border-radius: 2px; padding: 5px 8px; cursor: pointer; font-size: 12px; }
.ls-item.cur { border-color: var(--program); }
#ipTabList { display: flex; flex-direction: column; gap: 10px; } #ipTabList.hidden { display: none; }

/* ---- streaming multidestino ---- */
.sp-body { gap: 14px; }
.sp-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: #1f1f1f; border: 1px solid #444; border-radius: 4px; padding: 12px; }
.sp-golive { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: 4px; border: 0; background: var(--red); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 1px; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0,0,0,.8); }
.sp-golive .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .9; }
.sp-golive.on { background: #2a2a2a; border: 1px solid var(--red); color: #ff8a8a; } .sp-golive.on .dot { background: var(--red); animation: g-blink 1s steps(2) infinite; }
@keyframes g-blink { 50% { opacity: .2; } }
.sp-hero-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-line { display: flex; gap: 12px; align-items: baseline; }
.sp-state { font-weight: 800; letter-spacing: 1px; font-size: 12px; color: var(--muted); }
.sp-state.live { color: #ff6b6b; } .sp-state.starting { color: #f5c518; } .sp-state.error, .sp-state.warn { color: #ff8a8a; }
.sp-timer { font-family: Consolas, monospace; font-size: 18px; font-weight: 700; color: #35e05a; }
.sp-bitrate { color: var(--muted); font-size: 12px; }
.sp-watch a { color: #9fc3ff; font-size: 12px; margin-right: 10px; }
.sp-sub { display: flex; align-items: center; justify-content: space-between; }
.sp-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sp-picker.hidden { display: none; }
.sp-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: #262626; border: 1px solid #444; border-radius: 4px; color: var(--text); cursor: pointer; font-size: 12px; }
.sp-pick:hover { border-color: var(--c); background: #2d2d2d; }
.sp-pick .g, .sp-dest .g, .sp-connect .g { width: 26px; height: 26px; color: var(--c); display: inline-flex; } .sp-pick .g svg, .sp-dest .g svg, .sp-connect .g svg { width: 100%; height: 100%; }
.sp-pick small { color: var(--muted); font-size: 10px; }
.sp-dests { display: flex; flex-direction: column; gap: 8px; }
.sp-empty { color: var(--muted); font-size: 12px; padding: 16px; border: 1px dashed #555; border-radius: 4px; text-align: center; }
.sp-dest { background: #262626; border: 1px solid #444; border-left: 1px solid var(--c); border-radius: 4px; }
.sp-dest.off { opacity: .6; }
.sp-dest.live { border-color: #35e05a; } .sp-dest.err { border-color: var(--red); }
.sp-dest-h { display: grid; grid-template-columns: 26px 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: #2b2b2b; }
.sp-dest-h .nm { font-weight: 700; }
.sp-dest-h .st { font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.sp-dest.live .sp-dest-h .st { color: #35e05a; font-weight: 800; } .sp-dest.err .sp-dest-h .st { color: #ff8a8a; }
.sp-dest-b { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.sp-dest-b .row3 { grid-template-columns: 1fr 1fr auto; }
.sp-dest-b .row { display: flex; gap: 4px; } .sp-dest-b .row input { flex: 1; }
.sp-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.sp-acc .ok { color: #35e05a; }
.sp-connect { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #1f1f1f; border: 1px solid var(--c); color: #fff; border-radius: 4px; cursor: pointer; font-weight: 600; }
.sp-connect:hover { background: #333; }
.sp-connect .g { width: 20px; height: 20px; }
.link-btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.sp-watchlink { color: #9fc3ff; font-size: 12px; }
.sw { position: relative; width: 36px; height: 20px; display: inline-block; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw span { position: absolute; inset: 0; background: #555; border-radius: 20px; cursor: pointer; transition: background .15s; }
.sw span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s; }
.sw input:checked + span { background: var(--program); } .sw input:checked + span::before { transform: translateX(16px); }
.sw input:focus-visible + span { outline: 2px solid #a9c7f8; }
.oauth-cfg { display: flex; flex-direction: column; gap: 8px; }
.oauth-cfg .row { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 6px; align-items: center; }
.oauth-cfg .row b { font-size: 12px; }

/* ---- tiles más anchos: la rejilla de botones (1-4 GO Cut loop pausa / 5-8 Audio ext ajustes) cabe entera ---- */
.inp { flex: 0 0 262px; width: 262px; }
.inp .btnrows { grid-template-columns: repeat(4, 24px) minmax(34px, 1fr) minmax(34px, 1fr) 28px 28px; gap: 4px; padding: 6px 7px 7px; }
.inp .btnrows button { height: 24px; min-width: 0; }
.inp .btnrows button.ic svg { width: 14px; height: 14px; }
.inp .btnrows button.audio-badge { grid-column: span 2; }
.inp canvas { width: 100%; }
@media (max-width: 1100px) { .inp { flex-basis: 240px; width: 240px; } .inp .btnrows { grid-template-columns: repeat(4, 22px) minmax(30px, 1fr) minmax(30px, 1fr) 26px 26px; gap: 3px; padding: 5px 6px 6px; } }

/* ---- color, scopes, ruedas, peak hold ---- */
#ipTabAdjust, #ipTabCorrect { display: flex; flex-direction: column; gap: 10px; } #ipTabAdjust.hidden, #ipTabCorrect.hidden { display: none; }
#ipTabAdjust input[type=range], #ipTabCorrect input[type=range] { width: 100%; accent-color: var(--program); }
.scopes { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; } .scopes canvas { width: 100%; display: block; background: #0a0a0a; border: 1px solid #444; }
.scopes .sub-head { display: flex; justify-content: space-between; align-items: center; } .scopes select { padding: 2px 6px; font-size: 11px; }
.wheels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #1f1f1f; border: 1px solid #444; border-radius: 4px; padding: 8px; }
.wheel canvas { border-radius: 50%; cursor: crosshair; touch-action: none; }
.wheel input[type=range] { width: 100%; }
.am-meter i { position: absolute; left: 0; right: 0; height: 2px; background: #fff; bottom: 0; }
.link { cursor: pointer; }

/* ---- monitor de Input Settings ---- */
.ip-mon { background: #000; border: 1px solid #444; border-radius: 2px; }
.ip-mon.hidden { display: none; }
.ip-mon canvas { display: block; width: 100%; aspect-ratio: 16/9; cursor: grab; touch-action: none; }
.ip-mon canvas:active { cursor: grabbing; }
.ip-mon-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: #1f1f1f; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.ip-mon-bar .chk { gap: 5px; }