/* ===== Ajustes propios de la demo (sobre el mismo CSS del sistema real) ===== */
html, body { min-height: 100%; }
.hide{display:none!important}
body { user-select:none; -webkit-user-select:none; -moz-user-select:none; }
input, textarea, select, [contenteditable] { user-select:text; -webkit-user-select:text; -moz-user-select:text; }

/* Banner DEMO */
.demoflag{
  position:fixed; top:0; left:0; right:0; height:30px; z-index:1300;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:linear-gradient(90deg,#7c3aed,#2563eb); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
}
.demoflag svg{flex-shrink:0}
.demoflag b{background:rgba(255,255,255,.22); border-radius:6px; padding:1px 7px; margin:0 2px; font-size:.66rem}
.demoflag .txt{opacity:.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.demoflag button{margin-left:auto; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:6px; padding:1px 9px; font-size:.66rem; font-weight:600; flex-shrink:0}
.demoflag button:hover{background:rgba(255,255,255,.35)}

/* Login replica (mismo aspecto que el login real) */
.login-screen{
  position:fixed; inset:0; z-index:1400; background:var(--bg-gradient);
  display:flex; align-items:center; justify-content:center; padding:18px; overflow:auto;
}
.login-screen .login-card{width:100%; max-width:420px; margin:0 auto}
.login-screen .lang-switch{position:absolute; top:44px; right:20px; background:var(--login-card-bg); border-radius:50px; padding:5px 16px; box-shadow:0 4px 12px rgba(0,0,0,.08); font-size:.85rem; font-weight:600}
.login-screen .offline-note{display:inline-flex; align-items:center; gap:8px; color:#6c757d; font-size:13px}
.login-screen .offline-note .conn-dot.on{background:#28a745; box-shadow:0 0 0 3px rgba(40,167,69,.18)}

/* App shell: offset por el banner */
.demo-app .sidebar{top:30px; height:calc(100vh - 30px); height:calc(100dvh - 30px)}
.demo-app .top-bar{top:36px}
.demo-app .content{padding-top:52px}
.demo-app .sidebar-header img{width:72px;height:72px;margin-bottom:8px;filter:brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.3))}

/* Vistas demo (usan las mismas tarjetas del sistema) */
.view-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 16px}
.view-title h4{margin:0; font-size:1.15rem; font-weight:700}
.bars{display:flex; align-items:flex-end; gap:8px; height:150px; padding:10px 4px 0; border-bottom:1px solid var(--bs-border-color)}
.bars .bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%}
.bars .fill{width:100%; background:linear-gradient(180deg,var(--primary),var(--primary-dark)); border-radius:6px 6px 0 0; opacity:.85; min-height:4px; transition:height .5s}
.bars .lbl{font-size:.64rem; color:var(--bs-secondary-color); font-weight:600}
.stat-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.tag-plain{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap}
.tag-plain.nuevo{background:rgba(34,197,94,.14);color:#059669}
.tag-plain.bajo{background:rgba(245,158,11,.16);color:#b45309}
.tag-plain.crit{background:rgba(239,68,68,.14);color:#b91c1c}
.mini-btn{font-size:.72rem; padding:3px 9px; border-radius:7px; border:1px solid var(--bs-border-color); background:transparent; color:inherit; font-weight:600}
.mini-btn:hover{border-color:var(--primary); color:var(--primary)}
.mini-btn.ok{color:#059669;border-color:rgba(34,197,94,.4)}
.mini-btn.del{color:#dc2626;border-color:rgba(239,68,68,.4)}
/* Bloqueado */
.locked-wrap{max-width:560px;margin:0 auto;text-align:center;padding:24px 8px}
.locked-ic{width:74px;height:74px;border-radius:20px;background:linear-gradient(135deg,#fef3c7,#fde68a);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
/* Menú contextual propio */
#ctxMenu{
  position:fixed; z-index:1500; min-width:168px; display:none;
  background:var(--bs-body-bg); border:1px solid var(--bs-border-color);
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:6px; overflow:hidden;
}
#ctxMenu button{
  display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:0;
  color:var(--bs-body-color); padding:8px 12px; border-radius:8px; font-size:.82rem; font-weight:500; text-align:left;
}
#ctxMenu button:hover{background:rgba(var(--primary-rgb),.1); color:var(--primary)}
#ctxMenu hr{margin:5px 8px; border-color:var(--bs-border-color)}
/* Toast */
#toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1600;
  background:#0f172a; color:#f8fafc; padding:11px 16px; border-radius:10px; font-size:.8rem; font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .25s; max-width:90vw; text-align:center}
#toast.show{opacity:1; pointer-events:auto}
#toast a{color:#fbbf24; font-weight:700}
/* Modal simple para tickets */
.modal-wrap{position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:1450; padding:18px; backdrop-filter:blur(2px)}
.modal{background:var(--bs-body-bg); border-radius:14px; max-width:520px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.3); overflow:hidden; color:var(--bs-body-color)}
.modal .mh{padding:15px 20px; border-bottom:1px solid var(--bs-border-color); font-weight:700; display:flex; justify-content:space-between; align-items:center}
.modal .mh button{border:none; background:none; font-size:1.15rem; color:var(--bs-secondary-color); line-height:1}
.modal .mb{padding:18px 20px}
.modal .mb p{font-size:.85rem; color:var(--bs-secondary-color); margin-bottom:12px}
.modal .mrow{display:flex; justify-content:space-between; font-size:.85rem; padding:5px 0; border-bottom:1px dashed var(--bs-border-color); gap:10px}
.modal .mrow.total{font-weight:700; font-size:1rem; border-bottom:none}
.modal .mbt{display:flex; gap:8px; margin-top:16px; justify-content:flex-end}
/* Responsive */
@media(max-width:992px){
  .demo-app .content{padding-top:44px}
  .modal{max-width:480px}
}
@media(max-width:576px){
  .demoflag .txt{display:none}
  .demoflag{height:28px}
  .demo-app .sidebar{top:28px; height:calc(100vh - 28px)}
  .demo-app .top-bar{top:34px}
  .demo-app .content{padding-top:40px; padding-left:12px; padding-right:12px}
  .login-screen .lang-switch{right:10px; top:40px}
  .bars{height:120px}
}
@media (orientation:landscape) and (max-height:520px){
  .demo-app .sidebar{top:28px; height:calc(100vh - 28px)}
  .demo-app .content{padding-top:40px}
  .login-screen .login-card{max-width:400px}
}