:root {
  /* ===== REDISEÑO 2030: futurista, con cristal esmerilado y resplandor
     neón — violeta eléctrico + cian, sobre fondos profundos tipo "espacio".
     Las variables de siempre (--primary, --accent, etc.) se mantienen para
     no romper nada que ya las use; se añaden nuevas específicas para los
     efectos de cristal/resplandor. ===== */
  --primary: #7c5cff;
  --primary-dark: #5b3ef0;
  --accent: #00e5ff;
  --bg-chat: #f4f2ff;
  --bg-panel: #ffffff;
  --bg-sidebar: #f8f7ff;
  --bubble-out: #ece4ff;
  --bubble-in: #ffffff;
  --text-dark: #16132a;
  --text-light: #706c8a;
  --border: #e6e1fb;
  --radius: 22px;
  --font-fun: 'Baloo 2', 'Nunito', -apple-system, sans-serif;
  --font-body: 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Nuevas: cristal esmerilado y resplandor neón ---- */
  --glass-bg: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.35);
  --glow-primary: 0 0 18px rgba(124,92,255,.55);
  --glow-accent: 0 0 18px rgba(0,229,255,.5);
  --gradient-brand: linear-gradient(135deg, #7c5cff 0%, #00e5ff 100%);
  --gradient-warm: linear-gradient(135deg, #ff6ec7 0%, #7c5cff 100%);

  box-sizing: border-box;
}

/* Cristal esmerilado reutilizable — se aplica en cabeceras, barra de
   pestañas, compositor y tarjetas destacadas para que se sienta como una
   sola superficie de "vidrio" flotando sobre el contenido, en vez de
   paneles opacos planos de toda la vida. */
.glass-surface {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
}

/* ===== Tema oscuro: manual (data-theme) o automático (prefers-color-scheme) =====
   "Espacio profundo": azul-violeta casi negro, con el mismo acento neón
   violeta/cian que en claro — burbujas propias con resplandor sutil. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-chat: #0a0a18; --bg-panel: #14142b; --bg-sidebar: #0e0e20;
    --bubble-out: #3d2f7a; --bubble-in: #191933;
    --text-dark: #ece9ff; --text-light: #8b86ad; --border: #2a2850;
    --glass-bg: rgba(20,20,43,.55); --glass-border: rgba(124,92,255,.25);
  }
}
:root[data-theme="dark"] {
  --bg-chat: #0a0a18; --bg-panel: #14142b; --bg-sidebar: #0e0e20;
  --bubble-out: #3d2f7a; --bubble-in: #191933;
  --text-dark: #ece9ff; --text-light: #8b86ad; --border: #2a2850;
  --glass-bg: rgba(20,20,43,.55); --glass-border: rgba(124,92,255,.25);
}
body { background: var(--bg-chat); color: var(--text-dark); }
* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-body); }
h1, h2, h3, .brand h1, .btn-primary, .tab-btn, .conv-name, .peer-name, strong#my-name { font-family: var(--font-fun); }

/* ===== Auth screen ===== */
.auth-body {
  min-height: 100vh; min-height: 100dvh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, #7c5cff 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, #00e5ff 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, #ff6ec7 0%, transparent 45%),
    #0a0a18;
  background-size: 200% 200%;
  animation: nebula-drift 22s ease-in-out infinite;
  padding: 20px;
}
.auth-card {
  background: rgba(255,255,255,.12); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,.25);
  width: 100%; max-width: 420px; border-radius: 26px;
  padding: 32px 28px; box-shadow: 0 20px 70px rgba(0,0,0,.45), 0 0 50px rgba(124,92,255,.25);
}
.auth-card, .auth-card * { color:#fff; }
.auth-card .error-msg { color:#ffb4b4; }
.auth-card .error-msg.info { color:#a8e8ff; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=tel] {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color:#fff;
}
.auth-card input::placeholder { color: rgba(255,255,255,.55); }
.auth-card .btn-secondary { color:#fff; }
.brand { text-align:center; margin-bottom: 20px; }
.brand-logo { width:64px; height:64px; border-radius:20px; box-shadow: 0 0 24px rgba(124,92,255,.6); }
.brand h1 { margin: 10px 0 4px; color:#fff; }
.tagline { color: rgba(255,255,255,.7); margin:0; font-size: 14px; }

.tabs { display:flex; border-bottom: 2px solid rgba(255,255,255,.2); margin-bottom: 18px; }
.tab-btn {
  flex:1; padding: 10px; background:none; border:none; font-size:15px; font-weight:600;
  color: rgba(255,255,255,.6); cursor:pointer; border-bottom: 3px solid transparent;
}
.tab-btn.active { color:#fff; border-color: var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

.method-switch { display:flex; gap:8px; margin-bottom:14px; }
.method-btn {
  flex:1; padding:8px; border-radius:20px; border:1px solid var(--border); background:#fff;
  color: var(--text-light); cursor:pointer; font-size:13px;
}
.method-btn.active { background: var(--primary); color:#fff; border-color: var(--primary); }
.method-form { display:none; flex-direction:column; gap:12px; }
.method-form.active { display:flex; }

input[type=text], input[type=email], input[type=password], input[type=tel] {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: 16px; width:100%;
  background: var(--bg-panel); color: var(--text-dark);
}
input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

.btn-primary {
  background: var(--gradient-brand); color:#fff; border:none; padding: 13px; border-radius: 16px;
  font-size: 15px; font-weight:700; cursor:pointer; transition: transform .15s, box-shadow .2s;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 55%, transparent);
  letter-spacing: .2px;
}
.btn-primary:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 26px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-secondary {
  background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--primary); border: 1.5px solid var(--glass-border); padding:11px; border-radius:16px;
  cursor:pointer; font-weight:700; transition: background .15s, transform .1s, box-shadow .2s;
}
.btn-secondary:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); transform: translateY(-1px); box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 25%, transparent); }
.btn-secondary:active { transform: translateY(0); }
.error-msg { color:#d32f2f; font-size:13px; text-align:center; min-height: 18px; margin-top: 10px; }
.error-msg.info { color:#1565c0; font-weight:600; }

/* ===== Chat layout ===== */
.chat-app { display:flex; height:100%; background: var(--bg-sidebar); overflow:hidden; }
.sidebar {
  width: 340px; min-width: 280px; background: var(--bg-sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; min-height:0;
}
.sidebar-header {
  background: var(--gradient-brand); color:#fff; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  box-shadow: 0 2px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}
.sidebar-header .me { display:flex; align-items:center; gap:10px; cursor:pointer; border-radius:8px; padding:4px 6px; margin:-4px -6px; transition:background .15s; }
.sidebar-header .me:hover { background: rgba(255,255,255,.1); }
.avatar {
  width:40px; height:40px; border-radius:50%; background: var(--gradient-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.icon-btn { background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:8px; border-radius:12px; transition: background .15s, transform .1s; }
.icon-btn:hover { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.icon-btn:active { transform: scale(.9); }
.icon-btn:hover { background: rgba(255,255,255,.15); }
.search-box { padding: 10px; }
.search-box input { width:100%; padding:10px 14px; border-radius:20px; border:1px solid var(--border); font-size:16px; background: var(--bg-panel); color: var(--text-dark); }
.conversation-list { flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch; min-height:0; }
.conversation-item {
  display:flex; gap:12px; padding: 12px 16px; cursor:pointer; border-bottom:1px solid var(--border); align-items:center;
  transition: background .12s;
}
.conversation-item:hover { background: var(--border); }
.conversation-item.active { background: rgba(30,165,252,.12); border-left:3px solid var(--primary); padding-left:13px; }
.conv-info { flex:1; min-width:0; }
.conv-name { font-weight:600; color: var(--text-dark); }
.conv-preview { font-size: 13px; color: var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-name.unread, .conv-preview.unread { font-weight:700; color: var(--text-dark); }
.unread-badge { background: var(--primary); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
.online-dot {
  width:10px; height:10px; border-radius:50%; background: var(--accent); position:relative; left:-14px; top:14px;
  border:2px solid var(--bg-sidebar); box-shadow: 0 0 8px var(--accent), 0 0 3px var(--accent);
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 6px var(--accent); }
  50% { box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent); }
}

.chat-main { flex:1; display:flex; flex-direction:column; background: var(--bg-chat); min-width:0; min-height:0; }
.chat-header {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  padding: 12px 18px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid var(--glass-border); display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.chat-header .peer-info { flex:1; min-width:0; }
.chat-header .peer-name { font-weight:700; }
.chat-header .peer-status { font-size:12px; color: var(--text-light); }
.call-buttons { display:flex; gap:4px; }
.call-buttons .icon-btn { color: var(--primary); font-size:20px; }
.messages { flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch; padding: 20px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.msg-row { display:flex; animation: msg-in .15s ease-out; }
.msg-row.out { justify-content:flex-end; }
@keyframes msg-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
.bubble {
  max-width: min(65%, 560px); padding: 8px 12px; border-radius: var(--radius); font-size:14.5px; line-height:1.4;
  box-shadow: 0 1px 1px rgba(0,0,0,.1); position:relative; word-wrap: break-word;
}
.msg-row.in .bubble { background: var(--bubble-in); border-top-left-radius:4px; color: var(--text-dark); }
.msg-row.out .bubble {
  background: linear-gradient(135deg, var(--bubble-out), color-mix(in srgb, var(--bubble-out) 55%, var(--primary) 45%));
  border-top-right-radius:4px; color: var(--text-dark);
}
.bubble .sender { font-size:12px; font-weight:700; color: var(--primary); display:block; margin-bottom:2px; }
.bubble .time { font-size: 10px; color: var(--text-light); text-align:right; margin-top:4px; }
.bubble .attachment { display:block; margin-top:6px; }
.bubble img.attachment-img, .bubble video.attachment-img { max-width: 240px; border-radius:8px; display:block; cursor:pointer; }
.bubble .attachment-wrap { position:relative; display:inline-block; }
.bubble .attachment-wrap.is-video::after {
  content:'▶'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background: rgba(0,0,0,.5); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; pointer-events:none;
}
.bubble .file-chip { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.06); padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text-dark); }

.typing-indicator { font-size:12px; color: var(--text-light); padding: 0 20px 6px; font-style:italic; min-height: 18px; flex-shrink:0; }

.composer {
  display:flex; gap:8px; padding: 10px 14px; background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top:1px solid var(--glass-border);
  align-items:flex-end; flex-shrink:0;
}
.composer-input-wrap { flex:1; position:relative; display:flex; align-items:flex-end; }
#message-input {
  width:100%; padding:11px 44px 11px 16px; border-radius: 22px; border:1.5px solid var(--glass-border); font-size:16px;
  background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-dark);
  font-family: inherit; line-height:1.35; resize:none; overflow-y:auto;
  min-height:22px; max-height:140px; /* ~6 líneas antes de que aparezca scroll propio */
  transition: border-color .15s, box-shadow .2s;
}
#message-input:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.composer-inline-emoji {
  position:absolute; right:6px; bottom:6px; background:none; border:none; cursor:pointer;
  font-size:20px; padding:4px; border-radius:50%; line-height:1; opacity:.8;
}
.composer-inline-emoji:hover { opacity:1; background: rgba(0,0,0,.06); }
.composer-plus-btn {
  font-size:26px; font-weight:300; color: var(--text-light) !important; line-height:1;
}
.composer button, .composer .icon-btn.attach-btn {
  background: var(--primary); border:none; color:#fff; width:42px; height:42px; border-radius:50%; cursor:pointer;
  font-size:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: transform .1s;
}
.composer button:active { transform: scale(.92); }
.attach-btn { background: transparent !important; color: var(--text-light) !important; font-size:22px; }
.mic-send-btn {
  background: var(--gradient-brand) !important; color:#fff !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 55%, transparent) !important;
}
.attach-btn:hover { background: var(--border) !important; }

.empty-state { flex:1; display:flex; align-items:center; justify-content:center; color: var(--text-light); flex-direction:column; gap:10px; text-align:center; padding: 20px; }
.empty-state h2 { font-weight:600; color: var(--text-dark); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal-overlay.active { display:flex; animation: fade-in .15s ease-out; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.modal-box {
  background: var(--glass-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: var(--text-dark); border: 1px solid var(--glass-border); border-radius:24px; padding:20px; width:100%; max-width:400px;
  max-height:85vh; overflow-y:auto; box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 40px color-mix(in srgb, var(--primary) 15%, transparent);
  animation: modal-in .18s ease-out;
}
@keyframes modal-in { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
.user-result { display:flex; align-items:center; gap:10px; padding:10px; cursor:pointer; border-radius:8px; }
.user-result:hover { background: var(--bg-sidebar); }

/* ===== Banner de notificaciones ===== */
.notif-banner {
  display:none; align-items:center; gap:10px; background: var(--primary); color:#fff;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  font-size: 13px; position:fixed; top:0; left:0; right:0; z-index:60;
}
.notif-banner.visible { display:flex; }
.notif-banner button {
  background:#fff; color: var(--primary); border:none; padding:6px 12px; border-radius:16px; font-weight:700;
  font-size:12px; cursor:pointer; white-space:nowrap;
}
.notif-banner .dismiss { background:transparent; color:#fff; font-size:16px; padding:2px 6px; font-weight:400; margin-left:auto; }
body.has-banner .chat-app { padding-top: 52px; }

/* ===== Aviso de nueva versión disponible ===== */
.update-toast {
  display:none; align-items:center; gap:12px; justify-content:center; background:#1f2c34; color:#fff;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; position:fixed; bottom:0; left:0; right:0; z-index:70; box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}
.update-toast.visible { display:flex; animation: toast-in .25s ease-out; }
@keyframes toast-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.update-toast button {
  background: var(--primary); color:#fff; border:none; padding:8px 14px; border-radius:16px; font-weight:700;
  font-size:12px; cursor:pointer; white-space:nowrap;
}

/* ===== Loading skeleton ===== */
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color: var(--primary); border-radius:50%; animation: spin .7s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Menú contextual de un mensaje (editar/eliminar/copiar) ===== */
.msg-menu-btn {
  position:absolute; top:2px; right:2px; background:none; border:none; cursor:pointer;
  font-size:14px; color: var(--text-light); padding:2px 6px; border-radius:6px; opacity:0; transition:opacity .12s;
}
.bubble:hover .msg-menu-btn, .bubble:focus-within .msg-menu-btn { opacity: 1; }
.msg-menu-btn:hover { background: rgba(0,0,0,.08); }
.msg-context-menu {
  position:fixed; z-index:80; background: var(--bg-panel); color: var(--text-dark); border-radius:10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width:180px; overflow:hidden; padding:4px;
  animation: modal-in .12s ease-out;
}
.msg-context-menu button {
  display:block; width:100%; text-align:left; background:none; border:none; padding:10px 12px; font-size:13.5px;
  cursor:pointer; border-radius:6px; color: var(--text-dark);
}
.msg-context-menu button:hover { background: var(--bg-sidebar); }
.msg-context-menu button.danger { color:#d32f2f; }

.deleted-text { font-style:italic; color: var(--text-light); font-size:13.5px; }
.edited-tag { font-style:italic; opacity:.8; }

/* ===== Botón de opciones en cada conversación de la lista ===== */
.conversation-item { position:relative; padding-right:38px; }
.conv-menu-btn {
  position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:#e74c3c; font-size:15px; cursor:pointer; padding:6px 8px; border-radius:6px; opacity:.55; transition:opacity .12s;
}
.conversation-item:hover .conv-menu-btn { opacity:1; }
.conv-menu-btn:hover { background: var(--border); opacity:1; }
@media (max-width: 720px) { .conv-menu-btn { opacity:.85; } } /* en móvil no hay "hover", que se vea bien siempre */

/* ===== Barra de edición de mensaje ===== */
.editing-bar {
  display:none; align-items:center; justify-content:space-between; background: var(--bg-sidebar);
  border-top:1px solid var(--border); padding: 8px 16px; font-size:13px; color: var(--text-light); flex-shrink:0;
}
.editing-bar.visible { display:flex; }

/* ===== Barra de grabación de nota de voz ===== */
.recording-bar {
  display:none; align-items:center; gap:10px; background: var(--bg-sidebar); border-top:1px solid var(--border);
  padding: 10px 16px; font-size:13px; color: var(--text-dark); flex-shrink:0;
}
.recording-bar.visible { display:flex; }
.recording-dot { width:10px; height:10px; border-radius:50%; background:#e74c3c; animation: pulse-dot 1s infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.recording-hint { color: var(--text-light); margin-left:auto; }
#mic-btn.recording { background:#e74c3c !important; color:#fff !important; }
button:disabled { opacity:.5; cursor:not-allowed; }

/* ===== Indicador de estado de conexión (socket) ===== */
.conn-status {
  display:none; position:fixed; top: env(safe-area-inset-top, 0px); left:50%; transform:translateX(-50%);
  z-index:65; background:#333; color:#fff; font-size:12px; padding:5px 14px; border-radius:0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.conn-status.visible { display:block; }
.conn-status.offline { background:#c62828; }

/* ===== Estado de notificaciones en Ajustes ===== */
.notif-status-box {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:8px; background: var(--bg-sidebar); font-size:13px; font-weight:600;
}
.notif-status-box.ok { color:#2e7d32; }
.notif-status-box.warn { color:#c62828; }

/* ===== Avatar con foto (si existe avatarUrl, se muestra la imagen) ===== */
.avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar-picker { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:6px; }
.avatar-lg { width:88px; height:88px; font-size:32px; }

/* ===== Campo de texto con botón de emoji integrado ===== */
.input-with-emoji { position:relative; display:flex; }
.input-with-emoji input { flex:1; padding-right:40px !important; }
.emoji-trigger-btn {
  position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none;
  font-size:18px; cursor:pointer; padding:4px; color: var(--text-dark);
}
#emoji-btn { position:static; transform:none; }

/* ===== Selector de emojis (panel flotante) ===== */
.emoji-picker {
  display:none; flex-direction:column; position:fixed; z-index:90; background: var(--bg-panel); border-radius:12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); padding:10px; width:290px; max-height:320px;
}
.emoji-picker.visible { display:flex; }
.emoji-category-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:6px; flex-shrink:0; }
.emoji-category-tab {
  flex:1; background:none; border:none; font-size:18px; cursor:pointer; padding:4px 0; border-radius:8px; opacity:.5;
}
.emoji-category-tab.active { opacity:1; background: var(--bg-sidebar); }
.emoji-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; overflow-y:auto; }
.emoji-grid button {
  background:none; border:none; font-size:20px; cursor:pointer; padding:5px; border-radius:6px; line-height:1;
}
.emoji-grid button:hover { background: var(--bg-sidebar); }

/* ===== Panel de GIFs (Giphy) ===== */
.gif-picker {
  display:none; flex-direction:column; position:fixed; z-index:90; background: var(--bg-panel); border-radius:12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); padding:10px; width:320px; max-height:380px; gap:8px;
}
.gif-picker.visible { display:flex; }
.gif-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; overflow-y:auto; flex:1;
}
.gif-grid img {
  width:100%; height:110px; object-fit:cover; border-radius:8px; cursor:pointer; background: var(--bg-sidebar);
  transition: transform .1s;
}
.gif-grid img:hover { transform: scale(1.03); }
#gif-btn { font-size:11px; font-weight:800; letter-spacing:.5px; }

/* ===== Admin panel ===== */
.admin-body { background:#f3f4f6; margin:0; font-family: -apple-system, Roboto, sans-serif; }
.admin-header {
  background: var(--gradient-brand); color:#fff; padding:16px 24px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  display:flex; justify-content:space-between; align-items:center;
  box-shadow: 0 2px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}
.admin-wrap { padding: 24px; max-width: 1100px; margin: 0 auto; }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius:18px; padding:18px; text-align:center; box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.stat-card .num { font-size:28px; font-weight:700; color: var(--primary); }
.stat-card .label { color: var(--text-light); font-size:13px; }
.admin-section {
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius:18px; padding:20px; margin-bottom:20px; box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.admin-section h2 { margin-top:0; font-size:17px; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding: 10px 8px; border-bottom:1px solid var(--border); font-size:14px; }
.badge { padding:3px 8px; border-radius:12px; font-size:11px; font-weight:600; }
.badge.online { background:#e6f7ee; color:#2e7d32; }
.badge.banned { background:#fdecea; color:#c62828; }
.badge.admin { background:#e3f2fd; color:#1565c0; }
.settings-form { display:flex; flex-direction:column; gap:12px; max-width:500px; }
.settings-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.small-btn { padding:6px 10px; border-radius:6px; border:none; cursor:pointer; font-size:12px; font-weight:600; }
.small-btn.ban { background:#fdecea; color:#c62828; }
.small-btn.unban { background:#e6f7ee; color:#2e7d32; }

/* ===== Botón "volver" (solo visible en móvil) ===== */
.back-btn { display:none; font-size:20px; color: var(--text-dark); margin-right:4px; }

@media (max-width: 720px) {
  .sidebar { position:absolute; inset:0; z-index:10; width:100%; }
  .sidebar.hidden { display:none; }
  .chat-main.hidden { display:none; }
  .back-btn { display:inline-block; }
  .bubble { max-width: 80%; }
}

/* ===== Modal de adjuntar archivo ===== */
.attach-box { max-width: 340px; }
.attach-options { display:flex; gap:12px; margin-top: 14px; }
.attach-option {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  background: var(--bg-sidebar); border:1px solid var(--border); border-radius:12px;
  padding: 16px 8px; font-size: 28px; cursor:pointer; color: var(--text-dark);
}
.attach-option span { font-size: 12px; color: var(--text-light); }
.attach-option:hover { background: var(--border); }

/* ===== Menú de ajustes ===== */
.settings-box { max-width: 480px; }
.settings-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.settings-tabs { display:flex; gap:4px; border-bottom: 2px solid var(--border); margin-bottom: 16px; overflow-x:auto; }
.settings-tab {
  padding: 8px 10px; background:none; border:none; color: var(--text-light); font-weight:600;
  font-size: 13px; cursor:pointer; border-bottom: 3px solid transparent; white-space:nowrap;
}
.settings-tab.active { color: var(--primary); border-color: var(--primary); }
.settings-panel { display:none; flex-direction:column; gap:14px; }
.settings-panel.active { display:flex; }
.settings-panel label { display:flex; flex-direction:column; gap:6px; font-size:13px; color: var(--text-light); }
.settings-panel input[type=text], .settings-panel select {
  padding: 10px 12px; border-radius:8px; border:1px solid var(--border); font-size:16px;
  background: var(--bg-panel); color: var(--text-dark);
}
.settings-hint { font-size:12px; color: var(--text-light); margin:0; }
.btn-secondary.danger { border-color:#d32f2f; color:#d32f2f; }
.device-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
hr { border:none; border-top:1px solid var(--border); margin: 4px 0; }

/* ===== Toggle switches para notificaciones/sonido (encima de checkbox nativo) ===== */
.settings-row input[type=checkbox] { width:42px; height:24px; appearance:none; background:var(--border); border-radius:12px; position:relative; cursor:pointer; transition:.2s; flex-shrink:0; }
.settings-row input[type=checkbox]::before { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.settings-row input[type=checkbox]:checked { background: var(--primary); }
.settings-row input[type=checkbox]:checked::before { left:20px; }

/* ===== Avatares grandes (llamadas, perfil) ===== */
.avatar-xl { width:120px; height:120px; font-size:44px; margin: 0 auto 12px; }

/* ===== Barra de estados (tipo "stories") en la parte superior de la lista ===== */
.status-bar { display:flex; gap:12px; padding: 12px 14px; overflow-x:auto; border-bottom:1px solid var(--border); }
.status-bubble { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; cursor:pointer; width:60px; }
.status-ring { width:56px; height:56px; border-radius:50%; padding:2px; background: linear-gradient(135deg, var(--primary), var(--accent)); display:flex; align-items:center; justify-content:center; }
.status-ring.seen { background: var(--border); }
.status-ring .avatar { width:100%; height:100%; border:2px solid var(--bg-sidebar); }
.status-bubble span { font-size:11px; color: var(--text-light); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60px; }
.status-bubble.add-status .status-ring { background: var(--border); position:relative; }
.status-bubble.add-status .status-ring::after { content:'+'; position:absolute; bottom:-2px; right:-2px; background:var(--primary); color:#fff; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; border:2px solid var(--bg-sidebar); }

/* ===== Selector de ánimo (grid de emojis grandes al crear un estado) ===== */
.mood-grid { display:grid; grid-template-columns: repeat(6,1fr); gap:6px; margin-bottom:12px; }
.mood-grid button { background: var(--bg-sidebar); border:none; border-radius:10px; font-size:24px; padding:8px 0; cursor:pointer; }
.mood-grid button.selected { background: var(--primary); }

/* ===== Visor de estados (pantalla completa) ===== */
.status-viewer {
  width:100%; max-width:420px; height:80vh; max-height:720px; background:#000; border-radius:16px;
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:20px; overflow:hidden;
}
.status-viewer img { max-width:100%; max-height:70%; border-radius:10px; object-fit:contain; }
.status-viewer .mood-emoji-big { font-size:80px; }
.status-viewer .status-text { font-size:20px; margin-top:16px; font-weight:600; }
.status-viewer .status-meta { position:absolute; top:16px; left:16px; right:16px; display:flex; align-items:center; gap:10px; }
.status-viewer .status-meta .avatar { width:36px; height:36px; }
.status-viewer .close-viewer-btn { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; }
.status-progress { position:absolute; top:8px; left:16px; right:16px; height:3px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; }
.status-progress-fill { height:100%; background:#fff; width:0%; transition:width linear; }
.status-delete-btn { position:absolute; bottom:16px; right:16px; background:rgba(255,255,255,.15); border:none; color:#fff; padding:8px 14px; border-radius:16px; font-size:12px; cursor:pointer; }

/* ===== Llamadas (audio/video) ===== */
.call-overlay {
  display:none; position:fixed; inset:0; z-index:100; background: linear-gradient(160deg, var(--primary-dark), #062842);
  align-items:center; justify-content:center; flex-direction:column; color:#fff;
}
.call-overlay.visible { display:flex; }
.call-card { display:flex; flex-direction:column; align-items:center; text-align:center; z-index:2; }
.call-card h2 { font-family: var(--font-fun); margin:0 0 4px; }
.call-card p { color: rgba(255,255,255,.8); margin:0; }
.call-actions { display:flex; gap:40px; margin-top:40px; }
.call-controls { position:absolute; bottom: calc(40px + env(safe-area-inset-bottom,0px)); display:flex; gap:24px; z-index:2; }
.call-btn {
  width:64px; height:64px; border-radius:50%; border:none; font-size:26px; cursor:pointer;
  background: rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.18); box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .12s, background .15s;
}
.call-btn:active { transform: scale(.92); }
.call-btn.accept { background: rgba(46,204,113,.85); }
.call-btn.decline { background: rgba(231,76,60,.85); }
.call-btn.active { background: var(--accent); color:#000; }
#remote-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#000; }
#local-video { position:absolute; bottom: calc(120px + env(safe-area-inset-bottom,0px)); right:16px; width:110px; height:150px; border-radius:12px; object-fit:cover; z-index:1; box-shadow:0 4px 16px rgba(0,0,0,.4); background:#000; }
.call-overlay.audio-only #remote-video, .call-overlay.audio-only #local-video { display:none; }

/* ===== Selección de miembros para grupos nuevos ===== */
.selected-members { display:flex; flex-wrap:wrap; gap:6px; margin: 8px 0; }
.selected-chip {
  display:flex; align-items:center; gap:6px; background: var(--bg-sidebar); border-radius:16px;
  padding:4px 10px 4px 4px; font-size:13px;
}
.selected-chip .avatar { width:22px; height:22px; font-size:11px; }
.selected-chip button { background:none; border:none; cursor:pointer; color: var(--text-light); font-size:14px; }
.peer-info { cursor:pointer; }
.group-member-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.group-member-row .avatar { width:36px; height:36px; }
.group-member-row .member-name { flex:1; }
.group-member-row .badge.admin { font-size:10px; }

/* ===== Barras de uso (disco/memoria) en el panel admin ===== */
.disk-gauge-row { display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:18px; }
.usage-bar { width:100%; height:14px; background: var(--border); border-radius:8px; overflow:hidden; }
.usage-bar-fill { height:100%; background: var(--primary); border-radius:8px; transition: width .3s; width:0%; }
.usage-bar-fill.warn { background:#ff9800; }
.usage-bar-fill.danger { background:#e74c3c; }
.usage-bar-label { font-size:12px; color: var(--text-light); margin:4px 0 0; }
.saturation-banner {
  background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; border-radius:8px; padding:10px 14px;
  font-size:13px; font-weight:600; margin: 10px 0;
}
@media (max-width: 600px) { .disk-gauge-row { grid-template-columns: 1fr; } }

/* ===== Pestañas del panel de administración ===== */
.admin-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.admin-tab {
  padding: 10px 16px; background:none; border:none; color: var(--text-light); font-weight:700;
  font-size: 14px; cursor:pointer; border-bottom: 3px solid transparent; white-space:nowrap; font-family: var(--font-fun);
  border-radius: 10px 10px 0 0; transition: background .15s, color .15s;
}
.admin-tab.active { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.admin-tab-panel { display:none; }
.admin-tab-panel.active { display:block; }

/* ===== Marcas de enviado/entregado/leído (✓✓) ===== */
.msg-ticks { font-size:11px; color: var(--text-light); letter-spacing:-2px; margin-left:2px; }
.msg-ticks.read { color:#53bdeb; }

/* ===== Selector de logo y color en Ajustes generales (admin) ===== */
.logo-picker { display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.logo-preview {
  width:80px; height:80px; border-radius:14px; background: var(--bg-sidebar); border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.logo-preview img { width:100%; height:100%; object-fit:contain; }
.logo-preview span { font-size:11px; color: var(--text-light); text-align:center; }
.color-picker-row { display:flex; align-items:center; gap:10px; }
.color-picker-row input[type=color] { width:44px; height:36px; border:none; border-radius:8px; padding:0; cursor:pointer; }

/* ===== Multimedia del perfil (fotos/audios/archivos de mis chats) ===== */
.media-tabs { display:flex; gap:6px; margin-bottom:12px; }
.media-subtab {
  flex:1; padding:8px; border-radius:8px; border:1px solid var(--border); background: var(--bg-panel);
  color: var(--text-light); font-size:12px; cursor:pointer; font-weight:600;
}
.media-subtab.active { background: var(--primary); color:#fff; border-color: var(--primary); }
.media-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; max-height:320px; overflow-y:auto; }
.media-grid img, .media-grid video { width:100%; height:90px; object-fit:cover; border-radius:8px; cursor:pointer; background:#000; }
.media-list { max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.media-list-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; background: var(--bg-sidebar); border-radius:8px;
  text-decoration:none; color: var(--text-dark); font-size:13px;
}
.media-list-item small { display:block; color: var(--text-light); font-size:11px; }
.media-empty { color: var(--text-light); font-size:13px; text-align:center; padding:20px; }

/* ===== Tarjetas de instalación (Android/iPhone) ===== */
.install-card {
  display:flex; align-items:center; gap:14px; padding:14px; background: var(--bg-sidebar);
  border-radius:12px; margin-bottom:10px;
}
.install-card-icon { font-size:32px; flex-shrink:0; }
.install-card-body { flex:1; min-width:0; }
.install-card-body strong { display:block; font-family: var(--font-fun); }
.install-card-body p { margin:2px 0 0; font-size:12px; color: var(--text-light); }
.install-steps { padding-left:20px; margin:10px 0; }
.install-steps li { margin-bottom:8px; font-size:14px; }

/* ===== Interfaz más suave (bordes redondeados y sombras ligeras) ===== */
.bubble { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.conversation-item, .install-card, .stat-card, .modal-box { border-radius: 14px; }
.btn-primary, .btn-secondary { border-radius: 12px; }
.avatar { box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ===== Fondos de chat (aplicados a .messages según data-wallpaper) ===== */
.wallpaper-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom:10px; }
.wallpaper-option {
  height:56px; border-radius:10px; cursor:pointer; border:2px solid transparent;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
  font-size:10px; color:rgba(0,0,0,.55); font-weight:700;
}
.wallpaper-option.selected { border-color: var(--primary); }
.wallpaper-option[data-wallpaper="default"] { background: var(--bg-chat); color: var(--text-light); }
.wallpaper-option[data-wallpaper="dots"] { background-color:#e9f3ec; background-image: radial-gradient(#b9d8c2 1.5px, transparent 1.5px); background-size: 14px 14px; }
.wallpaper-option[data-wallpaper="warm"] { background: linear-gradient(135deg, #ffe8d6, #ffd3b0); }
.wallpaper-option[data-wallpaper="ocean"] { background: linear-gradient(135deg, #d6ecff, #a8d4f5); }
.wallpaper-option[data-wallpaper="forest"] { background: linear-gradient(135deg, #dff2e1, #b7e0bc); }
.wallpaper-option[data-wallpaper="mono"] { background-color:#eceff1; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 8px, transparent 8px 16px); }

.messages[data-wallpaper="dots"] { background-color:#e9f3ec; background-image: radial-gradient(#b9d8c2 1.5px, transparent 1.5px); background-size: 18px 18px; }
.messages[data-wallpaper="warm"] { background: linear-gradient(135deg, #fff1e6, #ffe0c2); }
.messages[data-wallpaper="ocean"] { background: linear-gradient(135deg, #eaf6ff, #cfe9fb); }
.messages[data-wallpaper="forest"] { background: linear-gradient(135deg, #eef9ef, #d3edd6); }
.messages[data-wallpaper="mono"] { background-color:#f2f3f5; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 10px, transparent 10px 20px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .messages[data-wallpaper="dots"] { background-color:#0f1e17; background-image: radial-gradient(#1c3327 1.5px, transparent 1.5px); }
  :root:not([data-theme="light"]) .messages[data-wallpaper="warm"] { background: linear-gradient(135deg, #2a1d12, #3a2416); }
  :root:not([data-theme="light"]) .messages[data-wallpaper="ocean"] { background: linear-gradient(135deg, #0d1b24, #122634); }
  :root:not([data-theme="light"]) .messages[data-wallpaper="forest"] { background: linear-gradient(135deg, #0f1d12, #16281a); }
  :root:not([data-theme="light"]) .messages[data-wallpaper="mono"] { background-color:#16181b; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px); }
}
:root[data-theme="dark"] .messages[data-wallpaper="dots"] { background-color:#0f1e17; background-image: radial-gradient(#1c3327 1.5px, transparent 1.5px); }
:root[data-theme="dark"] .messages[data-wallpaper="warm"] { background: linear-gradient(135deg, #2a1d12, #3a2416); }
:root[data-theme="dark"] .messages[data-wallpaper="ocean"] { background: linear-gradient(135deg, #0d1b24, #122634); }
:root[data-theme="dark"] .messages[data-wallpaper="forest"] { background: linear-gradient(135deg, #0f1d12, #16281a); }
:root[data-theme="dark"] .messages[data-wallpaper="mono"] { background-color:#16181b; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px); }

/* ===== Chat anclado de radio ===== */
.pinned-item { border-bottom: 2px solid var(--border); background: var(--bg-panel); }
.pinned-item:hover { background: var(--border); }
.radio-avatar { background: linear-gradient(135deg, var(--primary), var(--accent)) !important; font-size:20px; }
.pin-icon { font-size:13px; opacity:.6; flex-shrink:0; }

/* ===== Reproductor de radio ===== */
.radio-main { display:flex; }
.radio-station-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; max-width:720px; width:100%; margin:0 auto; min-height:0; }
.radio-station-row {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:16px; border:2px solid var(--glass-border); transition: box-shadow .2s, border-color .2s;
}
.radio-station-row.playing {
  border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--glass-bg));
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 30%, transparent);
}
.radio-station-row .radio-station-icon { font-size:22px; }
.radio-station-row .radio-station-info { flex:1; min-width:0; }
.radio-station-row .radio-station-info strong { display:block; }
.radio-station-row .radio-station-info small { color: var(--text-light); }
.radio-controls { display:flex; justify-content:center; padding: 16px; border-top:1px solid var(--border); background: var(--bg-panel); }
#radio-play-btn { background: var(--primary); color:#fff; width:60px; height:60px; font-size:24px; }
#radio-play-btn.playing { background:#e74c3c; }

/* Cabeceras de categoría y botón de play/stop individual por emisora */
.radio-category-header {
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color: var(--text-light); padding: 10px 4px 2px;
}
.radio-station-play-btn {
  width:38px; height:38px; border-radius:50%; border:none; background: var(--gradient-brand);
  color:#fff; font-size:15px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 40%, transparent);
}
.radio-station-row.playing .radio-station-play-btn { background:#e74c3c; }
.radio-station-icon img { width:28px; height:28px; border-radius:6px; object-fit:cover; }
#radio-search { margin:10px 12px; }

/* ===== Pestañas de filtro de chats (Todos/No leídos/Grupos) ===== */
.chat-filter-tabs { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.chat-filter-tabs::-webkit-scrollbar { display:none; }
.chat-filter-tab {
  flex:0 0 auto; padding:7px 12px; border:none; border-radius:16px; background:transparent;
  color: var(--text-light); font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
}
.chat-filter-tab.active { background: var(--primary); color:#fff; }
.add-folder-tab { border:1.5px dashed var(--border); opacity:.7; }

/* ===== Responder citando un mensaje ===== */
.reply-bar {
  display:none; align-items:center; gap:10px; padding:8px 14px; background: var(--bg-sidebar);
  border-left:3px solid var(--primary); margin: 0 10px;
}
.reply-bar.visible { display:flex; }
.reply-bar-info { flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px; }
.reply-bar-info strong { color: var(--primary); }
.reply-bar-info span { color: var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.reply-quote {
  border-left:3px solid var(--primary); background: rgba(30,165,252,.08); border-radius:6px;
  padding:4px 8px; margin-bottom:6px; cursor:pointer; font-size:13px;
}
.reply-quote strong { display:block; color: var(--primary); font-size:12px; }
.reply-quote span { color: var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:260px; }

.highlight-flash { animation: flash-highlight 1.2s ease; }
@keyframes flash-highlight {
  0%, 100% { background: transparent; }
  20% { background: rgba(30,165,252,.25); }
}

/* ===== Reacciones con emoji ===== */
.reaction-pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.reaction-pill {
  border:1px solid var(--border); background: var(--bg-panel); border-radius:12px;
  padding:2px 8px; font-size:12px; cursor:pointer;
}
.reaction-pill.mine { border-color: var(--primary); background: rgba(30,165,252,.12); }
.reaction-picker { display:flex; gap:4px; padding:8px !important; }
.reaction-picker button { font-size:20px; padding:4px 6px; background:none; border:none; cursor:pointer; }
.reaction-picker button:hover { transform: scale(1.2); }

.muted-icon { font-size:12px; opacity:.6; }

.forwarded-tag { font-size:11px; font-style:italic; color: var(--text-light); margin-bottom:4px; }
.msg-row.out .forwarded-tag { color: var(--text-dark); opacity:.65; }

/* ===== Agrupado de mensajes consecutivos (estilo Telegram) ===== */
.msg-row.grouped { margin-top: -6px; }
.msg-row.in.grouped-tail-hidden .bubble { border-top-left-radius: var(--radius); }
.msg-row.out.grouped-tail-hidden .bubble { border-top-right-radius: var(--radius); }

/* ===== Visor de fotos/videos a pantalla completa ===== */
.media-lightbox {
  display:none; position:fixed; inset:0; background: rgba(0,0,0,.92); z-index:300;
  align-items:center; justify-content:center;
}
.media-lightbox.active { display:flex; }
.lightbox-content { max-width:92vw; max-height:88vh; display:flex; align-items:center; justify-content:center; }
.lightbox-content img, .lightbox-content video { max-width:92vw; max-height:88vh; border-radius:6px; object-fit:contain; }
.lightbox-close-btn {
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff; border:none; font-size:20px; cursor:pointer; z-index:2;
}
.lightbox-close-btn:hover { background: rgba(255,255,255,.22); }
.lightbox-download-btn {
  position:absolute; bottom:20px; right:20px; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; text-decoration:none;
}
.lightbox-nav-btn {
  position:absolute; top:50%; transform: translateY(-50%); width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff; border:none; font-size:28px; cursor:pointer; z-index:2;
}
.lightbox-nav-btn:hover { background: rgba(255,255,255,.22); }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }
@media (max-width: 640px) {
  .lightbox-nav-btn { width:38px; height:38px; font-size:22px; }
  .lightbox-close-btn { top:max(16px, env(safe-area-inset-top)); }
}

/* ===== Esqueleto de pestañas inferiores (Chats / Actualidad) ===== */
/* 100dvh (con 100vh de respaldo para navegadores muy antiguos que no lo
   entiendan) — probé a forzar esto con JS midiendo la pantalla a mano,
   pero eso mismo causaba el rebote al escribir (el teclado disparaba una
   remedición) y parpadeo al girar el móvil. El hueco de verdad no era
   esto — era la caché vieja del Service Worker sirviendo una versión
   antigua (ya corregido aparte) — así que aquí se vuelve a lo simple y
   nativo del navegador, sin JS de por medio. */
body { display:flex; flex-direction:column; height:100vh; height:100dvh; margin:0; overflow:hidden; }
.app-shell { flex:1; min-height:0; position:relative; }
/* Posición absoluta = las páginas ocultas NO ocupan espacio en el flujo
   normal (el fallo anterior era justo eso: una regla con selector de ID
   forzaba display:flex siempre, ganándole a la clase .active y dejando la
   página "visible" pero empujada fuera de la pantalla). Así, aunque algo
   vuelva a salir mal con display, la página sigue sin poder verse ni
   robarle espacio a la que sí está activa. */
.app-page { position:absolute; inset:0; display:none; overflow:hidden; }
.app-page.active { display:flex; flex-direction:column; animation: page-fade-in .22s ease-out; }
@keyframes page-fade-in {
  from { opacity:0; transform: translateY(6px) scale(.99); }
  to { opacity:1; transform: translateY(0) scale(1); }
}
/* .chat-app ya mide height:100% desde su única definición (arriba del
   todo del archivo) — ocupa lo que le da .app-shell, sin ninguna otra
   regla repetida que pudiera chocar con ella en algún navegador. */

.bottom-tab-bar {
  display:flex; flex-shrink:0; gap:2px; background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top:1px solid var(--glass-border); position:relative;
  padding: 6px 6px calc(20px + env(safe-area-inset-bottom, 0px));
}
/* Ajuste específico SOLO para web app instalada en iPhone/iPad (Safari,
   WebKit) — detectado con CSS estándar de web, sin ningún JS ni nada
   nativo de por medio:
   - "display-mode: standalone" es el propio estándar de PWA para saber
     si se abrió desde el icono de la pantalla de inicio (en vez de
     dentro de Safari con su barra de navegador visible).
   - "-webkit-touch-callout" es una propiedad que solo entiende WebKit
     (el motor de Safari) — @supports con ella es la forma habitual de
     detectar "esto es Safari/iOS" sin JavaScript.
   Juntas las dos, solo afecta exactamente al caso que nos ha costado
   ajustar — no toca Android, ni PC, ni Safari normal sin instalar. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    .bottom-tab-bar { padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
  }
}
.bottom-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px 6px;
  background:none; border:none; cursor:pointer; color: var(--text-light); font-size:11px; font-weight:600;
  border-radius:18px; transition: background .2s, color .2s;
}
.bottom-tab-icon {
  font-size:22px; line-height:1; width:24px; height:24px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .2s;
}
.bottom-tab-icon svg { width:100%; height:100%; }
.bottom-tab.active {
  color: var(--primary); background: none;
}
.bottom-tab.active .bottom-tab-icon {
  transform: scale(1.12) translateY(-1px);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 60%, transparent));
}

/* Indicador deslizante: una píldora de cristal que se mueve suavemente
   hasta la pestaña activa, en vez de resaltar cada botón por separado
   (más "vivo" y menos plano). Su posición y ancho los calcula el JS
   según qué pestaña esté activa. */
.tab-indicator {
  position:absolute; top:6px; height: calc(100% - 6px - 20px - env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius:16px; box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: left .3s cubic-bezier(.34,1.2,.4,1), width .3s cubic-bezier(.34,1.2,.4,1);
  pointer-events:none; z-index:0;
}
.bottom-tab { position:relative; z-index:1; }

/* ===== Página Actualidad ===== */
#page-news { background: var(--bg-chat); } /* display/flex-direction ya los pone .app-page.active */
.news-header {
  display:flex; align-items:center; justify-content:space-between; padding:16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid var(--border); background: var(--bg-panel);
}
.news-header h2 { margin:0; font-family: var(--font-fun); font-size:22px; }
.news-header-actions { display:flex; gap:6px; }
.news-search-input { margin:12px 14px 0; }
.news-feed { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:14px; max-width:720px; width:100%; margin:0 auto; min-height:0; }

/* La noticia más reciente se destaca grande, como portada de revista */
.news-card.featured {
  display:flex; flex-direction:column; background: var(--bg-panel); border-radius:16px; overflow:hidden;
  cursor:pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .15s;
}
.news-card.featured:hover { transform: translateY(-2px); }
.news-card.featured .news-card-image {
  width:100%; height:190px; object-fit:cover; display:block;
  background-color: var(--primary); /* respaldo sólido, por si el degradado no llegara a pintarse */
  background-image: linear-gradient(135deg, var(--primary), var(--accent));
}
.news-card.featured .news-card-body { padding:14px 16px 16px; }
.news-card.featured .news-card-title { font-size:18px; line-height:1.3; }

/* El resto, en tarjetas horizontales compactas */
.news-card {
  display:flex; gap:12px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius:18px; padding:10px;
  cursor:pointer; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: transform .15s, box-shadow .2s;
}
.news-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 18%, transparent); }
.news-card .news-card-image {
  width:96px; height:96px; border-radius:14px; object-fit:cover; flex-shrink:0;
  background-color: var(--primary);
  background-image: var(--gradient-brand);
}
.news-card-image-placeholder {
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background-color: var(--primary);
  background-image: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff;
}
.news-card-body { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; }
.news-card-source {
  display:inline-block; font-size:10.5px; font-weight:700; color: var(--primary);
  text-transform:uppercase; letter-spacing:.4px; background: rgba(30,165,252,.1);
  padding:2px 8px; border-radius:8px; width:fit-content; margin-bottom:4px;
}
.news-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.news-card-badges .news-card-source { margin-bottom:0; }
.news-card-category-tag {
  display:inline-block; font-size:10.5px; font-weight:600; color: var(--text-light);
  background: var(--bg-sidebar); padding:2px 8px; border-radius:8px; width:fit-content;
}
.news-card-title { font-weight:700; margin:0 0 4px; line-height:1.32; color: var(--text-dark); }
.news-card-summary { font-size:13px; color: var(--text-light); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card-time { font-size:11px; color: var(--text-light); margin-top:6px; }
.news-category-scroller { display:flex; gap:8px; padding:0 14px 12px; overflow-x:auto; scrollbar-width:none; }
.news-category-scroller::-webkit-scrollbar { display:none; }
.news-category-chip {
  flex:0 0 auto; padding:6px 14px; border-radius:16px; background: var(--bg-panel); border:1px solid var(--border);
  font-size:12.5px; font-weight:600; color: var(--text-light); cursor:pointer; white-space:nowrap;
}
.news-category-chip.active { background: var(--primary); color:#fff; border-color: var(--primary); }

/* ===== TV en vivo — lista de canales ===== */
#page-tv { background: var(--bg-chat); }
.tv-channel-list-view { display:flex; flex-direction:column; height:100%; }
.tv-player-view { display:none; height:100%; background:#000; }
.tv-player-view.active { display:flex; }
.tv-channel-list-view.hidden { display:none; }

/* Lista vertical: logo+nombre a la izquierda, guía de programación (EPG)
   alineada a la derecha — como cualquier guía de canales de TV normal. */
.tv-channel-grid {
  flex:1; overflow-y:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px;
  max-width:720px; width:100%; margin:0 auto; box-sizing:border-box; min-height:0;
}
.tv-channel-row {
  display:flex; align-items:center; gap:12px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius:16px; padding:10px 14px; cursor:pointer; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .15s, box-shadow .2s;
}
.tv-channel-row:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 16%, transparent); }
.tv-channel-row-logo {
  width:44px; height:44px; border-radius:8px; object-fit:contain; background: var(--bg-sidebar); flex-shrink:0;
}
.tv-channel-row-logo-placeholder {
  width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; flex-shrink:0;
}
.tv-channel-row-name {
  flex:0 0 auto; width:36%; min-width:0; font-weight:700; font-size:14px; color: var(--text-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tv-channel-warn-badge { margin-left:4px; font-size:12px; }
.tv-channel-blocked { opacity:.6; }
.tv-channel-row-epg {
  flex:1; min-width:0; text-align:right; padding-left:10px; border-left:1px solid var(--border);
}
.tv-channel-row-epg-now { font-size:12.5px; font-weight:600; color: var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-channel-row-epg-next { font-size:11px; color: var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
@media (max-width: 400px) {
  .tv-channel-row-name { width:auto; max-width:40%; }
  .tv-channel-row-epg-next { display:none; } /* en pantallas muy estrechas, solo "Ahora" para no amontonar */
}

/* ===== TV en vivo — reproductor ===== */
.tv-player-video-wrap { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#tv-player-video { width:100%; height:100%; object-fit:contain; background:#000; }
.tv-player-loading { position:absolute; inset:0; display:none; align-items:center; justify-content:center; }
.tv-player-loading.active { display:flex; }

.tv-player-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 18%, transparent 75%, rgba(0,0,0,.55) 100%);
  opacity:1; transition: opacity .25s; padding: max(12px, env(safe-area-inset-top)) 12px 12px;
}
.tv-player-overlay.hidden-controls { opacity:0; pointer-events:none; }
.tv-player-top-bar { display:flex; align-items:center; gap:10px; color:#fff; }
.tv-player-top-bar .icon-btn { background: rgba(255,255,255,.15); color:#fff; }
.tv-player-title-block { display:flex; flex-direction:column; min-width:0; }
.tv-player-channel-name { font-weight:700; font-size:15px; }
.tv-player-epg-info {
  font-size:12px; color: rgba(255,255,255,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:none; border:none; padding:0; text-align:left; font-family:inherit; cursor:pointer;
}
.tv-player-epg-info:hover { text-decoration:underline; }

/* ===== Modal de programación completa (desplazable) ===== */
.tv-epg-schedule-row { display:flex; gap:12px; padding:10px 4px; border-bottom:1px solid var(--border); }
.tv-epg-schedule-row.tv-epg-schedule-now { background: rgba(30,165,252,.08); border-radius:8px; }
.tv-epg-schedule-time { flex-shrink:0; width:52px; font-weight:700; color: var(--primary); font-size:13px; }
.tv-epg-schedule-title { font-weight:600; font-size:14px; }
.tv-epg-schedule-desc { font-size:12.5px; color: var(--text-light); margin-top:2px; }
.tv-player-center-controls { display:flex; align-items:center; justify-content:center; }
.tv-player-btn {
  width:64px; height:64px; border-radius:50%; border:none; background: rgba(255,255,255,.18);
  color:#fff; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.tv-player-bottom-bar { display:flex; align-items:center; gap:10px; color:#fff; }
.tv-player-bottom-bar .icon-btn { background: rgba(255,255,255,.15); color:#fff; flex-shrink:0; }
.tv-player-bottom-bar input[type="range"] { flex:1; max-width:120px; }
.tv-player-live-badge { font-size:11px; font-weight:700; background: rgba(220,50,50,.85); padding:3px 8px; border-radius:8px; margin-left:auto; }

/* ===== Indicador de "deslizar para recargar" ===== */
.pull-refresh-indicator {
  height:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; color: var(--text-light); transition: height .2s ease-out;
  flex-shrink:0;
}
.pull-refresh-indicator.pull-ready { color: var(--primary); }

/* ===== "Recuérdame" en el login ===== */
.remember-me-row {
  display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--text-light);
  cursor:pointer; margin: -4px 0 2px;
}
.remember-me-row input { width:auto; margin:0; }

/* ===== Aviso de registros pendientes de aprobar ===== */
.pending-badge {
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  background:#e74c3c; color:#fff; font-size:10.5px; font-weight:700; border-radius:9px; padding:0 5px;
  margin-left:4px; vertical-align:middle;
}
#admin-link .pending-badge { position:absolute; top:-4px; right:-6px; margin:0; }

/* ===== Fondo "Garabatos" (estilo WhatsApp): patrón sutil de iconos =====
   Dos versiones distintas (no una sola con opacidad): en fondo claro hace
   falta un trazo oscuro para que se note, y en fondo oscuro uno claro —
   con una sola versión y solo cambiar la opacidad, en uno de los dos temas
   habría quedado invisible o demasiado marcado. */
.wallpaper-option[data-wallpaper="doodle"] {
  background-color:#eaf6ff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%237a9aa8%22%20stroke-width%3D%221.4%22%20opacity%3D%220.28%22%3E%0A%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2225%22%20r%3D%227%22/%3E%0A%20%20%3Cpath%20d%3D%22M60%2015%20l4%208%208%201%20-6%206%201%208%20-7%20-4%20-7%204%201%20-8%20-6%20-6%208%20-1%20z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2030%20q8%20-14%2016%200%20q-8%206%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%2020%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M15%2070%20q10%20-6%2018%200%20q-4%208%20-9%208%20q-5%200%20-9%20-8z%22/%3E%0A%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%2275%22%20r%3D%225%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2065%20l14%2014%20M124%2065%20l-14%2014%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%2070%20a8%208%200%201%201%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M20%20120%20c0%20-10%2014%20-10%2014%200%20c0%208%20-7%2012%20-7%2016%20c0%20-4%20-7%20-8%20-7%20-16z%22/%3E%0A%20%20%3Cpath%20d%3D%22M70%20125%20q9%20-9%2018%200%20q-9%209%20-18%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M115%20115%20l3%207%207%201%20-5%205%201%207%20-6%20-3%20-6%203%201%20-7%20-5%20-5%207%20-1z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22165%22%20cy%3D%22120%22%20r%3D%226%22/%3E%0A%20%20%3Cpath%20d%3D%22M25%20165%20a7%207%200%201%200%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M65%20170%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%20160%20q10%20-5%2018%202%20q-6%209%20-18%20-2z%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%20168%20l13%2013%20M173%20168%20l-13%2013%22/%3E%0A%20%20%3Ccircle%20cx%3D%2235%20%22%20cy%3D%22200%22%20r%3D%224%22/%3E%0A%20%20%3Cpath%20d%3D%22M90%20205%20q8%20-12%2016%200%20q-8%205%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%20205%20c2%20-5%208%20-5%2010%200%20c-2%203%20-8%203%20-10%200z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-size: 90px 90px;
}
.messages[data-wallpaper="doodle"] {
  background-color: var(--bg-chat);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%237a9aa8%22%20stroke-width%3D%221.4%22%20opacity%3D%220.28%22%3E%0A%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2225%22%20r%3D%227%22/%3E%0A%20%20%3Cpath%20d%3D%22M60%2015%20l4%208%208%201%20-6%206%201%208%20-7%20-4%20-7%204%201%20-8%20-6%20-6%208%20-1%20z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2030%20q8%20-14%2016%200%20q-8%206%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%2020%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M15%2070%20q10%20-6%2018%200%20q-4%208%20-9%208%20q-5%200%20-9%20-8z%22/%3E%0A%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%2275%22%20r%3D%225%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2065%20l14%2014%20M124%2065%20l-14%2014%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%2070%20a8%208%200%201%201%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M20%20120%20c0%20-10%2014%20-10%2014%200%20c0%208%20-7%2012%20-7%2016%20c0%20-4%20-7%20-8%20-7%20-16z%22/%3E%0A%20%20%3Cpath%20d%3D%22M70%20125%20q9%20-9%2018%200%20q-9%209%20-18%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M115%20115%20l3%207%207%201%20-5%205%201%207%20-6%20-3%20-6%203%201%20-7%20-5%20-5%207%20-1z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22165%22%20cy%3D%22120%22%20r%3D%226%22/%3E%0A%20%20%3Cpath%20d%3D%22M25%20165%20a7%207%200%201%200%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M65%20170%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%20160%20q10%20-5%2018%202%20q-6%209%20-18%20-2z%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%20168%20l13%2013%20M173%20168%20l-13%2013%22/%3E%0A%20%20%3Ccircle%20cx%3D%2235%20%22%20cy%3D%22200%22%20r%3D%224%22/%3E%0A%20%20%3Cpath%20d%3D%22M90%20205%20q8%20-12%2016%200%20q-8%205%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%20205%20c2%20-5%208%20-5%2010%200%20c-2%203%20-8%203%20-10%200z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-size: 130px 130px;
}
:root:not([data-theme="light"]) .messages[data-wallpaper="doodle"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.06%22%3E%0A%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2225%22%20r%3D%227%22/%3E%0A%20%20%3Cpath%20d%3D%22M60%2015%20l4%208%208%201%20-6%206%201%208%20-7%20-4%20-7%204%201%20-8%20-6%20-6%208%20-1%20z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2030%20q8%20-14%2016%200%20q-8%206%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%2020%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M15%2070%20q10%20-6%2018%200%20q-4%208%20-9%208%20q-5%200%20-9%20-8z%22/%3E%0A%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%2275%22%20r%3D%225%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2065%20l14%2014%20M124%2065%20l-14%2014%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%2070%20a8%208%200%201%201%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M20%20120%20c0%20-10%2014%20-10%2014%200%20c0%208%20-7%2012%20-7%2016%20c0%20-4%20-7%20-8%20-7%20-16z%22/%3E%0A%20%20%3Cpath%20d%3D%22M70%20125%20q9%20-9%2018%200%20q-9%209%20-18%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M115%20115%20l3%207%207%201%20-5%205%201%207%20-6%20-3%20-6%203%201%20-7%20-5%20-5%207%20-1z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22165%22%20cy%3D%22120%22%20r%3D%226%22/%3E%0A%20%20%3Cpath%20d%3D%22M25%20165%20a7%207%200%201%200%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M65%20170%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%20160%20q10%20-5%2018%202%20q-6%209%20-18%20-2z%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%20168%20l13%2013%20M173%20168%20l-13%2013%22/%3E%0A%20%20%3Ccircle%20cx%3D%2235%20%22%20cy%3D%22200%22%20r%3D%224%22/%3E%0A%20%20%3Cpath%20d%3D%22M90%20205%20q8%20-12%2016%200%20q-8%205%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%20205%20c2%20-5%208%20-5%2010%200%20c-2%203%20-8%203%20-10%200z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
}
:root[data-theme="dark"] .wallpaper-option[data-wallpaper="doodle"] {
  background-color:#0b141a;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.06%22%3E%0A%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2225%22%20r%3D%227%22/%3E%0A%20%20%3Cpath%20d%3D%22M60%2015%20l4%208%208%201%20-6%206%201%208%20-7%20-4%20-7%204%201%20-8%20-6%20-6%208%20-1%20z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2030%20q8%20-14%2016%200%20q-8%206%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%2020%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M15%2070%20q10%20-6%2018%200%20q-4%208%20-9%208%20q-5%200%20-9%20-8z%22/%3E%0A%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%2275%22%20r%3D%225%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%2065%20l14%2014%20M124%2065%20l-14%2014%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%2070%20a8%208%200%201%201%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M20%20120%20c0%20-10%2014%20-10%2014%200%20c0%208%20-7%2012%20-7%2016%20c0%20-4%20-7%20-8%20-7%20-16z%22/%3E%0A%20%20%3Cpath%20d%3D%22M70%20125%20q9%20-9%2018%200%20q-9%209%20-18%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M115%20115%20l3%207%207%201%20-5%205%201%207%20-6%20-3%20-6%203%201%20-7%20-5%20-5%207%20-1z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22165%22%20cy%3D%22120%22%20r%3D%226%22/%3E%0A%20%20%3Cpath%20d%3D%22M25%20165%20a7%207%200%201%200%200.1%200%22/%3E%0A%20%20%3Cpath%20d%3D%22M65%20170%20c3%20-6%209%20-6%2012%200%20c-3%203%20-9%203%20-12%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%20160%20q10%20-5%2018%202%20q-6%209%20-18%20-2z%22/%3E%0A%20%20%3Cpath%20d%3D%22M160%20168%20l13%2013%20M173%20168%20l-13%2013%22/%3E%0A%20%20%3Ccircle%20cx%3D%2235%20%22%20cy%3D%22200%22%20r%3D%224%22/%3E%0A%20%20%3Cpath%20d%3D%22M90%20205%20q8%20-12%2016%200%20q-8%205%20-16%200z%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%20205%20c2%20-5%208%20-5%2010%200%20c-2%203%20-8%203%20-10%200z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
}

/* =====================================================================
   OPTIMIZACIÓN REAL PARA ANDROID / iOS
   Todo aditivo (no reemplaza nada de lo ya existente), pensado para que
   se sienta como una app nativa: desplazamiento con inercia en TODAS las
   zonas con scroll propio (antes solo lo tenían dos), sin el "flash" gris
   al tocar, sin el retraso de ~300ms al tocar botones, y sin que el
   propio navegador intercepte gestos que ya gestiona la app (como
   deslizar hacia abajo para recargar, o entre pestañas).
   ===================================================================== */

/* Desplazamiento con inercia de verdad en iOS, en cualquier zona con
   scroll propio (antes solo lo tenían la lista de chats y los mensajes) */
.emoji-grid, .gif-grid, .media-grid, .media-list, .radio-station-list,
.news-feed, .tv-channel-grid, .modal-box, .wallpaper-grid,
#news-source-toggles, #folders-list, #tabs-config-list {
  -webkit-overflow-scrolling: touch;
}

/* Sin el "flash" gris de Android/iOS al tocar — los propios botones ya
   tienen su reacción visual (cambio de color, escala, etc.), así que no
   hace falta el resaltado por defecto del navegador encima. */
* { -webkit-tap-highlight-color: transparent; }

/* Quita el retraso de ~300ms que algunos navegadores móviles aplican
   antes de registrar un toque (para distinguirlo de un doble toque de
   zoom) — con maximum-scale=1 en el viewport ese zoom ya está
   desactivado, así que el retraso no aporta nada, solo lentitud. */
button, .icon-btn, .call-btn, .bottom-tab, a { touch-action: manipulation; }

/* Evita que deslizar hacia abajo en el tope de la lista de chats/noticias
   dispare el "tirar para recargar" nativo del propio navegador (Android)
   en vez del nuestro, o el gesto de "volver atrás" de Safari en los
   bordes — nuestro propio sistema de gestos ya se encarga de ambos. */
.conversation-list, .messages, .news-feed, .tv-channel-grid, .radio-station-list {
  overscroll-behavior: contain;
}
html, body { overscroll-behavior-x: none; } /* nunca "volver atrás" por deslizar sin querer */

/* Con tantos elementos táctiles, un tamaño mínimo de toque cómodo evita
   toques fallidos por precisión — sube un poco el área sin cambiar
   apenas el tamaño visual del icono. */
.icon-btn { min-width:38px; min-height:38px; }

/* ===== Botón flotante "subir arriba" (Actualidad) ===== */
.scroll-top-btn {
  position:absolute; right:16px; bottom:24px; width:46px; height:46px; border-radius:50%;
  background: var(--primary); color:#fff; border:none; font-size:22px; cursor:pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index:5;
}
.scroll-top-btn.visible { opacity:1; visibility:visible; transform: translateY(0); }
.scroll-top-btn:active { transform: scale(.9); }

/* =====================================================================
   TEMAS DE COLOR COMPLETOS (elegibles desde Ajustes → Tema)
   Cada uno cambia colores de acento, burbujas y fondo — tanto en claro
   como en oscuro (cada tema tiene sus DOS versiones, no una compartida).
   ===================================================================== */

/* ---- Tema: WhatsApp ---- */
:root[data-color-theme="whatsapp"] {
  --primary: #00a884; --primary-dark: #008f72; --accent: #25d366;
  --bg-chat: #e9f7f2; --bubble-out: #d5f5e3; --border: #d3ede3;
}
:root[data-color-theme="whatsapp"][data-theme="dark"] {
  --primary: #00a884; --primary-dark: #008f72; --accent: #25d366;
  --bubble-out: #005c4b;
}
@media (prefers-color-scheme: dark) {
  :root[data-color-theme="whatsapp"]:not([data-theme="light"]) {
    --primary: #00a884; --primary-dark: #008f72; --accent: #25d366;
    --bubble-out: #005c4b;
  }
}

/* ---- Tema: Telegram ---- */
:root[data-color-theme="telegram"] {
  --primary: #2aabee; --primary-dark: #1c8dc9; --accent: #54c9fd;
  --bg-chat: #e8f5fd; --bubble-out: #dcf0ff; --border: #d2e9f7;
}
:root[data-color-theme="telegram"][data-theme="dark"] {
  --primary: #2aabee; --primary-dark: #1c8dc9; --accent: #54c9fd;
  --bubble-out: #2b5278;
}
@media (prefers-color-scheme: dark) {
  :root[data-color-theme="telegram"]:not([data-theme="light"]) {
    --primary: #2aabee; --primary-dark: #1c8dc9; --accent: #54c9fd;
    --bubble-out: #2b5278;
  }
}

/* ---- Tema: Violeta ---- */
:root[data-color-theme="purple"] {
  --primary: #7c5cff; --primary-dark: #6247d9; --accent: #b39dff;
  --bg-chat: #f3f0fd; --bubble-out: #ece4ff; --border: #e2d9f7;
}
:root[data-color-theme="purple"][data-theme="dark"] {
  --primary: #7c5cff; --primary-dark: #6247d9; --accent: #b39dff;
  --bubble-out: #4a3b8a;
}
@media (prefers-color-scheme: dark) {
  :root[data-color-theme="purple"]:not([data-theme="light"]) {
    --primary: #7c5cff; --primary-dark: #6247d9; --accent: #b39dff;
    --bubble-out: #4a3b8a;
  }
}

/* ---- Tema: Atardecer ---- */
:root[data-color-theme="sunset"] {
  --primary: #ff6b4a; --primary-dark: #e0512f; --accent: #ffab40;
  --bg-chat: #fff2ed; --bubble-out: #ffe1d3; --border: #fbdccb;
}
:root[data-color-theme="sunset"][data-theme="dark"] {
  --primary: #ff6b4a; --primary-dark: #e0512f; --accent: #ffab40;
  --bubble-out: #7a3420;
}
@media (prefers-color-scheme: dark) {
  :root[data-color-theme="sunset"]:not([data-theme="light"]) {
    --primary: #ff6b4a; --primary-dark: #e0512f; --accent: #ffab40;
    --bubble-out: #7a3420;
  }
}

/* ---- Tema: Rosa ---- */
:root[data-color-theme="rose"] {
  --primary: #ec4899; --primary-dark: #d1366f; --accent: #f9a8d4;
  --bg-chat: #fdf0f6; --bubble-out: #fce3ef; --border: #f7d9e8;
}
:root[data-color-theme="rose"][data-theme="dark"] {
  --primary: #ec4899; --primary-dark: #d1366f; --accent: #f9a8d4;
  --bubble-out: #7a2951;
}
@media (prefers-color-scheme: dark) {
  :root[data-color-theme="rose"]:not([data-theme="light"]) {
    --primary: #ec4899; --primary-dark: #d1366f; --accent: #f9a8d4;
    --bubble-out: #7a2951;
  }
}

/* ---- Tema: Medianoche ---- */
:root[data-color-theme="midnight"] {
  --primary: #64748b; --primary-dark: #475569; --accent: #94a3b8;
  --bg-chat: #f1f5f9; --bubble-out: #e2e8f0; --border: #dfe6ee;
}
:root[data-color-theme="midnight"][data-theme="dark"] {
  --primary: #64748b; --primary-dark: #475569; --accent: #94a3b8;
  --bubble-out: #334155;
}
@media (prefers-color-scheme: dark) {
  :root[data-color-theme="midnight"]:not([data-theme="light"]) {
    --primary: #64748b; --primary-dark: #475569; --accent: #94a3b8;
    --bubble-out: #334155;
  }
}

/* ===== Selector de temas de color completos ===== */
.theme-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom:14px; }
.theme-option {
  height:64px; border-radius:12px; cursor:pointer; border:2px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.theme-option.selected { border-color: var(--text-dark); box-shadow: 0 0 0 2px var(--primary); }
.theme-option-swatch { flex:1; display:flex; }
.theme-option-swatch span { flex:1; }
.theme-option-label {
  font-size:10px; font-weight:700; text-align:center; padding:3px 0;
  background: var(--bg-panel); color: var(--text-dark);
}

/* ===== Modal de actividad de usuario (panel admin) ===== */
.activity-summary-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:10px; }
.activity-summary-card {
  background: var(--bg-sidebar); border-radius:10px; padding:10px; text-align:center;
}
.activity-summary-card .num { font-size:20px; font-weight:800; color: var(--primary); }
.activity-summary-card .label { font-size:11px; color: var(--text-light); margin-top:2px; }
.activity-log-row {
  display:flex; justify-content:space-between; align-items:center; padding:8px 4px;
  border-bottom:1px solid var(--border); font-size:13px;
}
.activity-log-row .action-badge {
  background: rgba(30,165,252,.1); color: var(--primary); padding:2px 8px; border-radius:8px; font-size:11.5px; font-weight:700;
}
.activity-log-row .when { color: var(--text-light); font-size:11.5px; }

/* ===== Panel admin: más amigable en móvil ===== */
.admin-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; }
.actions-cell { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.small-btn { white-space:nowrap; }

@media (max-width: 720px) {
  .admin-header { padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); flex-wrap:wrap; gap:8px; }
  .admin-header h1 { font-size:16px; }
  .admin-tabs { gap:2px; }
  .admin-tab { padding:8px 10px; font-size:13px; white-space:nowrap; }
  .admin-section { padding:14px; }
  .admin-section h2 { font-size:17px; }
  table { min-width:640px; } /* dentro del scroll horizontal, no se aplasta ilegible */
  th, td { padding:8px 6px; font-size:12.5px; }
  .small-btn { padding:5px 8px; font-size:12px; }
  .theme-grid, .wallpaper-grid { grid-template-columns: repeat(2, 1fr); }
  .activity-summary-grid { grid-template-columns: 1fr 1fr; }
  .modal-box { max-height:85vh; overflow-y:auto; }
}

/* ===== Fondo "Nebulosa": estilo 2030, solo con CSS (sin imágenes), con
   un movimiento sutil y continuo — como una nube de color viva de fondo. ===== */
.wallpaper-option[data-wallpaper="nebula"] {
  background: radial-gradient(circle at 20% 20%, #7c5cff 0%, transparent 45%),
              radial-gradient(circle at 80% 30%, #00e5ff 0%, transparent 40%),
              radial-gradient(circle at 50% 80%, #ff6ec7 0%, transparent 45%),
              #0a0a18;
}
.messages[data-wallpaper="nebula"] {
  background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 42%),
              radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 40%),
              radial-gradient(circle at 40% 85%, color-mix(in srgb, #ff6ec7 16%, transparent) 0%, transparent 45%),
              var(--bg-chat);
  background-size: 200% 200%;
  animation: nebula-drift 22s ease-in-out infinite;
}
@keyframes nebula-drift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50% { background-position: 20% 30%, 80% 30%, 40% 70%; }
}