*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:'Segoe UI',Arial,sans-serif;background:#0a0a0a;display:flex;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;padding:15px;}
.cbox{width:100%;max-width:410px;height:90vh;max-height:700px;background:#0d0d0d;border-radius:14px;overflow:hidden;box-shadow:0 0 30px rgba(255,0,0,0.3);border:1px solid #2a0a0a;position:relative;display:flex;flex-direction:column;}
.cbox-mensajes{flex:1;overflow-y:auto;overflow-x:hidden;padding:15px;background:#0a0a0a;-webkit-overflow-scrolling:touch;}
.mensaje{display:flex;gap:12px;margin-bottom:18px;padding:12px;border-radius:12px;border:1px solid #ff1a1a;box-shadow:0 0 12px rgba(255,26,26,0.4);background:rgba(20,5,5,0.6);position:relative;}
.avatar-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;}
.avatar{width:55px;height:55px;border-radius:10px;object-fit:cover;border:2px solid #4af;box-shadow:0 0 10px rgba(68,170,255,0.6);}
.avatar-letra{display:flex;align-items:center;justify-content:center;background:#ff3b3b;font-size:24px;color:#fff;width:55px;height:55px;border-radius:10px;border:2px solid #4af;}
.bandera-img{width:26px;height:19px;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.6);}
.msg-content{flex:1;min-width:0;}
.msg-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;gap:6px;}
.nombre{font-weight:bold;font-size:15px;text-shadow:0 0 8px currentColor;cursor:pointer;word-break:break-word;}
.nombre:hover{text-decoration:underline;}
.rol-admin{color:#ff3b3b;}.rol-moderador{color:#3bff6e;}.rol-usuario{color:#ff6ec7;}.rol-bot{color:#a855f7;}
.estrella-admin{color:#ffd700;text-shadow:0 0 8px #ffd700;}.estrella-mod{color:#fff;text-shadow:0 0 6px #fff;}
.candado-reg{color:#ffd700;font-size:12px;}
.hora{color:#888;font-size:12px;margin-left:8px;white-space:nowrap;flex-shrink:0;}
.texto{color:#e0e0e0;font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;}
.mencion{color:#4af;font-weight:bold;text-shadow:0 0 6px #4af;}
.mencion-yo{background:rgba(255,215,0,0.2);color:#ffd700;padding:1px 5px;border-radius:4px;font-weight:bold;}
.emoji-msg{width:24px;height:24px;vertical-align:middle;}
.adjunto-img{max-width:100%;max-height:180px;border-radius:8px;margin-top:6px;border:1px solid #ff1a1a;cursor:pointer;display:block;}
.adjunto-file{display:inline-flex;gap:6px;margin-top:6px;padding:8px 12px;background:rgba(255,26,26,0.15);border:1px solid #ff1a1a;border-radius:8px;color:#ff6ec7;text-decoration:none;font-size:13px;max-width:100%;}
.aviso-mod{background:rgba(255,165,0,0.1);border:1px dashed #ffa500;border-radius:8px;padding:8px 12px;margin-bottom:18px;color:#ffa500;font-size:13px;text-align:center;}
.btn-borrar{position:absolute;top:6px;right:8px;color:#ff3b3b;cursor:pointer;font-size:14px;opacity:0.5;padding:4px;}
.btn-borrar:hover{opacity:1;}
.escribiendo-barra{display:none;align-items:center;gap:8px;padding:6px 15px;background:rgba(255,26,26,0.08);border-top:1px solid #2a0a0a;font-size:12px;color:#ff6ec7;min-height:30px;flex-shrink:0;}
.escribiendo-barra.activo{display:flex;}
.dots-escribiendo{display:inline-flex;gap:3px;}
.dots-escribiendo span{width:6px;height:6px;border-radius:50%;background:#ff6ec7;animation:bounce 1.4s infinite ease-in-out both;}
.dots-escribiendo span:nth-child(1){animation-delay:-0.32s;}.dots-escribiendo span:nth-child(2){animation-delay:-0.16s;}
@keyframes bounce{0%,80%,100%{transform:scale(0);opacity:0.5;}40%{transform:scale(1);opacity:1;}}
.texto-escribiendo b{color:#fff;}
.titulo-musical{text-align:center;padding:10px;color:#ff3b3b;font-style:italic;font-weight:bold;text-shadow:0 0 10px #ff3b3b;font-size:15px;flex-shrink:0;}
.cbox-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;border-top:1px solid #2a0a0a;border-bottom:1px solid #2a0a0a;flex-shrink:0;}
.toolbar-icon{color:#aaa;font-size:20px;cursor:pointer;text-decoration:none;padding:4px;}
.toolbar-icon:hover{color:#fff;}
.online-count{display:flex;align-items:center;gap:5px;color:#ccc;font-size:14px;cursor:pointer;padding:4px 8px;border-radius:6px;}
.online-count:hover{background:rgba(255,26,26,0.15);}
.dot-online{width:10px;height:10px;border-radius:50%;background:#3bff6e;box-shadow:0 0 8px #3bff6e;}
.mi-pais{display:flex;align-items:center;gap:4px;color:#ccc;font-size:13px;}
.mi-pais .bandera-img{width:22px;height:16px;}
.panel-emojis{display:none;flex-wrap:wrap;gap:6px;padding:10px 15px;background:#120505;max-height:130px;overflow-y:auto;flex-shrink:0;}
.emoji-pick{width:32px;height:32px;cursor:pointer;}
.emoji-pick:hover{transform:scale(1.3);}
.cbox-form{padding:12px 15px;flex-shrink:0;}
.fila-nombre{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1a0808;border-radius:8px;margin-bottom:8px;}
.fila-nombre .icono-n{color:#aaa;}
.fila-nombre input{flex:1;background:transparent;border:none;color:#fff;outline:none;font-size:14px;min-width:0;}
.fila-nombre input::placeholder{color:#777;}
.btn-candado{cursor:pointer;font-size:16px;padding:2px 6px;border-radius:5px;flex-shrink:0;}
.btn-candado.registrado{color:#ffd700;text-shadow:0 0 6px #ffd700;}
.input-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1a0808;border-radius:8px;position:relative;}
.input-row input{flex:1;background:transparent;border:none;color:#fff;outline:none;font-size:14px;min-width:0;}
.input-row input::placeholder{color:#777;}
.icon-input,.icon-enviar{color:#aaa;font-size:18px;cursor:pointer;flex-shrink:0;padding:2px;}
.icon-enviar{color:#ff3b3b;}
.sugerencias{position:absolute;bottom:100%;left:0;background:#1a0808;border:1px solid #ff1a1a;border-radius:8px;width:180px;max-width:90%;z-index:100;margin-bottom:4px;display:none;}
.item-sug{padding:10px 12px;cursor:pointer;color:#ff6ec7;}
.item-sug:hover{background:rgba(255,26,26,0.2);}
.preview-arch{display:none;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,26,26,0.15);border-radius:8px;margin-bottom:8px;color:#ff6ec7;font-size:13px;}
.preview-arch .quitar{color:#ff3b3b;cursor:pointer;font-weight:bold;}
.cbox-mensajes::-webkit-scrollbar,.online-lista::-webkit-scrollbar,.panel-emojis::-webkit-scrollbar{width:6px;}
.cbox-mensajes::-webkit-scrollbar-thumb,.online-lista::-webkit-scrollbar-thumb,.panel-emojis::-webkit-scrollbar-thumb{background:#ff1a1a;border-radius:3px;}
.panel-online{display:none;position:absolute;inset:0;background:rgba(10,5,5,0.97);z-index:500;flex-direction:column;}
.panel-online.activo{display:flex;}
.online-header{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#1a0808;border-bottom:1px solid #ff1a1a;flex-shrink:0;}
.online-header h3{color:#ff3b3b;font-size:16px;}
.online-cerrar{color:#fff;cursor:pointer;font-size:18px;background:#ff1a1a;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;}
.online-lista{flex:1;overflow-y:auto;padding:10px;-webkit-overflow-scrolling:touch;}
.online-user{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;margin-bottom:8px;background:rgba(20,5,5,0.6);border:1px solid #2a0a0a;cursor:pointer;}
.online-user:hover{border-color:#ff1a1a;}
.online-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.online-avatar{width:45px;height:45px;border-radius:8px;object-fit:cover;border:2px solid #4af;}
.online-letra{display:flex;align-items:center;justify-content:center;background:#ff3b3b;width:45px;height:45px;border-radius:8px;color:#fff;font-size:20px;border:2px solid #4af;}
.online-bandera .bandera-img{width:22px;height:16px;}
.online-info{flex:1;min-width:0;}
.online-nombre{font-weight:bold;font-size:14px;word-break:break-word;}
.online-rol{font-size:11px;color:#888;}
.online-estado{width:10px;height:10px;border-radius:50%;background:#3bff6e;box-shadow:0 0 8px #3bff6e;flex-shrink:0;}
.menu-ctx{display:none;position:fixed;background:#1a0808;border:1px solid #ff1a1a;border-radius:8px;box-shadow:0 0 20px rgba(255,26,26,0.5);z-index:2000;min-width:200px;max-width:90vw;overflow:hidden;}
.menu-titulo{padding:10px 14px;background:#ff1a1a;color:#fff;font-weight:bold;font-size:13px;text-align:center;word-break:break-word;}
.menu-item{padding:12px 14px;color:#ddd;cursor:pointer;font-size:13px;}
.menu-item:hover,.menu-item:active{background:rgba(255,26,26,0.2);}
.menu-mute{color:#a855f7;}.menu-kick{color:#ffa500;}.menu-ban{color:#ff3b3b;}.menu-cerrar{color:#888;border-top:1px solid #2a0a0a;}
.modal-avatar,.modal-reg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:3000;justify-content:center;align-items:center;padding:15px;}
.modal-avatar.activo,.modal-reg.activo{display:flex;}
.modal-box{background:#0d0d0d;border:1px solid #ff1a1a;border-radius:12px;padding:25px;width:100%;max-width:320px;text-align:center;max-height:90vh;overflow-y:auto;}
.modal-box h3{color:#ff3b3b;margin-bottom:8px;}.modal-box .sub{color:#888;font-size:12px;margin-bottom:15px;word-break:break-word;}
.avatar-preview{width:120px;height:120px;border-radius:10px;object-fit:cover;border:2px solid #4af;margin:0 auto 15px;display:block;}
.modal-box input{width:100%;padding:11px;background:#1a0808;border:1px solid #ff1a1a;border-radius:6px;color:#fff;margin-bottom:10px;font-size:14px;}
.modal-box button{width:100%;padding:12px;border:none;border-radius:6px;cursor:pointer;font-weight:bold;margin-bottom:8px;font-size:14px;}
.btn-subir{background:#4af;color:#fff;}.btn-quitar-av{background:#ffa500;color:#fff;}.btn-cerrar-modal{background:#1a0808;color:#ccc;border:1px solid #2a0a0a;}.btn-reg{background:#ffd700;color:#000;}
.modal-img{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:3000;justify-content:center;align-items:center;cursor:pointer;padding:15px;}
.modal-img img{max-width:100%;max-height:100%;border-radius:8px;}
.admin-bg{align-items:flex-start;}
.admin-panel{background:#0d0d0d;border:1px solid #ff1a1a;border-radius:12px;padding:20px;width:100%;max-width:700px;box-shadow:0 0 30px rgba(255,0,0,0.3);}
.admin-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid #2a0a0a;padding-bottom:10px;flex-wrap:wrap;}
.tab{padding:8px 14px;background:#1a0808;color:#ccc;border:none;border-radius:6px;cursor:pointer;font-size:13px;text-decoration:none;}
.tab.activa{background:#ff1a1a;color:#fff;}
.admin-panel h2{color:#ff3b3b;margin-bottom:15px;font-size:18px;}.admin-panel h3{color:#fff;margin:20px 0 10px;font-size:15px;}
.sub-vista{display:none;}.sub-vista.activa{display:block;}
.form-crear label{display:block;color:#ccc;margin:10px 0 4px;font-size:13px;}
.form-crear input,.form-crear select{width:100%;padding:10px;background:#1a0808;border:1px solid #ff1a1a;border-radius:6px;color:#fff;margin-bottom:8px;font-size:14px;}
.form-crear button{padding:10px 20px;background:#4a90d9;color:#fff;border:none;border-radius:6px;cursor:pointer;}
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tabla{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;min-width:400px;}
.tabla th,.tabla td{padding:8px;border:1px solid #2a0a0a;text-align:left;color:#ddd;}
.tabla th{background:#1a0808;color:#ff6ec7;}
.tabla select{background:#1a0808;color:#fff;border:1px solid #ff1a1a;border-radius:4px;padding:3px;}
.badge{font-size:11px;padding:2px 6px;border-radius:4px;}
.btn-ok{background:#3bff6e;border:none;border-radius:4px;cursor:pointer;padding:4px 8px;}
.btn-del{color:#ff3b3b;text-decoration:none;}
.btn-azul{background:#4af;color:#fff;border:none;border-radius:4px;cursor:pointer;padding:5px 10px;}
.grid-emo{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;margin-top:10px;}
.emo-item{background:#1a0808;border:1px solid #2a0a0a;border-radius:8px;padding:10px;text-align:center;position:relative;}
.cod-em{display:block;color:#ff6ec7;font-size:10px;margin-top:5px;word-break:break-all;}
.btn-del-em{position:absolute;top:4px;right:6px;color:#ff3b3b;text-decoration:none;}
.info-plan{color:#888;font-size:13px;margin:10px 0;}
@media(max-width:768px){body{padding:0;}.cbox{max-width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;border:none;}.admin-panel{border-radius:0;padding:15px;min-height:100vh;}}
@media(max-width:480px){.cbox-mensajes{padding:12px;}.mensaje{gap:10px;padding:10px;margin-bottom:14px;}.avatar,.avatar-letra{width:48px;height:48px;font-size:20px;}.nombre{font-size:14px;}.titulo-musical{font-size:13px;padding:8px;}.toolbar-icon{font-size:18px;}.fila-nombre input,.input-row input{font-size:16px;}.emoji-pick{width:36px;height:36px;}.menu-item{padding:14px;font-size:14px;}.online-avatar,.online-letra{width:42px;height:42px;}}
@media(max-width:360px){.avatar,.avatar-letra{width:42px;height:42px;font-size:18px;}.nombre{font-size:13px;}.texto{font-size:13px;}.titulo-musical{font-size:12px;}}
@media(max-height:500px) and (orientation:landscape){body{padding:0;align-items:stretch;}.cbox{height:100vh;max-height:none;border-radius:0;}.titulo-musical{padding:5px;font-size:12px;}}
@media(min-width:769px){.cbox{height:85vh;max-height:750px;}}
.toolbar-icon,.btn-candado,.icon-input,.icon-enviar,.menu-item,.online-cerrar,.btn-borrar,.emoji-pick{user-select:none;-webkit-user-select:none;}