:root{
  --bg:#eef1f4;--panel:#ffffff;--panel-2:#f5f7f9;--line:#dde3e9;--line-2:#c8d0d9;
  --text:#171d24;--muted:#5c6673;--dim:#8892a0;--field:#ffffff;--head:#f5f7f9;--dark:#0d1116;
  --red:#c62828;--red-dim:#fae6e4;--green:#227a4e;--green-dim:#e3f3ea;--amber:#b8801a;--amber-dim:#faf0dc;--blue:#c62828;
  --navy:#152640;--navy-2:#25405f;--navy-muted:#a9b7c9;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:'Titillium Web',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:'Titillium Web','Arial Narrow',sans-serif;
  --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--field);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(225,6,0,.25)}
input[type=checkbox]{width:auto;accent-color:var(--red)}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.btn{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:7px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn-sm{padding:4px 9px;font-size:12px}
.btn-primary{background:var(--red);border:1px solid var(--red);border-radius:var(--r);padding:8px 14px;cursor:pointer;font-weight:600}
.btn-primary{color:#fff}
.btn-primary:hover{background:#c40500}
.btn-danger{color:var(--red);border-color:#f3b8b6}
.btn-block{width:100%;margin-top:14px}
.btn:disabled,.btn-primary:disabled{opacity:.5;cursor:default}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}

/* login */
.login-body{background:var(--bg);display:-webkit-box;display:-webkit-flex;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{width:360px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px 30px 24px}
.logo-plate{display:inline-block;padding:4px 0}
.login-logo{height:40px;display:block}
.login-plate{text-align:center;margin-bottom:8px}
.login-sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 18px}
.pw-wrap{position:relative}
.pw-eye{position:absolute;right:6px;top:4px;background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px}
.login-error{color:var(--red);background:var(--red-dim);border-radius:var(--r);padding:8px 10px;font-size:13px;margin:12px 0 0}
.login-foot{text-align:center;color:var(--dim);font-size:11px;margin:16px 0 0}

/* header */
.top{display:flex;align-items:center;gap:20px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand img{height:22px}
.brand .logo-plate{padding:4px 8px;border-radius:6px}
.brand span{color:var(--muted);font-weight:500}
.nav{display:flex;gap:4px;margin-left:10px}
.nav a{padding:6px 12px;border-radius:var(--r);color:var(--muted)}
.nav a.on{color:var(--text);background:var(--panel-2)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.user{color:var(--muted);font-size:13px}
.badge{font-size:11px;padding:2px 9px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-live{background:var(--green-dim);color:var(--green)}
.badge-off{background:var(--red-dim);color:var(--red)}
.badge-wait{background:var(--amber-dim);color:var(--amber)}
.badge-idle{background:var(--panel-2);color:var(--muted)}
.badge-live::before{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.badge-live::before{animation:none}}

/* gauges */
.gauges{display:-webkit-box;display:-webkit-flex;display:flex;flex-wrap:wrap;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px 18px 0}
.gauge{background:var(--panel);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);border-radius:var(--r);padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-height:64px}
.g-label{font-size:11px;color:var(--muted)}
.g-value{font-size:17px;font-weight:600;font-family:var(--mono);letter-spacing:-.3px}
.g-sub{font-size:11px;color:var(--dim);font-family:var(--mono)}
.g-bar{height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.g-bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .4s}
.g-bar i.hi{background:var(--amber)}.g-bar i.crit{background:var(--red)}

/* view */
.view{padding:14px 18px 40px}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.page-head h1{font-size:17px;font-weight:600;margin:0}
.page-head .sp{flex:1}
.search{max-width:260px}

/* client table */
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-size:11px;color:var(--muted);font-weight:500;background:var(--head)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl .num{text-align:right;font-family:var(--mono)}
.tbl .name{font-weight:600}
.tbl .slug{font-family:var(--mono);color:var(--dim);font-size:12px}
.pill{font-size:11px;padding:1px 7px;border-radius:4px;background:var(--panel-2);color:var(--muted);font-family:var(--mono)}
.empty{padding:40px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r)}

/* client detail */
.detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.detail-head h1{font-size:18px;margin:0;font-weight:600}
.detail-head .sp{flex:1}
.detail-head select{width:auto;padding:5px 8px;font-size:13px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;min-width:0}
@media(max-width:900px){.detail-grid{grid-template-columns:minmax(0,1fr)}.gauges{grid-template-columns:repeat(3,minmax(0,1fr))}}
.player-box{background:var(--dark);border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
.player-box::before{content:"";display:block;padding-top:56.25%}   /* 16:9 sin aspect-ratio */
@supports (aspect-ratio:16/9){.player-box{aspect-ratio:16/9}.player-box::before{display:none}}
.player-box video{position:absolute;top:0;left:0;right:0;bottom:0}
.player-box video:not([src]):not(.has-src){pointer-events:none}
.player-box video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.player-ov{position:absolute;left:10px;top:8px;display:flex;gap:8px;align-items:center;font-size:11px}
.player-ov-r{position:absolute;right:10px;top:8px;display:flex;gap:4px}
.player-ov-r button{background:rgba(0,0,0,.6);border:1px solid #555;color:#ccc;font-size:11px;padding:2px 8px;border-radius:4px;cursor:pointer}
.player-ov-r button.on{color:#fff;border-color:#fff}
.player-msg{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#9a9fa6;font-size:13px;pointer-events:none}
.player-foot{position:absolute;left:10px;bottom:8px;right:10px;display:flex;justify-content:space-between;font-size:11px;font-family:var(--mono);color:#c8ccd2}
.sec{margin:14px 0 6px;font-size:12px;color:var(--muted);font-weight:600}
.lk{display:flex;align-items:center;gap:8px;padding:4px 0}
.lk .lt{width:78px;line-height:1.2;font-size:12px;color:var(--muted);flex:none}
.lk code{cursor:text;flex:1;font-family:var(--mono);font-size:12px;background:var(--head);border:1px solid var(--line);padding:6px 9px;border-radius:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:10px;gap:2px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:7px 11px;color:var(--muted);cursor:pointer;font-size:13px;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-bottom-color:var(--red)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-family:var(--mono);text-align:right}
.chart{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.chart-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.chart svg{width:100%;height:90px;display:block}

/* modal */
.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(20,22,26,.45);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:10px;width:520px;max-width:100%;padding:20px 22px;max-height:95vh;overflow:auto}
.modal h2{margin:0 0 6px;font-size:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.checks{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.checks label{display:flex;align-items:center;gap:6px;margin:0;color:var(--text);font-size:13px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.form-err{color:var(--red);font-size:13px;margin:8px 0 0}
.row-inline{display:flex;gap:6px}

/* logs */
.logbox{background:var(--head);border:1px solid var(--line);border-radius:var(--r);padding:8px 0;font-family:var(--mono);font-size:12px;max-height:70vh;overflow:auto}
.logbox div{padding:2px 12px;white-space:pre-wrap;word-break:break-all;border-bottom:1px solid var(--line)}
.logbox .ERR,.logbox .err{color:var(--red)}
.logbox .WAR,.logbox .warn{color:var(--amber)}
.logbox .INF{color:var(--blue)}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:9px 14px;font-size:13px;z-index:30}
.toast.err{border-color:var(--red);color:var(--red)}
.settings-grid{max-width:560px}

.fw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){.fw-grid{grid-template-columns:1fr}}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.card-head h3{margin:0;font-size:14px}
.card p.dim{font-size:12px;margin:6px 0 10px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ---------------- responsive: celular, tablet y PC ---------------- */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.top{padding-left:18px;padding-right:18px}
@supports (padding:max(0px)){
  .top{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
@supports (padding:max(0px)){ .view{padding-bottom:max(40px,env(safe-area-inset-bottom))} }

@media (max-width:1100px){
  .gauges{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:820px){
  body{font-size:15px}
  .top{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .brand{flex:1}
  .brand img{height:20px}
  .nav{order:3;width:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:8px 12px}
  .top-right{margin-left:auto;gap:8px}
  .user{display:none}
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px 12px 0}
  .gauge{min-height:58px;padding:8px 10px}
  .g-value{font-size:15px}
  .view{padding:12px}
  .page-head{flex-wrap:wrap;gap:8px}
  .page-head h1{font-size:16px;width:100%}
  .search{max-width:100%;flex:1}
  .detail-head{gap:8px}
  .detail-head h1{font-size:16px}
  .detail-head select{flex:1;min-width:0}
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .fw-grid{grid-template-columns:minmax(0,1fr)}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .tbl th,.tbl td{padding:8px 10px;font-size:13px}
  .lk{flex-wrap:wrap}
  .lk .lt{width:100%}
  .lk code{font-size:11px;min-width:0}
  .modal{width:100%;max-height:92vh;border-radius:12px;padding:16px}
  .modal-bg{padding:8px;align-items:flex-end}
  .modal-foot{flex-wrap:wrap}
  .modal-foot .btn,.modal-foot .btn-primary{flex:1}
  .chart svg{height:70px}
  .settings-grid{max-width:100%}
  .logbox{max-height:50vh;font-size:11px}
}

@media (max-width:520px){
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl th,.tbl td{padding:7px 8px;font-size:12px}
  .btn,.btn-primary{min-height:38px}
  .btn-sm{min-height:32px;padding:6px 10px}
  .player-ov-r button{min-height:28px}
}

/* en pantallas táctiles los campos no deben hacer zoom al tocarlos (iOS) */
@media (max-width:820px){
  input,select,textarea{font-size:16px}
}

/* pantallas grandes: aprovecha el ancho sin estirar de más */
@media (min-width:1600px){
  .view,.gauges,.top{max-width:1520px;margin-left:auto;margin-right:auto}
}

/* tablas que se vuelven tarjetas en celular */
@media (max-width:640px){
  .brand span.brand-text{display:none}   /* oculta el texto, no el logo */
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack tr{border-bottom:1px solid var(--line);padding:10px 12px}
  .tbl-stack tr:last-child{border-bottom:0}
  .tbl-stack td{display:flex;align-items:center;justify-content:space-between;gap:12px;
                border:0;padding:4px 0;text-align:right}
  .tbl-stack td::before{content:attr(data-label);color:var(--muted);font-size:12px;
                        font-weight:400;text-align:left;flex:none}
  .tbl-stack td.num{text-align:right}
  .tbl-stack td:first-child{display:block;text-align:left;margin-bottom:4px}
  .tbl-stack td:first-child::before{display:none}
  .tbl-stack td:empty{display:none}
  .tbl-wrap{overflow:visible}
}

.detail-grid > *{min-width:0}
.view > *{max-width:100%}
.kv span:last-child{min-width:0;overflow-wrap:anywhere}
.player-ov-r{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:flex-end}

/* el menú desplazable no debe ensanchar la página */
.nav{max-width:100%}
.card-head{flex-wrap:wrap;gap:8px}
.card-head .row-inline{flex-wrap:wrap}
@media (max-width:640px){
  .card-head .row-inline{width:100%}
  .card-head .row-inline input{flex:1;min-width:0;width:auto!important}
}

/* --- cliente con varias señales --- */
.stream-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px}
.stream-list{padding:0;overflow:hidden;align-self:start}
.list-title{margin:0;padding:9px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line)}
.st-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.st-item:last-child{border-bottom:0}
.st-item:hover{background:var(--panel-2)}
.st-item.on{background:var(--panel-2)}
.st-item .dot{width:8px;height:8px;border-radius:50%;flex:none}
.st-name{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-path{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-mb{font-size:11px;flex:none}
.st-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--head)}
.st-head .sp{flex:1}
@media (max-width:820px){
  .stream-layout{grid-template-columns:minmax(0,1fr)}
  .stream-list{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stream-list .list-title{display:none}
  .st-item{border-bottom:0;border-right:1px solid var(--line);min-width:150px}
}

/* 2026 light interface: shared presentation layer */
:root{--bg:#eef1f5;--panel:#fff;--panel-2:#e6eaf0;--line:#d7dde5;--line-2:#c1c9d4;--text:#1b2430;--muted:#5b6674;--dim:#8892a0;--head:#e6eaf0;--red:#c62828;--red-dim:#fbe1e1;--green:#227a4e;--green-dim:#e3f3ea;--amber:#b8801a;--amber-dim:#faf0dc;--blue:#c62828;--navy:#152640;--navy-2:#25405f;--navy-muted:#a9b7c9;--r:8px;--sans:'Titillium Web','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;--disp:'Titillium Web','Arial Narrow',sans-serif}
body{line-height:1.55}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a,input,select,textarea{transition:background-color .15s,border-color .15s,box-shadow .15s}
:focus-visible{outline:3px solid #93b4fd;outline-offset:3px}input,select,textarea{min-height:42px;padding:10px 12px;border-color:var(--line-2);border-radius:9px}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2563eb18}input[type=checkbox]{min-height:auto;accent-color:var(--blue)}label{font-size:13px;font-weight:600;margin:16px 0 6px}textarea{resize:vertical}
.btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 15px;font-weight:600;border-radius:9px}.btn{background:#fff;border-color:var(--line-2);box-shadow:0 1px 2px #16243b05}.btn:hover{background:var(--head);border-color:#9eafc5}.btn-primary{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 3px 7px #2563eb20}.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}.btn-sm{min-height:32px;padding:5px 10px;font-size:12px}.btn-danger{color:var(--red);border-color:#f4c5ca;background:#fff}.btn-danger:hover{background:var(--red-dim);border-color:var(--red)}.btn:disabled,.btn-primary:disabled{cursor:not-allowed;box-shadow:none}.btn-block{width:100%;min-height:46px}
.top{height:84px;padding:18px 32px;gap:20px;background:#ffffffed;backdrop-filter:blur(16px);max-width:none}.brand img{height:28px}.brand .logo-plate{padding:0}.brand span.brand-text{font-size:13px;color:var(--text);font-weight:700}.top-right{gap:14px}.user{font-weight:500}.nav a{font-weight:600}.nav a.on{background:#eaf1ff;color:#2158ca}.nav a:hover{background:#f0f4fa}.badge{padding:4px 10px;font-size:11px;letter-spacing:.1px}.badge-live::before{animation:none}
.gauges{gap:12px;padding:28px 32px 0}.gauge{padding:17px 16px;gap:7px;min-height:116px;border-radius:13px;box-shadow:0 2px 4px #23365303}.g-label{font-size:12px;font-weight:600}.g-value{font:700 21px/1.3 var(--sans);letter-spacing:-.6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.g-sub{font-size:11px;line-height:1.5}.g-bar{height:5px;margin-top:auto;background:#edf1f7;border-radius:10px}.g-bar i{border-radius:10px}.gauge:nth-child(6){background:#eef8f3;border-color:#d9eee3}.gauge:nth-child(6) .g-value{color:var(--green)}
.view{padding:30px 32px 48px}.page-head,.detail-head{gap:14px;margin-bottom:22px;flex-wrap:wrap}.page-head h1,.detail-head h1{font-size:25px;letter-spacing:-.7px;font-weight:700}.page-head .search{margin-left:12px;max-width:300px;background:#fff}.card,.chart{padding:22px;border-radius:14px;box-shadow:0 3px 10px #23365304}.card-head{margin-bottom:14px}.card-head h3{font-size:16px;letter-spacing:-.2px}.card p.dim{line-height:1.7}.detail-grid,.fw-grid{gap:20px}.sec{margin:22px 0 10px;font-size:13px}.settings-grid{max-width:780px}.kv{padding:11px 0}.lk{padding:5px 0}.lk code{padding:10px;border-radius:8px}.chart{margin-top:20px}.chart-head{margin-bottom:16px}.chart svg{height:110px}
.tbl-wrap{border:1px solid var(--line);border-radius:14px;background:#fff;overflow-x:auto;box-shadow:0 3px 10px #23365304}.tbl{border:0;border-radius:0}.tbl th{padding:15px 18px;font-weight:600;font-size:11px;letter-spacing:.4px;color:#596b85}.tbl td{padding:17px 18px;font-size:13px}.tbl tbody tr:hover{background:#f7faff}.tbl .name{font-size:14px}.tbl .slug{margin-top:4px;font-size:11px}.pill{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:6px;font-size:11px}.empty{padding:64px 24px;border-style:solid;background:linear-gradient(180deg,#fff,#fafcff);line-height:1.8;border-radius:14px}.empty::before{content:'—';display:block;margin:0 auto 16px;width:44px;height:44px;line-height:44px;border-radius:12px;background:#edf3ff;color:var(--blue);font-size:24px}
.tabs{gap:12px;overflow-x:auto;margin-bottom:18px}.tabs button{padding:12px 8px;white-space:nowrap;font-weight:600}.tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}.stream-layout{grid-template-columns:220px minmax(0,1fr);gap:20px}.stream-list{padding:0}.list-title{padding:16px;font-size:12px;font-weight:600}.st-item{padding:15px 14px}.st-item.on{background:#edf3ff;box-shadow:inset 3px 0 var(--blue)}.st-head{padding:15px 18px}.player-box{border-radius:12px}.player-ov-r button{min-height:30px;border-radius:6px}.player-msg{color:#c2ccda}.logbox{border-radius:10px;padding:12px 0}.logbox div{padding:5px 15px}.modal-bg{background:#12213a66;backdrop-filter:blur(4px)}.modal{padding:28px;border:0;border-radius:18px;box-shadow:0 24px 80px #12213a33;max-height:90dvh}.modal h2{font-size:22px;letter-spacing:-.4px}.modal-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}.toast{padding:13px 20px;border:0;border-radius:11px;box-shadow:0 8px 30px #14243c26;max-width:calc(100% - 32px)}.toast.err{background:#fff0f1;color:#a31d2a;border:1px solid #f4c5ca}
.login-body{background:radial-gradient(ellipse at 15% 10%,#e6efff,transparent 50%),radial-gradient(ellipse at 85% 90%,#e8f5f0,transparent 45%),#f7f9fc}.login-card{width:420px;max-width:100%;padding:38px;border-radius:22px;border-color:#e3e9f2;box-shadow:0 18px 60px #263c6810}.login-plate{margin-bottom:18px}.login-logo{height:44px;max-width:100%;object-fit:contain}.login-sub{margin-bottom:28px;font-size:13px}.login-title{text-align:center;font-size:25px;letter-spacing:-.6px;margin:0 0 8px}.login-foot{font-size:12px;line-height:1.7;margin-top:22px}.pw-wrap input{padding-right:46px}.pw-eye{top:2px;right:3px;min-width:40px;min-height:40px;color:var(--muted)}.login-card #lang-sel{display:block;margin:0 0 20px auto;min-height:32px}
@media(min-width:1101px){.gauges,.view{max-width:1680px;margin-left:auto;margin-right:auto}.gauges{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1650px){.gauges{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:1100px){.top{height:auto;flex-wrap:wrap;padding:16px 24px}.nav{order:3;width:100%;margin:0;overflow-x:auto}.nav a{white-space:nowrap;padding:10px 15px}.gauges{grid-template-columns:repeat(4,minmax(0,1fr));padding:24px 24px 0}.view{padding:24px}.brand{flex:1}.brand-text{display:none}}
@media(max-width:820px){.top{padding:12px 16px;gap:12px}.top-right{gap:8px}.gauges{padding:18px 16px 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gauge{padding:14px;min-height:104px}.g-value{font-size:20px}.view{padding:24px 16px}.page-head h1,.detail-head h1{font-size:23px}.page-head .search{margin-left:0;max-width:none;min-width:130px}.card,.chart{padding:18px}.stream-layout{grid-template-columns:minmax(0,1fr)}.stream-list{padding:0}.stream-list .st-item{min-width:180px}.modal{padding:22px;border-radius:18px 18px 10px 10px}.modal-bg{padding:8px}.tabs{gap:4px}.tbl-wrap{overflow-x:auto}.tbl:not(.tbl-stack){min-width:580px}.tbl-stack td{padding:7px 0}.tbl-stack tr{padding:16px}.page-head{gap:10px}.btn,.btn-primary{min-height:42px}.btn-sm{min-height:36px}.row-inline{flex-wrap:wrap}.row-inline input{min-width:0}.gauge:last-child{grid-column:1/-1}.login-card{padding:28px}.nav{scrollbar-width:thin}.brand img{height:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Keep fixed desktop navigation anchored to the viewport. */
.top{backdrop-filter:none}

/* User-selectable navigation. Expanded rail overlays content without layout shifts. */
body[data-role] .top{height:auto;min-height:84px;flex-wrap:wrap}
body[data-role] .brand{position:static;width:auto;flex:none}
body[data-role] .nav{order:3;width:100%;margin:0;display:flex;gap:6px;overflow-x:auto}
.nav a{display:flex;align-items:center;gap:12px;white-space:nowrap}
.nav-icon{display:none;width:20px;height:20px;flex:none}
.top-right{flex-wrap:wrap}
@media(max-width:820px){
  body[data-role] .top{padding:12px;gap:10px}
  .top-right{gap:8px;max-width:100%}
}

/* Circular statistics: one continuous, touch-scrollable row at every width. */
body[data-role] .gauges{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;max-width:100%;padding:22px 24px 12px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
body[data-role] .gauge{display:flex;flex-direction:row;align-items:center;flex:1 0 178px;min-width:178px;min-height:102px;gap:12px;padding:16px;scroll-snap-align:start}
.g-content{min-width:0;flex:1}.g-content .g-label{display:block;margin-bottom:7px}.g-content .g-value{display:block;font-size:18px;letter-spacing:-.4px;white-space:nowrap;overflow-wrap:normal}.g-content .g-sub{display:block;font-family:var(--sans);margin-top:6px;font-size:11px;overflow-wrap:anywhere}.g-content .g-bar{display:none}
body[data-role] .gauge:nth-child(2){min-width:228px;flex-basis:228px}
.g-ring{--usage:0%;--ring-color:var(--blue);display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:conic-gradient(var(--ring-color) var(--usage),#e9eef6 0);padding:4px}
.g-ring span{display:grid;place-items:center;background:white;border-radius:50%;width:36px;height:36px;color:var(--ring-color);font-size:22px;line-height:1}
.g-ring.hi{--ring-color:var(--amber)}.g-ring.crit{--ring-color:var(--red)}.gauge:nth-child(6) .g-ring{--ring-color:var(--green)}.g-ring-static{background:#eaf1ff}.g-ring-static span{background:#eaf1ff}
/* Constrain content, not the entire page, for tables and long URLs. */
body[data-role]{min-width:0}.top,.view,.detail-grid,.fw-grid,.page-head,.detail-head,.st-head{min-width:0}.page-head input,.detail-head select{min-width:0}.view img{max-width:100%}.tbl-wrap{max-width:100%;overflow-x:auto}.card,.modal{overflow-wrap:anywhere}.row-inline{max-width:100%}.row-inline>*{min-width:0}.tabs{max-width:100%;overflow-x:auto}.checks label{min-height:36px}.modal{max-height:90vh;max-height:90dvh}.login-body{min-height:100vh;min-height:100dvh}
@media(min-width:1400px){body[data-role] .gauge{flex-basis:170px;min-width:170px;padding:14px;gap:9px}.g-ring{width:40px;height:40px;flex-basis:40px}.g-ring span{width:32px;height:32px}}
@media(max-width:820px){
  body[data-role] .gauges{padding:16px 12px 10px;gap:10px}
  body[data-role] .gauge{flex:0 0 205px;min-width:205px;min-height:100px}
  .detail-grid,.fw-grid,.stream-layout{grid-template-columns:minmax(0,1fr)}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .btn,.btn-primary,.btn-sm,.tabs button,.player-ov-r button,#lang-sel{min-height:44px}
  input,select,textarea{font-size:16px}
  .modal-bg{padding:8px 8px max(8px,env(safe-area-inset-bottom));align-items:flex-end}
  .modal{width:100%;padding:20px;max-height:calc(100dvh - 24px)}
  .view{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  body[data-role] .top{position:relative;padding-top:max(12px,env(safe-area-inset-top))}
  .top-right{width:100%;margin-left:0;gap:8px}.top-right .user{display:none}.brand{max-width:100%}
}
@media(max-width:420px){.page-head .sp{display:none}.page-head .search{width:100%;flex:1 1 100%}.page-head>.btn-primary{width:100%}.card,.chart{padding:14px}.detail-head .sp{display:none}.detail-head .btn{flex:1 1 auto}.lk code{flex-basis:60%}.modal-foot>*{flex:1}}


/* Responsive layout correction: no mandatory horizontal metric scrollbar. */
body[data-role] .top{position:relative;background:#fff;min-height:64px;padding:12px 20px;gap:10px}
body[data-role] .nav{overflow-y:hidden}
body[data-role] .gauges{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;gap:8px;padding:14px 20px 4px;width:100%;scroll-snap-type:none}
body[data-role] .gauge,body[data-role] .gauge:nth-child(2){min-width:0;width:auto;min-height:88px;padding:12px;gap:8px;flex-basis:auto}
body[data-role] .g-content .g-value{font-size:16px;white-space:normal;overflow-wrap:anywhere;letter-spacing:-.3px}
.g-ring{width:34px;height:34px;flex-basis:34px;padding:3px}.g-ring span{width:28px;height:28px;font-size:18px}
.g-content .g-label{font-size:11px;margin-bottom:4px}.g-content .g-sub{margin-top:4px;font-size:11px}
#connection-status{padding:4px 20px;color:var(--muted);font-size:11px}#connection-status.is-error{color:#a12535;background:#fff0f1}body:not([data-role=admin]) #connection-status{display:none}
.view{padding:16px 20px 24px}.detail-head,.page-head{margin-bottom:14px}.stream-layout{grid-template-columns:180px minmax(0,1fr);gap:14px}.detail-grid{gap:14px;align-items:start}.detail-grid>.card{padding:14px}.tabs{overflow:visible;flex-wrap:wrap;gap:4px;margin-bottom:12px}.tabs button{padding:8px 7px;font-size:12px}.st-head{padding:10px 14px}.sec{margin:12px 0 8px;flex-wrap:wrap}.chart{padding:12px 14px;margin-top:14px}.chart svg{height:70px}.chart-head{flex-wrap:wrap;gap:6px;margin-bottom:8px}.lk{flex-wrap:wrap}.lk .lt{width:60px}.player-foot{flex-wrap:wrap;gap:4px}.st-head>.mono{overflow-wrap:anywhere}.card-head{min-width:0}
/* Hidden tabs and buttons must not be resurrected by display:flex rules. */
[hidden]{display:none!important}
@media(min-width:1101px){html[data-menu=horizontal] body[data-role] .nav{order:initial;width:auto;flex:1;justify-content:center}html[data-menu=horizontal] .brand-text{display:none}html[data-menu=horizontal] .top-right{margin-left:auto}.top-right{gap:8px}.nav a{padding:8px 10px}.brand img{height:25px}}
@media(max-width:1200px){body[data-role] .gauges{grid-template-columns:repeat(4,minmax(0,1fr))}.stream-layout{grid-template-columns:150px minmax(0,1fr)}.detail-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
@media(max-width:960px){.stream-layout{grid-template-columns:minmax(0,1fr)}.stream-list{display:flex;overflow-x:auto;padding:0}.stream-list .list-title{display:none}.st-item{min-width:150px;border-right:1px solid var(--line)}.detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){body[data-role] .gauges{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 12px 4px}.detail-grid{grid-template-columns:minmax(0,1fr)}.view{padding:12px}.g-content .g-value{font-size:16px}body[data-role] .gauge{padding:12px;min-height:90px}.gauge:last-child{grid-column:auto}.detail-head h1{font-size:21px}.detail-head .mono{overflow-wrap:anywhere}.card .tbl-wrap{max-width:100%}.tabs button{min-height:44px}.st-head .btn{min-height:44px}.top-right{justify-content:flex-start}.page-head .search{flex:1 1 100%}}
@media(max-width:360px){body[data-role] .gauge{gap:6px;padding:9px}.g-ring{width:30px;height:30px;flex-basis:30px}.g-ring span{width:24px;height:24px}.g-content .g-value{font-size:14px}}

.tabs button{margin-bottom:0}.tabs{padding-bottom:2px}
@media(min-width:1101px){.player-box{aspect-ratio:auto;height:clamp(180px,27vh,260px)}.player-box::before{display:none}} @media(max-width:700px){.lk code{flex:1 1 0%;min-width:0}.lk .lt{width:100%}.lk .btn{flex:0 0 auto}.chart svg{height:70px}.chart svg text{font-size:16px}}

/* ================================================================
   AMIX Ops redesign — "Consola empresarial" pass (2026)
   Re-themes the interactive accent, adds the navy top bar, and
   updates a handful of literal colors that weren't driven by CSS
   variables. No selector is renamed and no class/id used by app.js,
   metrics.js or navigation.js is touched.
   ================================================================ */
.brand span.brand-text{font-family:var(--disp);font-weight:700;letter-spacing:.02em}
.page-head h1,.detail-head h1{font-family:var(--disp);font-weight:700;letter-spacing:.01em}
.login-title{font-family:var(--disp);font-weight:700;letter-spacing:.01em}
.modal h2{font-family:var(--disp);font-weight:700;letter-spacing:.01em}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #c6282822}
.btn-primary{box-shadow:0 3px 7px #c6282820}
.btn-primary:hover{background:#8e1c1c;border-color:#8e1c1c}
.empty::before{background:#fbe1e1}
.st-item.on{background:#fbe1e1}
.g-ring-static,.g-ring-static span{background:#fbe1e1}
.login-body{background:radial-gradient(ellipse at 15% 10%,#fbe1e1,transparent 50%),radial-gradient(ellipse at 85% 90%,#e3f3ea,transparent 45%),#f7f9fc}

/* Navy top bar (enterprise console) — only the header strip goes
   dark; the rest of the panel stays on the light theme. */
body[data-role] .top{background:var(--navy);color:var(--navy-muted);border-bottom-color:var(--navy)}
.brand span.brand-text{color:#fff}
.nav a{color:var(--navy-muted)}
.nav a.on{background:var(--navy-2);color:#fff}
.nav a:hover:not(.on){background:#1c3350;color:#fff}
.top-right .user{color:#c9d3e0}
.top-right .btn-sm{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.top-right .btn-sm:hover{background:#2f4c70;border-color:#2f4c70}

/* Toolbar chips (language switch, status pill)
   — translucent on the navy bar instead of plain white form controls. */
.top-right select,.top-right #lang-sel{background:transparent;border:0;color:#fff;padding:4px 4px;border-radius:6px;cursor:pointer}
.top-right select:focus,.top-right #lang-sel:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.top-right select option,.top-right #lang-sel option{color:#1b2430;background:#fff}
.top-right #lang-sel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:6px 8px;font-weight:600}
.top-right .badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.top-right .badge-live{color:#7fd6a0}
.top-right .badge-off{color:#f2a8a8}
.top-right .badge-wait{color:#f0cf8a}
.top-right .badge-idle{color:var(--navy-muted)}
.lk .lt{color:var(--blue)}

/* Login — navy band matching the top menu bar (style B). The logo sits
   on a navy header strip; the form stays on the white card body below. */
.login-card{position:relative;padding:0;overflow:hidden}
.login-band{background:var(--navy);padding:30px 30px 22px;text-align:center}
.login-content{padding:22px 30px 26px}
.login-plate{margin-bottom:0}
.login-card #lang-sel{position:absolute;top:14px;right:16px;margin:0;min-height:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;padding:4px 8px;border-radius:6px;z-index:2}
.login-card #lang-sel:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.login-card #lang-sel option{color:#1b2430;background:#fff}
.login-card .btn-primary{background:var(--navy);border-color:var(--navy)}
.login-card .btn-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
@media(max-width:820px){
  .login-band{padding:24px 22px 18px}
  .login-content{padding:18px 22px 20px}
}

/* Login — the AMIX brand banner sits behind the whole card. Locked to
   full width (never cropped at the sides, so every logo stays visible)
   and anchored to the top so its own dark-red bottom edge blends into
   the fill color instead of showing a hard seam on tall screens. */
.login-body{
  background-color:#150304;
  background-image:linear-gradient(180deg,rgba(10,18,32,.35),rgba(45,3,4,.45)),url('/static/login-hero-full.jpg');
  background-repeat:no-repeat,no-repeat;
  background-position:center,center top;
  background-size:cover,100% auto;
}

/* ================================================================
   Ajuste de encaje vertical — que la vista de una señal quepa en
   una pantalla de escritorio normal sin necesitar scroll (y sin que
   la barra de desplazamiento del navegador aparezca y desaparezca
   con cada actualización). Solo recorta paddings/márgenes y el alto
   máximo del reproductor — ningún selector nuevo, ningún dato menos.
   ================================================================ */
@media(min-width:1101px){
  #connection-status{padding:2px 20px}
  body[data-role] .gauges{padding:10px 20px 2px}
  body[data-role] .gauge,body[data-role] .gauge:nth-child(2){min-height:72px;padding:10px 12px}
  .view{padding-top:10px}
  .detail-head{margin-bottom:8px}
  .st-head{padding:8px 14px}
  .detail-grid>.card{padding:10px 14px}
  .sec{margin:8px 0 6px}
  .chart{margin-top:10px;padding:10px 12px}
  .chart svg{height:60px}
  .player-box{aspect-ratio:auto;height:clamp(170px,25vh,240px)}
  .kv{padding:6px 0}
  .tabs{margin-bottom:8px}
  .tabs button{padding:6px 10px}
  /* Estadísticas/Lectores pueden traer más filas que el reproductor de al
     lado es alto — que esa columna se desborde hacia ADENTRO (su propio
     scroll) en vez de estirar toda la página cada vez que cambias de
     pestaña, que es lo que hacía que la barra del navegador apareciera y
     desapareciera. */
  #tab-out,#tab-stats,#tab-readers,#tab-device{max-height:300px;overflow-y:auto}
}

/* la barra de scroll (cuando de verdad hace falta) no debe entrar y
   salir empujando el contenido de lado a lado */
html{scrollbar-gutter:stable}