:root{
  --accent:#517da2; --accent2:#4fae4e; --bg:#e6ebee; --side:#fff; --line:#e4e7eb;
  --out:#effdde; --out-b:#eaffd6; --in:#fff; --txt:#222; --muted:#8a99a8; --unread:#4fae4e;
  --head:#5682a3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt)}
body{overflow:hidden}
.hidden{display:none!important}
input{font-family:inherit;font-size:15px}
a{color:var(--accent);text-decoration:none}

/* ░ AUTH ░ */
.auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#6a90b0,#45688a);padding:16px}
.auth-card{background:#fff;border-radius:16px;padding:30px 26px;width:100%;max-width:380px;box-shadow:0 18px 60px rgba(0,0,0,.25);text-align:center}
.auth-logo{color:var(--accent);display:flex;justify-content:center;margin-bottom:8px}
.auth-card h1{font-size:21px;margin:6px 0 4px}
.auth-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px}
.field{margin-bottom:12px}
.field input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;outline:none}
.field input:focus{border-color:var(--accent)}
.field input:disabled{background:#f1f4f7;color:var(--muted);cursor:not-allowed}
.btn-primary{width:100%;padding:13px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:16px;font-weight:600;cursor:pointer;margin-top:4px}
.btn-primary:active{opacity:.85}
.auth-err{color:#d0021b;font-size:13px;min-height:18px;margin:2px 0 6px;text-align:left}
.auth-switch{margin-top:16px;font-size:14px;color:var(--muted)}
/* usuario obligatorio: estado (libre/ocupado) + opciones sugeridas */
.un-status{font-size:12.5px;text-align:left;margin:5px 2px 0;color:var(--muted)}
.un-status:empty{display:none}
.un-status.ok{color:#2e9b4f}
.un-status.bad{color:#d0021b}
.un-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.un-sug:empty{display:none}
.un-chip{border:1.5px solid var(--line);background:#f4f7fa;color:var(--accent);border-radius:16px;padding:6px 11px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.un-chip:active{background:#e3ebf2}

/* ░ APP LAYOUT ░ */
/* La app se clava al área VISIBLE (--app-h/--app-t los pone app.js desde visualViewport): al abrir
   el teclado se encoge en vez de que el navegador empuje la página y esconda la barra superior. */
.app{display:flex;position:fixed;left:0;right:0;top:var(--app-t,0px);height:100%}
.sidebar{width:380px;max-width:40%;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:260px}
.convo{flex:1;display:flex;flex-direction:column;background:#d5dbe0;position:relative}
.convo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.4),transparent 40%);pointer-events:none}

.side-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--side)}
.search-wrap{flex:1}
.search-wrap input{width:100%;padding:9px 14px;border:0;border-radius:18px;background:#f1f3f5;outline:none}
.icon-btn{background:none;border:0;color:#8a98a6;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f1f3f5}

.side-list,.side-search-results{flex:1;overflow-y:auto;overflow-x:hidden}
.chat-row{display:flex;gap:12px;padding:9px 12px;cursor:pointer;align-items:center;border-bottom:1px solid #f3f5f7}
.chat-row:hover{background:#f5f7f9}
.chat-row.active{background:var(--accent);color:#fff}
.chat-row.active .chat-sub,.chat-row.active .chat-time{color:#dceaf5}
.avatar{width:50px;height:50px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:19px;background:var(--accent)}
.avatar.sm{width:40px;height:40px;font-size:16px}
.chat-main{flex:1;min-width:0}
.chat-top{display:flex;justify-content:space-between;align-items:baseline}
.chat-name{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-time{font-size:12px;color:var(--muted);flex-shrink:0;margin-left:6px}
.chat-bot{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.chat-sub{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}
.badge{background:var(--unread);color:#fff;font-size:12px;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* ░ CONVO ░ */
.convo-empty{flex:1;display:flex;align-items:center;justify-content:center}
.convo-empty-bubble{background:rgba(0,0,0,.14);color:#fff;padding:7px 16px;border-radius:14px;font-size:14px}
.convo-active{flex:1;display:flex;flex-direction:column;min-height:0;z-index:1;position:relative}
.convo-head{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--side);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05);z-index:2}
.convo-head-info{flex:1;min-width:0}
.convo-head-title{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo-head-sub{font-size:13px;color:var(--muted)}
.messages{flex:1;overflow-y:auto;padding:14px 6%;display:flex;flex-direction:column;gap:3px}
.msg{max-width:72%;padding:7px 11px 6px;border-radius:12px;font-size:15px;line-height:1.35;position:relative;word-wrap:break-word;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.msg.in{align-self:flex-start;background:var(--in);border-top-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--out);border-top-right-radius:4px}
.msg .sender{font-size:12.5px;font-weight:600;margin-bottom:2px}
.msg .time{font-size:11px;color:var(--muted);float:right;margin:6px 0 -2px 10px}
/* Día de la conversación (Hoy / Ayer / fecha). .day-float = la misma etiqueta flotando arriba
   mientras se desplaza, con el día de lo que se está viendo (como WhatsApp). */
.day-sep,.day-float{background:rgba(55,75,95,.72);color:#fff;font-size:12.5px;font-weight:600;padding:4px 13px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.day-sep{align-self:center;margin:8px 0;flex-shrink:0}
.day-float{position:absolute;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;background:rgba(55,75,95,.9);transition:opacity .25s;white-space:nowrap}
.day-float.off{opacity:0}
.composer{display:flex;gap:8px;padding:9px 12px;background:var(--side);border-top:1px solid var(--line);align-items:center}
.composer input{flex:1;padding:11px 16px;border:0;border-radius:20px;background:#f1f3f5;outline:none}
.send-btn{background:var(--accent);border:0;color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send-btn:active{opacity:.85}

/* search results */
.sr-row{display:flex;gap:12px;padding:10px 12px;cursor:pointer;align-items:center}
.sr-row:hover{background:#f5f7f9}
.sr-name{font-weight:600;font-size:15px}
.sr-sub{font-size:13px;color:var(--muted)}
.sr-head{padding:8px 14px;font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.5px}

/* ░ MODAL ░ */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-card{background:#fff;border-radius:14px;max-width:420px;width:100%;max-height:86vh;overflow:auto;padding:20px}
.modal-card h2{margin:0 0 14px;font-size:19px}
.modal-card .field{margin-bottom:12px}
.modal-card .row{display:flex;gap:10px;margin-top:8px}
.btn-sec{flex:1;padding:12px;border:1.5px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;font-weight:600;color:#555}
.pick{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer}
.pick:hover{background:#f1f3f5}
.pick.sel{background:#e7f0f8}
.pick .chk{margin-left:auto;color:var(--accent);font-weight:700}

/* ░ TOAST / INSTALL ░ */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:11px 18px;border-radius:22px;font-size:14px;z-index:99;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.install{position:fixed;bottom:0;left:0;right:0;background:var(--accent);color:#fff;display:flex;align-items:center;gap:12px;padding:12px 16px;z-index:60}
.install span{flex:1;font-size:14px}
.install button{background:#fff;color:var(--accent);border:0;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer}
.install .install-x{background:transparent;color:#fff;font-size:16px;padding:4px 8px}

/* ░ LLAMADA ░ */
.call{position:fixed;inset:0;z-index:80;background:#0e1621;display:flex;flex-direction:column;align-items:center;justify-content:center}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e1621}
.call-local{position:absolute;right:14px;top:14px;width:110px;height:150px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:#223;z-index:2}
.call-top{position:relative;z-index:2;text-align:center;color:#fff;margin-top:8vh}
.call-top .avatar{width:96px;height:96px;font-size:38px;margin:0 auto 14px}
.call-name{font-size:22px;font-weight:600}
.call-state{font-size:15px;opacity:.8;margin-top:4px}
.call-actions,.inc-actions{position:relative;z-index:2;display:flex;gap:22px;margin-top:auto;margin-bottom:9vh}
.inc-actions{margin:22px 0 0}
.call-btn{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:#39506b;display:flex;align-items:center;justify-content:center}
.call-btn.call-hang{background:#e5484d}
.call-btn.call-accept{background:#3dd36a}
.call-btn.active{background:#fff;color:#39506b}
.incoming{position:fixed;inset:0;z-index:85;background:rgba(10,18,30,.75);display:flex;align-items:center;justify-content:center;padding:20px}
.incoming-card{background:#17212b;color:#fff;border-radius:18px;padding:28px 26px;text-align:center;max-width:320px;width:100%}
.inc-name{font-size:21px;font-weight:600}
.inc-sub{opacity:.75;margin-top:4px}

.only-mobile{display:none}
.only-direct{display:flex}
/* ░ MÓVIL ░ */
@media(max-width:820px){
  .sidebar{width:100%;max-width:100%}
  .convo{display:none}
  .app.show-convo .sidebar{display:none}
  .app.show-convo .convo{display:flex}
  .only-mobile{display:flex}
  .msg{max-width:84%}
}

/* ── teclado móvil: alto real del viewport visible ── */
.app, .auth { height: var(--app-h, 100dvh); }
/* ── palomitas ✓ / ✓✓ ── */
.ticks { margin-left: 4px; font-size: 12px; color: var(--muted); }
.ticks.read { color: #4aa3df; }
/* ── mensajes con imagen / archivo ── */
.msg.media { padding: 4px 4px 6px; }
.msg-img { max-width: 240px; max-height: 320px; border-radius: 10px; display: block; cursor: pointer; }
.msg-file { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 4px 2px; }
.msg-file .mf-ic { font-size: 20px; }
.msg-file .mf-nm { font-size: 14px; word-break: break-all; color: var(--accent); }
/* ── perfil ── */
.pf-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.pf-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pf-row span { color: var(--muted); }
.pf-link { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); word-break: break-all; }
/* ── galería compartida ── */
.media-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.media-tabs .mt { flex: 1; padding: 8px; border: 0; background: #f1f3f5; border-radius: 8px; cursor: pointer; font-weight: 600; color: #555; }
.media-tabs .mt.active { background: var(--accent); color: #fff; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.media-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; }
/* ── grupo privado (JM Home) ── */
.grp-priv { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.grp-priv input { margin-top: 2px; }
.grp-priv b { color: var(--accent); }

/* Foto de perfil dentro del círculo del avatar (encima de las iniciales) */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── nota de voz ── */
.msg-voice audio { width: 220px; max-width: 60vw; height: 36px; display: block; }
.voice-tr { font-size: 13px; color: #33691e; margin-top: 4px; line-height: 1.3; white-space: pre-wrap; }
.msg.out .voice-tr { color: #3a5f0b; }
.voice-tr-empty { color: var(--muted); font-style: italic; }
/* ── responder (cita) ── */
.msg-reply { border-left: 3px solid var(--accent); padding: 2px 8px; margin: 0 0 4px; background: rgba(0,0,0,.05); border-radius: 4px; }
.msg-reply-name { font-size: 12px; font-weight: 700; color: var(--accent); }
.msg-reply-prev { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--side); border-top: 1px solid var(--line); }
.reply-bar-body { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 8px; }
.reply-bar-name { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.reply-bar-prev { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── reacciones ── */
.msg-rx { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.rx-pill { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; padding: 1px 7px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.rx-row { display: flex; justify-content: space-around; margin-bottom: 14px; }
.rx-btn { background: none; border: 0; font-size: 28px; cursor: pointer; padding: 4px; border-radius: 50%; }
.rx-btn:hover { background: #f1f3f5; }
/* ── barra de grabación ── */
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--side); border-top: 1px solid var(--line); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #e5484d; animation: recpulse 1s infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Avisos de sistemas (videovigilancia): foto/video + texto + botones, como Telegram */
.msg-vid { background: #000; }
.alert-cap { padding: 6px 6px 2px; font-size: 14.5px; line-height: 1.4; }
.alert-btns { display: flex; flex-direction: column; gap: 5px; padding: 6px 4px 2px; }
.alert-btn { display: block; text-align: center; padding: 8px 10px; border-radius: 8px;
  background: rgba(81,125,162,.12); color: var(--accent, #3390ec); font-weight: 600;
  font-size: 14px; text-decoration: none; }
.alert-btn:active { opacity: .7; }

/* Encabezado del chat ~30% más bajo (antes ~66px, ahora ~46px). 2026-10-16 */
.convo-head{padding:4px 12px;gap:10px}
.convo-head .avatar{width:34px;height:34px;font-size:14px}
.convo-head .avatar img{width:34px;height:34px}
.convo-head-title{font-size:15px;line-height:1.2}
.convo-head-sub{font-size:12px;line-height:1.2}
.convo-head .icon-btn{padding:4px}

/* Chats fijos de JM Home (depto + canales Administración / Monitoreo). 2026-10-16 */
.chat-row.pinned{background:rgba(23,105,255,.04)}
.chat-name .pin-ic{color:#8a98a6;margin-right:4px;vertical-align:-1px}
/* fijo + seleccionado: gana el azul de seleccionado (si no, quedaba texto blanco sobre blanco) */
.chat-row.pinned.active{background:var(--accent);color:#fff}
.chat-row.active .pin-ic{color:#dceaf5}

/* enlace para compartir chats fijos */
.share-box{margin:12px 0;padding:10px;border-radius:12px;background:var(--bg2,rgba(127,127,127,.08))}
.share-url{width:100%;box-sizing:border-box;padding:8px;border-radius:8px;border:1px solid rgba(127,127,127,.3);font-size:12px;background:transparent;color:inherit}

/* íconos de los chats fijos de JM Home */
.avatar .jm-ic{width:56%;height:56%;display:block}

/* bienvenida de los chats fijos de JM Home */
.jm-bienv{align-self:center;max-width:min(440px,92%);margin:10px auto 14px;padding:12px 14px;border-radius:14px;background:#fff;color:#1f2d3d;box-shadow:0 1px 2px rgba(0,0,0,.08);border-top:3px solid #003478;font-size:13.5px;line-height:1.45}
.jm-bienv-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15px;color:#003478}
.jm-bienv-h .avatar.sm{width:34px;height:34px}
.jm-bienv ul{margin:6px 0 8px;padding-left:18px}
.jm-bienv li{margin:2px 0}
.jm-bienv-pie{font-size:12px;color:#5b6b7b;border-top:1px solid #eef1f4;padding-top:7px}