/* ===========================================================================
   S.I.V.I.P. - Panel de control (estetica de centro de mando, sobria y tactica)
   =========================================================================== */
:root{
  --bg:#0d1626;--panel:#142239;--panel-2:#1b2c48;--linea:#27416a;
  --cyan:#37c4e0;--ambar:#f5b942;--rojo:#e0392b;--verde:#46c479;
  --texto:#e8f1fb;--tenue:#8aa6c4;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Segoe UI",Roboto,system-ui,sans-serif;background:var(--bg);color:var(--texto);}
.oculto{display:none !important;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{
  width:100%;padding:11px 13px;background:var(--panel-2);border:1px solid var(--linea);
  border-radius:8px;color:var(--texto);font-size:14px;font-family:inherit;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);}
label{display:block;font-size:12px;color:var(--tenue);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.5px;}
h2{font-weight:700;}

/* LOGIN */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%,#16263f,transparent 50%),var(--bg);}
.login-caja{width:360px;background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:38px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);}
.login-logo{height:80px;width:auto;display:block;margin:0 auto 14px;}
.login-marca{font-size:30px;font-weight:800;letter-spacing:3px;color:var(--cyan);text-align:center;}
.login-sub{text-align:center;color:var(--tenue);margin:6px 0 24px;}
.login-caja input{margin-bottom:12px;}
.login-caja button{width:100%;padding:13px;background:var(--cyan);color:#06121f;font-weight:700;border:none;border-radius:8px;margin-top:8px;}
.login-error{color:var(--rojo);font-size:13px;text-align:center;margin-top:12px;min-height:18px;}
.login-version{color:var(--tenue);font-size:11px;text-align:center;margin-top:14px;opacity:.7;}

/* APP */
.app{display:flex;min-height:100vh;}
.lateral{width:236px;background:var(--panel);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;padding:24px 16px;}
.lateral .marca{font-size:22px;font-weight:800;letter-spacing:2px;color:var(--cyan);padding:0 8px 24px;display:flex;align-items:center;gap:10px;}
.marca-logo{height:34px;width:auto;}
.lateral nav{display:flex;flex-direction:column;gap:6px;flex:1;}
.nav{text-align:left;padding:12px 14px;background:transparent;border:none;color:var(--tenue);
  border-radius:8px;font-size:15px;display:flex;align-items:center;gap:11px;}
.nav .nav-ic{font-size:14px;width:18px;text-align:center;opacity:.85;}
.nav:hover{background:var(--panel-2);color:var(--texto);}
.nav.activo{background:var(--panel-2);color:var(--cyan);font-weight:600;box-shadow:inset 3px 0 0 var(--cyan);}
.usuario-actual{padding:10px 12px;margin-bottom:8px;background:var(--panel-2);border:1px solid var(--linea);border-radius:8px;}
.usuario-actual .ua-nombre{font-weight:600;font-size:14px;color:var(--texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.usuario-actual .ua-rol{font-size:11px;color:var(--cyan);text-transform:capitalize;margin-top:2px;}
.salir{padding:11px;background:transparent;border:1px solid var(--linea);color:var(--tenue);border-radius:8px;}
.salir:hover{border-color:var(--rojo);color:var(--rojo);}

/* ---- Usuarios y roles ---- */
.roles-leyenda{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.rol-pill{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap;border:1px solid var(--linea);}
.rol-administrador{background:rgba(245,185,66,.15);color:var(--ambar);border-color:rgba(245,185,66,.4);}
.rol-operador{background:rgba(55,196,224,.15);color:var(--cyan);border-color:rgba(55,196,224,.4);}
.rol-emergencias{background:rgba(224,57,43,.15);color:var(--rojo);border-color:rgba(224,57,43,.4);}

/* ---- Acceso remoto (túnel) ---- */
.tunel-estado{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;
  padding:16px;background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;}
.tunel-rotulo{font-size:12px;color:var(--tenue);margin-bottom:6px;}
.tunel-badge{font-size:16px;font-weight:700;}
.tunel-badge.apagado{color:var(--tenue);}
.tunel-badge.encendido{color:var(--verde);}
.tunel-url-caja{margin-top:18px;padding:18px;background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;}
.tunel-url-fila{display:flex;gap:10px;align-items:center;margin:8px 0 14px;}
.tunel-url{flex:1;font-size:18px;font-weight:700;color:var(--cyan);word-break:break-all;text-decoration:none;}
.tunel-url:hover{text-decoration:underline;}
.tunel-qr{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:10px;width:fit-content;margin:0 auto 8px;}

.contenido{flex:1;padding:30px 38px;overflow:auto;}
.cabecera{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.cabecera h1{font-size:26px;font-weight:700;letter-spacing:.5px;}
.estado-global{font-size:13px;padding:7px 14px;border-radius:20px;background:var(--panel-2);border:1px solid var(--linea);}
.estado-global.alerta{background:rgba(224,57,43,.18);border-color:var(--rojo);color:#ff8a7e;}
.vista-intro{color:var(--tenue);font-size:14px;line-height:1.6;margin-bottom:18px;max-width:760px;}
.vista-intro b{color:var(--texto);}
.grip-inline{color:var(--cyan);}

.btn-primario{background:var(--cyan);color:#06121f;font-weight:700;border:none;padding:11px 18px;border-radius:8px;}
.btn-primario:hover{background:#52d0e8;}
.btn-secundario{background:var(--panel-2);color:var(--texto);border:1px solid var(--linea);padding:11px 18px;border-radius:8px;}
.btn-secundario:hover{border-color:var(--cyan);}
.btn-bloque{width:100%;margin-top:10px;}

/* ---- pestañas de departamento ---- */
.tabs-depto{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--linea);padding-bottom:14px;}
.tab-depto{background:var(--panel);border:1px solid var(--linea);color:var(--tenue);
  padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
.tab-depto:hover{color:var(--texto);border-color:var(--cyan);}
.tab-depto.activo{background:rgba(55,196,224,.14);color:var(--cyan);border-color:var(--cyan);}
.tab-depto .tab-n{font-size:11px;background:var(--panel-2);color:var(--tenue);
  padding:1px 7px;border-radius:10px;font-variant-numeric:tabular-nums;}
.tab-depto.activo .tab-n{background:rgba(55,196,224,.2);color:var(--cyan);}

.prog-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.prog-titulo{font-size:18px;display:flex;align-items:center;gap:12px;}

/* ---- pills de nivel ---- */
.pill-nivel{font-size:11px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:1px;white-space:nowrap;}
.pill-nivel.n1{background:rgba(55,196,224,.16);color:var(--cyan);border:1px solid var(--cyan);}
.pill-nivel.n2{background:rgba(245,185,66,.16);color:var(--ambar);border:1px solid var(--ambar);}
.pill-nivel.n3{background:rgba(224,57,43,.16);color:#ff8a7e;border:1px solid var(--rojo);}

/* ---- secuencia de programacion (tarjetas arrastrables) ---- */
.secuencia{display:flex;flex-direction:column;gap:10px;min-height:60px;}
.secuencia.compacta{margin-top:12px;}
.vacio{color:var(--tenue);font-size:14px;padding:26px;text-align:center;border:1px dashed var(--linea);border-radius:10px;}

.card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--linea);
  border-radius:10px;padding:12px 14px;position:relative;transition:border-color .15s,box-shadow .15s;}
.card:hover{border-color:var(--cyan);}
.card.arrastrando{opacity:.45;border-style:dashed;}
.card.sobre{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(55,196,224,.3);}
.card.inactivo{opacity:.6;}

.grip{cursor:grab;color:var(--tenue);font-size:20px;line-height:1;user-select:none;padding:0 2px;}
.grip:active{cursor:grabbing;}
.ord{font-size:12px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums;width:22px;text-align:center;}

.miniatura{width:78px;height:48px;border-radius:7px;background:var(--panel-2);border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;flex-shrink:0;position:relative;}
.miniatura img{width:100%;height:100%;object-fit:cover;}
.miniatura .badge-vivo{position:absolute;top:3px;left:3px;background:var(--rojo);color:#fff;
  font-size:8px;font-weight:800;padding:1px 4px;border-radius:3px;letter-spacing:.5px;}

.card-info{flex:1;min-width:0;}
.card-info .t{font-weight:600;display:flex;align-items:center;gap:8px;}
.card-info .sub{font-size:12px;color:var(--tenue);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-tags{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;}
.tag{font-size:11px;color:var(--tenue);background:var(--panel-2);border:1px solid var(--linea);
  padding:2px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;}
.tag.tipo{color:var(--cyan);border-color:rgba(55,196,224,.4);}
.tag.pauta{color:var(--ambar);border-color:rgba(245,185,66,.35);}

.card-acciones{display:flex;align-items:center;gap:8px;}
.icono{background:var(--panel-2);border:1px solid var(--linea);color:var(--tenue);
  width:34px;height:34px;border-radius:7px;font-size:15px;}
.icono:hover{color:var(--texto);border-color:var(--cyan);}
.icono.peligro:hover{color:#ff8a7e;border-color:var(--rojo);}
.toggle{width:46px;height:26px;border-radius:14px;background:var(--linea);border:none;position:relative;flex-shrink:0;}
.toggle.on{background:var(--verde);}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;}
.toggle.on::after{left:23px;}

/* ---- cajas plegables Jefatura / Emergencia ---- */
.caja-nivel{margin-top:22px;background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:4px 16px 14px;}
.caja-nivel summary{cursor:pointer;padding:14px 0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:12px;list-style:none;}
.caja-nivel summary::-webkit-details-marker{display:none;}
.caja-nivel summary::before{content:"▸";color:var(--tenue);transition:.2s;}
.caja-nivel[open] summary::before{transform:rotate(90deg);}
.conteo{margin-left:auto;font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums;}

/* ---- rejilla de departamentos ---- */
.rejilla-depto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.depto-card{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:20px;position:relative;}
.depto-card:hover{border-color:var(--cyan);}
.depto-card::before{content:"";position:absolute;top:10px;left:10px;width:18px;height:18px;
  border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);opacity:.5;}
.depto-nombre{font-size:18px;font-weight:700;margin-bottom:4px;}
.depto-id{font-size:12px;color:var(--tenue);font-family:ui-monospace,monospace;margin-bottom:16px;}
.depto-stats{display:flex;gap:18px;margin-bottom:18px;}
.depto-stat{text-align:center;}
.depto-stat .n{font-size:24px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1;}
.depto-stat .l{font-size:11px;color:var(--tenue);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.depto-acciones{display:flex;gap:10px;}
.depto-acciones button{flex:1;font-size:13px;padding:9px;}

/* ---- vinculacion de pantallas ---- */
.vincular-caja{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:22px 24px;margin-bottom:8px;}
.vincular-caja h2{font-size:18px;margin-bottom:6px;}
.vincular-caja code{background:var(--panel-2);border:1px solid var(--linea);border-radius:5px;padding:1px 7px;color:var(--cyan);font-size:13px;}
.vincular-fila{align-items:flex-end;flex-wrap:wrap;}
.vincular-fila>div{min-width:120px;}
.vincular-btn{flex:0 0 auto;}
.vincular-btn button{white-space:nowrap;}
#vCodigo{text-transform:uppercase;letter-spacing:2px;font-weight:700;}
.chips-dispos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;min-height:30px;}
.dispos-rotulo{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.5px;}
.dispos-vacio{font-size:13px;color:var(--tenue);}
.chip-dispo{background:rgba(55,196,224,.12);border:1px solid var(--cyan);color:var(--cyan);
  font-weight:800;letter-spacing:2px;padding:5px 12px;border-radius:6px;font-size:14px;}
.chip-dispo:hover{background:rgba(55,196,224,.22);}
.seccion-titulo{font-size:18px;margin:24px 0 12px;}

/* tabla simple (pantallas) */
.tabla{display:flex;flex-direction:column;gap:10px;}
.item{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--linea);
  border-radius:10px;padding:14px 18px;}
.item:hover{border-color:var(--cyan);}
.nivel-pill{font-size:12px;font-weight:800;padding:5px 10px;border-radius:6px;white-space:nowrap;}
.n1{background:rgba(55,196,224,.18);color:var(--cyan);border:1px solid var(--cyan);}
.item-info{flex:1;min-width:0;}
.item-info .t{font-weight:600;}
.item-info .d{font-size:13px;color:var(--tenue);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.item-meta{font-size:12px;color:var(--tenue);text-align:right;white-space:nowrap;}

/* EMERGENCIA */
.panel-emergencia{max-width:620px;background:var(--panel);border:1px solid var(--rojo);border-radius:14px;padding:30px;}
.panel-emergencia h2{color:#ff8a7e;margin-bottom:8px;}
.aviso{color:var(--tenue);font-size:14px;line-height:1.6;margin-bottom:10px;}
.emergencia-controles{margin-top:22px;display:flex;flex-direction:column;gap:12px;}
.btn-emergencia{background:var(--rojo);color:#fff;font-weight:800;font-size:18px;padding:18px;border:none;
  border-radius:10px;letter-spacing:1px;box-shadow:0 8px 24px rgba(224,57,43,.4);}
.btn-emergencia:hover{background:#c52e22;}
.btn-desactivar{background:var(--panel-2);color:var(--texto);border:1px solid var(--linea);padding:13px;border-radius:8px;}
.em-estado{margin-top:16px;font-weight:600;}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(5,11,20,.78);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-caja{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:28px;}
.modal-chico{width:460px;}
.modal-editor{width:min(940px,96vw);max-height:94vh;overflow:auto;}
.modal-caja h3{margin-bottom:18px;font-size:20px;}
.fila{display:flex;gap:14px;}
.fila>div{flex:1;}
.check{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;margin-top:18px;}
.check input{width:auto;}
.modal-acciones{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}

/* editor 2 columnas */
.editor-cuerpo{display:flex;gap:24px;}
.editor-form{flex:1;min-width:0;}
.editor-preview{width:320px;flex-shrink:0;}

/* selector de tipo en tarjetas */
.tipo-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
.tipo-card{background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:14px;
  text-align:left;display:flex;flex-direction:column;gap:3px;color:var(--texto);transition:.15s;}
.tipo-card:hover{border-color:var(--cyan);}
.tipo-card.activo{border-color:var(--cyan);background:rgba(55,196,224,.12);box-shadow:0 0 0 1px var(--cyan);}
.tc-ic{font-size:22px;}
.tc-t{font-weight:700;font-size:14px;}
.tc-d{font-size:11px;color:var(--tenue);line-height:1.3;}

.entrada{margin-bottom:4px;}
.subir-fila{display:flex;align-items:center;gap:12px;margin-top:10px;}
.subir-btn{display:inline-block;margin:0;padding:10px 14px;background:var(--panel-2);
  border:1px dashed var(--cyan);border-radius:8px;color:var(--cyan);cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:14px;white-space:nowrap;}
.subir-btn:hover{background:rgba(55,196,224,.12);}
.subir-estado{font-size:13px;color:var(--tenue);}
.subir-estado.ok{color:var(--verde);}
.subir-estado.err{color:var(--rojo);}
.subir-ayuda{font-size:12px;color:var(--tenue);margin-top:8px;line-height:1.5;}

/* previsualizacion */
.preview-marco{background:#06101e;border:1px solid var(--linea);border-radius:10px;height:200px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.preview-marco img,.preview-marco video,.preview-marco iframe{width:100%;height:100%;object-fit:contain;border:0;background:#000;}
.preview-marco .t-cuerpo{padding:18px;font-size:15px;color:var(--texto);text-align:center;}
.preview-vacio{color:var(--tenue);font-size:13px;text-align:center;padding:20px;line-height:1.5;}

@media (max-width:820px){
  .editor-cuerpo{flex-direction:column;}
  .editor-preview{width:100%;}
  .tipo-cards{grid-template-columns:1fr;}
}

/* ===================== MÓVIL / TELÉFONO ===================== */
@media (max-width:640px){
  /* La app deja de ser lateral: barra superior + contenido a lo ancho */
  .app{flex-direction:column;min-height:100vh;}
  .lateral{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:10px 12px;gap:8px;border-right:none;border-bottom:1px solid var(--linea);}
  .lateral .marca{padding:0;font-size:18px;}
  .marca-logo{height:28px;}
  .lateral nav{flex-direction:row;flex:1 1 100%;overflow-x:auto;gap:4px;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .nav{padding:9px 12px;font-size:14px;white-space:nowrap;}
  .nav.activo{box-shadow:inset 0 -3px 0 var(--cyan);}
  .salir{padding:8px 12px;font-size:13px;}

  .contenido{padding:16px 14px;}
  .cabecera{flex-wrap:wrap;gap:8px;margin-bottom:16px;}
  .cabecera h1{font-size:20px;}

  /* Formularios de varias columnas -> una sola columna (no se corta nada) */
  .fila{flex-direction:column;gap:10px;}
  .vincular-fila>div{min-width:0;width:100%;}
  .vincular-btn button{width:100%;}
  #vCodigo{font-size:18px;}

  /* Programación / tarjetas: más compactas */
  .prog-cabecera{gap:10px;}
  .tabs-depto{padding-bottom:10px;gap:6px;}
  .card{gap:10px;padding:10px;flex-wrap:wrap;}
  .miniatura{width:56px;height:38px;}
  .rejilla-depto{grid-template-columns:1fr;}

  /* Modales a pantalla casi completa */
  .modal{padding:10px;align-items:flex-start;}
  .modal-caja{padding:18px;}
  .modal-editor,.modal-chico{width:100%;max-height:96vh;}
}

/* ---- Programación semanal: casillas de días ---- */
.dias-semana{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px;}
.dias-semana label{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--texto);
  background:var(--panel-2);border:1px solid var(--linea);border-radius:8px;padding:6px 10px;cursor:pointer;}
.dias-semana input{accent-color:var(--cyan);}
.prog-simple{background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:14px 16px;margin:6px 0 4px;}
.prog-titulo-mini{font-weight:700;font-size:15px;margin-bottom:4px;color:var(--cyan);}
.tenue-inline{color:var(--tenue);font-weight:400;font-size:12px;}
.input-chico{width:110px;}
.avanzado{margin-top:12px;border-top:1px dashed var(--linea);padding-top:10px;}
.avanzado summary{cursor:pointer;color:var(--tenue);font-size:13px;}
.avanzado summary:hover{color:var(--texto);}
.horarios-fila{align-items:end;}
.horarios-fila input[type=number]{width:90px;}
.horarios-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px;}
.hora-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(55,196,224,.15);
  border:1px solid rgba(55,196,224,.4);color:var(--cyan);border-radius:999px;padding:5px 6px 5px 12px;font-weight:600;font-size:13px;}
.hora-chip button{background:rgba(224,57,43,.2);color:#f0a59e;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;line-height:1;}
.hora-chip button:hover{background:var(--rojo);color:#fff;}

/* ---- Gestion de pantallas (cambiar canal / desvincular) ---- */
.pantalla-controles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ctrl-canal{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tenue);}
.ctrl-canal select{padding:7px 9px;background:var(--panel-2);color:var(--texto);border:1px solid var(--linea);border-radius:8px;}
.ctrl-canal select.guardado{border-color:var(--verde);box-shadow:0 0 0 2px rgba(70,196,121,.25);}
.btn-secundario.peligro{border-color:rgba(224,57,43,.4);color:#f0a59e;}
.btn-secundario.peligro:hover{border-color:var(--rojo);color:var(--rojo);}
@media (max-width:720px){ .pantalla-item{flex-wrap:wrap;} .pantalla-controles{width:100%;} }

/* ---- Muro de monitoreo (tipo CCTV) ---- */
.muro{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.mon-card{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .2s;}
.mon-card.modo-jefatura{border-color:rgba(245,185,66,.6);}
.mon-card.modo-emergencia{border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo),0 0 24px rgba(224,57,43,.3);animation:monAlerta 1.2s ease-in-out infinite;}
@keyframes monAlerta{50%{box-shadow:0 0 0 1px var(--rojo),0 0 8px rgba(224,57,43,.15);}}
.mon-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mon-nombre{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mon-badge{font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:4px;white-space:nowrap;}
.mon-badge.b-normal{background:rgba(55,196,224,.15);color:var(--cyan);border:1px solid rgba(55,196,224,.4);}
.mon-badge.b-jefatura{background:rgba(245,185,66,.15);color:var(--ambar);border:1px solid rgba(245,185,66,.4);}
.mon-badge.b-emergencia{background:var(--rojo);color:#fff;border:1px solid var(--rojo);}
.mon-tira{display:flex;gap:6px;flex-wrap:wrap;min-height:46px;}
.mon-mini{width:64px;height:42px;border-radius:6px;overflow:hidden;background:var(--panel-2);border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mon-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.mon-ic{font-size:20px;}
.mon-vacio{color:var(--tenue);font-size:12px;padding:12px 0;}
.mon-pantallas{display:flex;flex-wrap:wrap;gap:6px;}
.mon-pant{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--linea);white-space:nowrap;}
.mon-pant.on{color:var(--verde);border-color:rgba(70,196,121,.4);background:rgba(70,196,121,.1);}
.mon-pant.off{color:var(--tenue);background:var(--panel-2);}
.mon-pies{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:10px;}
.mon-cont-est{font-size:12px;color:var(--tenue);}
.mon-links{display:flex;gap:6px;}
.mon-links .btn-secundario{padding:5px 9px;font-size:12px;}

/* ---- URL pública (base de los enlaces) ---- */
.url-publica-caja{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:14px 16px;margin:10px 0 16px;}
.url-publica-caja input{width:100%;}
#urlPublicaEstado{color:var(--verde);}

/* ---- Constructor de canal combinado ---- */
.combinado-builder{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:14px 16px;margin:14px 0;}
.combinado-builder h3{font-size:15px;margin-bottom:6px;}
.combinado-builder #btnComb{margin-top:6px;}
.combinado-builder #combResultado:not(:empty){margin-top:14px;}

/* ---- Enlaces directos a canales ---- */
.enlaces-canales{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.enlace-canal{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;
  background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:12px 14px;}
.ec-nombre{font-weight:600;margin-bottom:3px;}
.ec-url{display:block;font-size:12px;color:var(--cyan);text-decoration:none;word-break:break-all;}
.ec-url:hover{text-decoration:underline;}
.ec-url.pub{color:var(--verde);margin-top:2px;}
.ec-acciones{display:flex;gap:8px;}
.ec-qr{grid-column:1 / -1;display:flex;justify-content:center;}
.ec-qr:not(:empty){padding:12px;background:#fff;border-radius:10px;width:fit-content;margin:4px auto 0;}