/* ============================================================
   Xplicit X — estilos base (modernos, mobile-first, dark-ready)
   ============================================================ */

:root {
  --brand:      #145a6d;
  --brand-2:    #53d2ca;
  --accent:     #ff3b6b;
  --bg:         #0e0f12;
  --surface:    #16181d;
  --surface-2:  #1f232b;
  --text:       #f2f3f5;
  --text-dim:   #9aa3ad;
  --border:     #2a2f38;
  --danger:     #ff5a5f;
  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 10px 30px -12px rgba(0,0,0,.6);
  --maxw:       640px;
}

/* Tema claro (opcional desde Ajustes). El oscuro es el predeterminado. */
html[data-theme="light"] {
  --bg:         #f6f7f9;
  --surface:    #ffffff;
  --surface-2:  #eceff3;
  --text:       #1a1d22;
  --text-dim:   #5a636e;
  --border:     #dde1e7;
  --shadow:     0 10px 30px -12px rgba(0,0,0,.18);
}
html[data-theme="light"] { color-scheme: light; }
/* Barras y cabeceras fijas en claro (su fondo estaba fijado en oscuro). */
html[data-theme="light"] .topbar { background: rgba(255,255,255,.85); }
html[data-theme="light"] .bottombar { background: rgba(255,255,255,.92); }
html[data-theme="light"] .chat-head,
html[data-theme="light"] .gc-head { background: rgba(255,255,255,.92); }

* { box-sizing: border-box; }

html {
  color-scheme: dark;                    /* barras de scroll nativas en oscuro */
  scrollbar-color: var(--border) transparent;  /* Firefox: pulgar / fondo */
  scrollbar-width: thin;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;          /* sin barra horizontal a nivel de página */
}

/* Barra de scroll (WebKit/Chromium) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #2e3540; }

a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-accent { background: linear-gradient(135deg, var(--accent), #ff7aa0); }
.btn-ghost  { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* ---------- Formularios ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 14px;
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.4; font-family: inherit; }
.field-hint { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; text-align: right; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(83,210,202,.15);
}
.field .hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.check input { margin-top: 3px; }

/* ---------- Alertas ---------- */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-error { background: rgba(255,90,95,.12); color: #ffb4b6; border: 1px solid rgba(255,90,95,.3); }
.alert-info  { background: rgba(83,210,202,.12); color: #aef0eb; border: 1px solid rgba(83,210,202,.3); }

/* ---------- Auth (login/registro/reset) ---------- */
.auth-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo img { width: 180px; margin: 0 auto; }
.auth-title { font-size: 20px; font-weight: 800; text-align: center; margin: 0 0 4px; }
.auth-sub { text-align: center; color: var(--text-dim); font-size: 14px; margin: 0 0 24px; }
.auth-links { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-dim); }
.auth-links a { display: inline-block; margin: 4px 0; }
.lang-switch { text-align: right; font-size: 12px; margin-bottom: 8px; }

/* ---------- Layout app (con barra inferior) ---------- */
.app-main {
  padding-top: 60px;
  padding-bottom: 76px;
  min-height: 100dvh;
}

/* Cabecera superior fija */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(14,15,18,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 50;
  display: flex; align-items: center;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.topbar .logo img { height: 26px; }
.topbar .actions { display: flex; align-items: center; gap: 18px; }
.topbar .actions a { color: var(--text); font-size: 20px; }
.topbar .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--border);
}

/* Barra inferior fija (única, rutas absolutas) */
.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(14,15,18,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  z-index: 50;
}
.bottombar .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.bottombar a {
  color: var(--text-dim);
  font-size: 21px;
  padding: 10px;
  transition: color .15s ease;
}
.bottombar a:hover { color: var(--text); text-decoration: none; }
.bottombar a.active { color: var(--accent); text-decoration: none; } /* activo en magenta */
.bottombar .post-btn {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #ff7aa0);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.bottombar .post-btn:hover { color: #fff; }

.topbar-left { display: flex; align-items: center; gap: 10px; }
.back-btn { color: var(--text); font-size: 20px; padding: 4px 2px; }
.back-btn:hover { text-decoration: none; color: var(--brand-2); }

/* Menú desplegable de usuario (foto de perfil) */
.menu { position: relative; }
.menu-trigger { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.menu-panel {
  position: absolute; top: 44px; right: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu.open .menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 11px 12px;
  color: var(--text); font-size: 14px; text-align: left;
  background: none; border: none; border-radius: 8px; cursor: pointer;
}
.menu-item i { width: 18px; color: var(--text-dim); }
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item-form { margin: 0; }
.menu-logout { color: var(--danger); }
.menu-logout i { color: var(--danger); }

.muted { color: var(--text-dim); }
.center { text-align: center; }

/* ============================================================
   Feed (pichas): historias, tarjetas de post, likes
   ============================================================ */

.feed { padding-top: 12px; }

/* ---------- Carrusel de historias ---------- */
.stories { margin: 4px 0 14px; }
.stories-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge antiguo */
}
.stories-row::-webkit-scrollbar { display: none; width: 0; height: 0; }
.stories-row.draggable { cursor: grab; }
.stories-row.dragging { cursor: grabbing; user-select: none; }
.stories-row.dragging a { pointer-events: none; }
.story {
  flex: 0 0 auto;
  width: 66px;
  text-align: center;
  color: var(--text);
}
.story:hover { text-decoration: none; }
.story-ring {
  display: block;
  width: 64px; height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--accent), var(--brand-2));
  overflow: hidden;
}
.story-ring img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg);
}
.story-all-ring {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--brand-2);
  font-size: 22px;
}
.story-nick {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Tarjeta de post ---------- */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.post-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
}
.post-user { display: flex; align-items: center; gap: 9px; color: var(--text); }
.post-user:hover { text-decoration: none; }
.post-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border);
}
.post-nick { font-weight: 700; font-size: 14px; }
.post-nick .verif { color: var(--brand-2); font-size: 12px; margin-left: 3px; }
.post-time { color: var(--text-dim); font-size: 12px; }

.post-media {
  position: relative;
  background: #000;
  display: flex;
  justify-content: center;
  user-select: none;
  touch-action: manipulation; /* desactiva el zoom por doble toque → like más responsivo */
}
/* Mostramos la imagen a ancho completo y alto natural (sin barras negras). */
.post-img { width: 100%; height: auto; display: block; }
video.post-img { max-height: 88vh; }

/* La carátula premium (pixel) ya viene censurada: no aplicamos blur extra. */
.post-media.is-locked .post-img { filter: none; }
.premium-placeholder {
  width: 100%; aspect-ratio: 1;
  background: repeating-linear-gradient(45deg, #1a1d24, #1a1d24 12px, #20242c 12px, #20242c 24px);
}
.lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #fff; background: rgba(0,0,0,.25); font-weight: 700;
}
.lock-overlay i { font-size: 30px; }
.lock-overlay:hover { text-decoration: none; }
/* Vídeo premium: el ▶ va horneado en el centro de la portada; bajamos el
   texto/candado para no taparlo, y reducimos el icono del candado. */
.lock-overlay.has-video {
  justify-content: flex-end;
  padding-bottom: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,0) 70%);
}
.lock-overlay.has-video i { font-size: 18px; }

/* Corazón animado de doble-tap */
.like-burst {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: #fff; font-size: 90px; opacity: 0;
  pointer-events: none;
  text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.post-media.burst .like-burst { animation: likePop .8s ease; }
@keyframes likePop {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  15%  { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  30%  { transform: translate(-50%,-50%) scale(.95); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.1); opacity: 0; }
}

.post-actions { display: flex; align-items: center; gap: 18px; padding: 10px 14px 4px; }
.like-btn, .comment-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 15px; font-weight: 600;
  padding: 0;
}
.like-btn i, .comment-btn i { font-size: 21px; transition: transform .12s ease, color .12s ease; }
.like-btn.liked i { color: var(--accent); }
.like-btn:active i { transform: scale(1.25); }
.comment-btn { color: var(--text); }
.comment-btn:hover { text-decoration: none; }

.post-caption { padding: 6px 14px 14px; font-size: 14px; line-height: 1.4; }
.post-caption a { color: var(--text); }

.feed-loader { text-align: center; color: var(--text-dim); padding: 18px; font-size: 22px; }

/* ---------- Estado vacío ---------- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.empty-state i { font-size: 46px; color: var(--surface-2); }
.empty-state h2 { color: var(--text); margin: 16px 0 6px; font-size: 20px; }
.empty-state .btn { max-width: 280px; margin: 20px auto 0; }

/* ============================================================
   Popup de instalación PWA
   ============================================================ */
.pwa-popup {
  position: fixed; left: 12px; right: 12px; bottom: 74px;
  max-width: 460px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  z-index: 80;
  transform: translateY(160%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility .35s;
}
.pwa-popup.show { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
/* En la app ya instalada (standalone) NO mostrar nunca el popup. */
@media (display-mode: standalone) {
  .pwa-popup { display: none !important; }
}
.pwa-popup img { width: 46px; height: 46px; border-radius: 11px; }
.pwa-popup .pwa-text { flex: 1; }
.pwa-popup .pwa-text strong { display: block; font-size: 15px; }
.pwa-popup .pwa-text span { font-size: 12px; color: var(--text-dim); }
.pwa-popup .pwa-actions { display: flex; flex-direction: column; gap: 6px; }
.pwa-popup .btn { width: auto; padding: 9px 16px; font-size: 13px; }
.pwa-popup .pwa-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; color: var(--text-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px;
}
.pwa-ios-steps {
  font-size: 13px; color: var(--text-dim); line-height: 1.6;
}
.pwa-ios-steps i { color: var(--brand-2); }

/* ============================================================
   Detalle de post + comentarios
   ============================================================ */
.detail { padding-top: 14px; }
.post-detail { margin-bottom: 16px; }

.comments-title { font-size: 15px; margin: 4px 2px 12px; }
.no-comments { padding: 6px 2px 14px; font-size: 14px; }

.comment {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  align-items: flex-start;
}
.comment-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border);
  flex: 0 0 auto;
}
.comment-body { flex: 1; min-width: 0; }
.comment-text { font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.comment-text a { color: var(--text); }
.comment-time {
  display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px;
}

/* Barra para escribir comentario */
.comment-form {
  position: sticky;
  bottom: 64px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg);
  padding: 10px 0 12px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.comment-form input[type="text"] {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
}
.comment-form input:focus { border-color: var(--brand-2); }
.comment-form button {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--brand);
  color: #fff; font-size: 16px; cursor: pointer;
}
.comment-form button:disabled { opacity: .5; }

/* ============================================================
   Detalle: stats, likers, paneles propietario/admin, toast
   ============================================================ */
.badge-private {
  margin: 0 0 8px; padding: 0 14px; font-size: 12px; color: var(--text-dim); text-align: center;
}
.badge-private i { color: var(--accent); }
.badge-reto, .badge-super { padding-left: 14px; padding-right: 14px; }

.likers { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 2px 14px 0; font-size: 13px; color: var(--text-dim); }
.likers i { color: var(--accent); }
.likers b { color: var(--text); font-weight: 600; }
.likers:hover b { text-decoration: underline; }

/* Modal de listado de likers */
.likers-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.likers-modal[hidden] { display: none; }
.likers-sheet { background: var(--bg); width: 100%; max-width: 460px; max-height: 70vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.likers-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.likers-head i { color: var(--accent); }
.likers-x { background: none; border: 0; color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; padding: 0; }
.likers-body { overflow-y: auto; padding: 6px 0; }
.liker-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: var(--text); }
.liker-row:hover { background: var(--surface); text-decoration: none; }
.liker-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.liker-row span { font-weight: 600; }
@media (min-width: 560px) { .likers-modal { align-items: center; } .likers-sheet { border-radius: 16px; } }

.post-stats {
  display: flex; gap: 22px;
  padding: 12px 14px 14px;
  color: var(--text-dim); font-size: 13px;
}
.post-stats i { margin-right: 5px; }

.post-secondary {
  display: flex; gap: 10px; margin: 6px 0 18px;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
}
.post-secondary::-webkit-scrollbar { display: none; height: 0; }
.post-secondary .chip { flex: 0 0 auto; white-space: nowrap; }
.post-secondary.dragging { cursor: grabbing; user-select: none; }
.post-secondary.dragging .chip { pointer-events: none; }
/* Si los chips no caben, mostramos solo el icono. */
.post-secondary.icons-only .chip-label { display: none; }
.post-secondary.icons-only .chip { padding: 9px 13px; }

/* Botón seguir/dejar de seguir en la cabecera del detalle */
.post-head-right { display: flex; align-items: center; gap: 12px; }
.follow-user {
  background: var(--brand); color: #fff; border: none;
  border-radius: 999px; padding: 7px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.follow-user.following { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.follow-user:disabled { opacity: .6; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 9px 15px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.chip:hover:not(:disabled) { background: #262c36; text-decoration: none; }
.chip:disabled { opacity: .45; cursor: default; }
.chip-danger { color: var(--danger); border-color: rgba(255,90,95,.4); }

/* Paneles */
.owner-panel, .admin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
}
.panel-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.panel-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel-row form { margin: 0; }

.admin-panel { border-color: rgba(255,90,95,.35); }
.mod-form { margin: 0; }
.mod-link {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: 9px 4px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.mod-link:hover { color: var(--accent); }
.mod-link i { width: 18px; color: var(--danger); }
.mod-reset i { color: var(--brand-2); }
.mod-cover i { color: var(--accent); }
.mod-note { font-size: 11px; margin: 12px 0 0; }

/* Toggle creativo/normal (panel admin) */
.creative-toggle-form {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.creative-state { font-size: 14px; }
.creative-state i { color: var(--brand-2); width: 18px; }
.switch {
  position: relative; width: 46px; height: 26px; flex: 0 0 auto;
  border: none; border-radius: 999px; background: var(--surface-2);
  cursor: pointer; transition: background .2s ease;
}
.switch.on { background: var(--brand-2); }
.switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .2s ease;
}
.switch.on .switch-knob { transform: translateX(20px); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 80px;
  transform: translateX(-50%) translateY(20px);
  background: #2a2f38; color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font-size: 14px; max-width: 90%;
  box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;   /* siempre por delante de todo, incluidos los modales */
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Modal (reporte)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }   /* el atributo hidden debe ocultarlo */
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal-sheet {
  position: relative;
  width: 100%; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px;
  max-height: 85vh; overflow-y: auto;
  animation: sheetUp .25s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 520px) {
  .modal { align-items: center; }
  .modal-sheet { border-radius: var(--radius); }
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-x { background: none; border: none; color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer; }
.modal-intro { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; }

.radio-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px; font-size: 14px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.radio-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.modal-sheet textarea {
  width: 100%; margin: 14px 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 12px 14px; font-size: 15px; font-family: inherit; resize: vertical; outline: none;
}
.modal-sheet textarea:focus { border-color: var(--brand-2); }

/* ============================================================
   Tableros (boards)
   ============================================================ */
.boards { padding-top: 14px; }
.boards-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.boards-head h1 { font-size: 20px; margin: 0; }
.boards-section { font-size: 16px; margin: 26px 0 12px; }

.btn-mini {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-mini:hover { background: #262c36; text-decoration: none; }

.board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.board-card-wrap { position: relative; }
.board-pvt-btn { position: absolute; top: 6px; right: 6px; z-index: 10; background: rgba(0,0,0,.55); border: 0; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: background .15s; }
.board-pvt-btn:hover { background: rgba(0,0,0,.8); }
.board-card { color: var(--text); }
.board-card:hover { text-decoration: none; }
.board-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  border: 1px solid var(--border);
}
.board-lock {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.55); color: #fff;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.board-meta { padding: 7px 2px; }
.board-name { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-sub { display: block; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detalle de tablero */
.board-detail { padding-top: 14px; }
.board-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}
.board-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-hero-top h1 { font-size: 20px; margin: 0; }
.board-hero-sub { font-size: 13px; color: var(--text-dim); margin: 8px 0 0; }
.board-hero-sub a { color: var(--text); }
.follow-board.following { background: var(--brand); color: #fff; border-color: var(--brand); }
.board-owner-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.board-owner-actions .board-delete { margin-top: 0; }
.board-delete { margin-top: 14px; }
.mini-danger {
  background: none; border: none; color: var(--danger);
  font-size: 12px; cursor: pointer; padding: 0;
}

/* Cuadrícula de posts (tablero) */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.grid-item { position: relative; aspect-ratio: 1; overflow: hidden; background: #000; border-radius: 4px; }
.grid-item img, .grid-item video { width: 100%; height: 100%; object-fit: cover; }
.grid-badge { position: absolute; top: 6px; right: 6px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Selector de color */
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-dot {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  position: relative; border: 2px solid transparent;
}
.color-dot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.color-dot:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 2px var(--bg) inset; }

/* Modal guardar en tablero */
.board-list { margin-bottom: 14px; max-height: 50vh; overflow-y: auto; }
.board-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text); padding: 13px 6px; font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.board-row .check { color: var(--text-dim); font-size: 18px; }
.board-row.saved .check { color: var(--brand-2); }
.board-row:hover { background: var(--surface-2); }
.board-create-inline { display: flex; gap: 8px; }
.board-create-inline input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); padding: 11px 15px; font-size: 14px; outline: none;
}
.board-create-inline button {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer;
}

/* ============================================================
   Iteración: stories-post, comentarios en card, explore, pickers
   ============================================================ */
.page-title { font-size: 20px; margin: 14px 0 14px; }

/* Stories que muestran el post (no el avatar) */
.story-ring.story-post { padding: 3px; }
.story-ring.story-post img,
.story-ring.story-post video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }

/* Comentarios recientes bajo cada post del feed */
.post-comments { padding: 2px 14px 14px; }
.pc-line { font-size: 14px; line-height: 1.45; margin-bottom: 2px; }
.pc-line a { color: var(--text); }
.pc-more { display: inline-block; font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* Paneles colapsables (detalle) */
details.owner-panel, details.admin-panel { padding: 0; }
details.owner-panel summary, details.admin-panel summary {
  list-style: none; cursor: pointer; padding: 16px;
  display: flex; align-items: center; gap: 8px;
}
details summary::-webkit-details-marker { display: none; }
details.owner-panel summary::after, details.admin-panel summary::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-left: auto; font-size: 12px; color: var(--text-dim); transition: transform .2s ease;
}
details[open].owner-panel summary::after, details[open].admin-panel summary::after { transform: rotate(180deg); }
details.owner-panel .panel-row { padding: 0 16px 16px; }
details.admin-panel .mod-form, details.admin-panel .mod-note { margin-left: 16px; margin-right: 16px; }

/* Explorar: masonry */
.explore { padding-top: 6px; }
/* Masonry recortado con fade a negro para una línea recta inferior */
.masonry-wrap {
  position: relative;
  max-height: 60vh;
  overflow: hidden;
  margin-bottom: 18px;
}
.masonry { column-count: 3; column-gap: 6px; }
.masonry-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(14,15,18,0) 0%, var(--bg) 92%);
  pointer-events: none;
}
.masonry-item {
  display: block; position: relative; margin: 0 0 6px;
  break-inside: avoid; border-radius: 8px; overflow: hidden; background: #000;
}
.masonry-item img, .masonry-item video { width: 100%; display: block; }
/* Explorar: tableros al azar en carrusel horizontal + botón ancho completo */
.explore-boards {
  display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
}
.explore-boards::-webkit-scrollbar { display: none; height: 0; }
.explore-boards .board-card { flex: 0 0 42%; }
.explore-boards.draggable { cursor: grab; }
.explore-boards.dragging { cursor: grabbing; user-select: none; }
.explore-boards.dragging a { pointer-events: none; }
.explore-boards-btn { margin: 0 0 8px; }
.explore-chip-row { display: flex; justify-content: center; margin: 4px 0 8px; }

/* Formulario de comentario: botones emoji/gif */
.comment-form .cf-btn {
  flex: 0 0 auto; width: 38px; height: 44px;
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; cursor: pointer;
}
.comment-form .cf-btn b { font-size: 13px; font-weight: 800; }
.comment-form .cf-btn:hover { color: var(--brand-2); }
.comment-form .cf-send {
  flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 16px; cursor: pointer;
}

/* Pickers emoji / gif */
.picker {
  position: sticky; bottom: 122px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.picker[hidden] { display: none; }   /* el atributo hidden debe ocultar el picker */
.emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 38px; }
.emoji-picker .picker-close { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; font-size: 16px; }
.emoji-picker .emoji { background: none; border: none; font-size: 22px; cursor: pointer; padding: 4px; border-radius: 6px; }
.emoji-picker .emoji:hover { background: var(--surface-2); }
.gif-picker #gif-search {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); padding: 9px 14px; font-size: 14px; outline: none; margin-bottom: 8px;
}
.gif-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: 240px; overflow-y: auto; }
.gif-item { padding: 0; border: none; background: #000; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; }

/* GIF dentro de un comentario */
.comment-gif { max-width: 180px; border-radius: 10px; margin-top: 4px; }

/* ============================================================
   Barra inferior con 7 iconos (más compacta)
   ============================================================ */
.bottombar a { padding: 8px 4px; font-size: 19px; }
/* La zanahoria usa el color normal; el activo (magenta) lo hereda del icono. */

/* ============================================================
   Explorar: accesos TOP/RETOS + fila premium
   ============================================================ */
.explore-tabs { display: flex; gap: 10px; margin-bottom: 14px; }
.explore-tab {
  flex: 1; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; color: var(--text); font-weight: 700; font-size: 14px;
}
.explore-tab:hover { background: var(--surface-2); text-decoration: none; }
.explore-tab i { color: var(--brand-2); margin-right: 6px; }

.premium-row {
  display: flex; gap: 8px; margin-bottom: 18px;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.premium-row::-webkit-scrollbar { display: none; height: 0; }
.premium-item {
  position: relative; flex: 0 0 33%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #000;
}
.premium-all {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 700;
}
.premium-all i { font-size: 20px; color: var(--brand-2); }
.premium-all:hover { text-decoration: none; background: #262c36; }
.premium-row.draggable { cursor: grab; }
.premium-row.dragging { cursor: grabbing; user-select: none; }
.premium-row.dragging a { pointer-events: none; }
.premium-item img { width: 100%; height: 100%; object-fit: cover; }
.premium-price {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 7px; border-radius: 999px;
}
.premium-price .fa-carrot { color: var(--accent); }

/* ============================================================
   TOP / estadísticas globales
   ============================================================ */
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-range { margin-bottom: 16px; }
.filter-chip {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); padding: 9px 15px; font-size: 13px; font-weight: 600;
}
.filter-chip.small { padding: 7px 13px; font-size: 12px; }
.filter-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.filter-chip:hover { text-decoration: none; }

.top-grid .grid-item { position: relative; }
.rank-badge {
  position: absolute; top: 5px; left: 5px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px;
}
.metric-badge {
  position: absolute; bottom: 5px; left: 5px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.metric-badge .fa-heart { color: var(--accent); }

.user-rank { list-style: none; margin: 0; padding: 0; }
.user-rank li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.rank-num { width: 24px; text-align: center; font-weight: 800; color: var(--text-dim); }
.rank-user { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--text); min-width: 0; }
.rank-user:hover { text-decoration: none; }
.rank-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rank-user span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-total { font-size: 13px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.rank-total .fa-star { color: #ffcb45; }

/* ============================================================
   Perfil
   ============================================================ */
.profile-bar {
  display: flex; justify-content: space-around;
  font-size: 12px; color: var(--text-dim);
  padding: 8px 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.profile-bar .fa-star { color: #ffcb45; }
.profile-head { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex: 0 0 auto; }
.profile-counts { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.profile-counts b { display: block; font-size: 18px; }
.profile-counts span { font-size: 12px; color: var(--text-dim); }
.profile-name { font-weight: 800; font-size: 16px; }
.profile-name .verif { color: var(--brand-2); font-size: 13px; margin-left: 3px; }
.profile-bio { font-size: 14px; margin: 6px 0; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.profile-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; }
.profile-chip i { font-size: 11px; }
.profile-last-seen { font-size: 12px; color: var(--text-dim); margin: 4px 0 8px; }
.bio-rest { display: block; }
.bio-expand { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text-dim); background: none; color: var(--text-dim); font-size: 11px; cursor: pointer; margin-left: 6px; vertical-align: middle; padding: 0; line-height: 1; }
.bio-expand:hover { border-color: var(--text); color: var(--text); }
.profile-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; margin-bottom: 12px; }
.profile-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.profile-actions .btn-mini, .profile-actions .follow-user { flex: 1; justify-content: center; text-align: center; }

.profile-tabs { display: flex; border-top: 1px solid var(--border); }
.ptab {
  flex: 1; background: none; border: none; color: var(--text-dim);
  padding: 12px; font-size: 18px; cursor: pointer; border-bottom: 2px solid transparent;
}
.ptab.on { color: var(--text); border-bottom-color: var(--text); }

.grid-item .pixel-mini {
  position: absolute; top: 4px; left: 4px;
  width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* Estadísticas de usuario */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; text-align: center;
}
.stat-card i { font-size: 22px; color: var(--brand-2); }
.stat-card b { display: block; font-size: 24px; margin: 6px 0 2px; }
.stat-card span { font-size: 12px; color: var(--text-dim); }

/* ============================================================
   Lightbox (imágenes de comentarios)
   ============================================================ */
.comment-gif { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 20px;
  animation: lbIn .15s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 100%; max-height: 92vh;
  border-radius: 8px; object-fit: contain; cursor: zoom-out;
}
.lightbox-top {
  position: absolute; top: 14px; right: 18px;
  display: flex; align-items: center; gap: 14px;
}
.lightbox-x {
  background: none; border: none; color: #fff;
  font-size: 38px; line-height: 1; cursor: pointer; padding: 0;
}

/* ============================================================
   Comentarios: menciones, respuestas, hilos, autocompletar
   ============================================================ */
.mention { color: var(--brand-2); font-weight: 600; }

.comment-meta { display: flex; align-items: center; gap: 12px; margin-top: 3px; }
.reply-btn {
  background: none; border: none; color: var(--text-dim);
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 0;
}
.reply-btn:hover { color: var(--brand-2); }

/* Respuestas (1 nivel, indentadas) */
.comment-replies { margin-left: 44px; }
.comment.is-reply .comment-avatar { width: 28px; height: 28px; }

/* Indicador "respondiendo a" */
.reply-indicator {
  position: sticky; bottom: 120px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 6px;
  font-size: 13px; color: var(--text-dim);
}
.reply-indicator[hidden] { display: none; }
.reply-indicator b { color: var(--text); }
.reply-indicator button { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }

/* Caja de autocompletar @usuario */
.mention-box {
  position: sticky; bottom: 118px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 6px; max-height: 240px; overflow-y: auto;
}
.mention-box[hidden] { display: none; }
.mention-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 9px 12px;
  color: var(--text); font-size: 14px; text-align: left;
}
.mention-item:hover { background: var(--surface-2); }
.mention-item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* ============================================================
   Publicar
   ============================================================ */
.publish { padding-top: 14px; }
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 480px) { .type-grid { grid-template-columns: repeat(4, 1fr); } }
.type-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 10px; color: var(--text); cursor: pointer; font-weight: 700; font-size: 13px;
  transition: border-color .15s ease, background .15s ease;
}
.type-card i { font-size: 22px; color: var(--text-dim); }
.type-card.on { border-color: var(--accent); background: rgba(255,59,107,.08); }
.type-card.on i { color: var(--accent); }
.type-info { font-size: 13px; color: var(--text-dim); margin: 0 0 18px; }

/* Zona de subida grande y centrada (oculta el input nativo) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  width: 100%; min-height: 150px; padding: 26px 16px;
  background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius);
  cursor: pointer; color: var(--text);
  transition: border-color .15s ease, background .15s ease, transform .06s ease;
}
.upload-zone:hover { border-color: var(--brand-2); background: var(--surface-2); }
.upload-zone:active { transform: scale(.99); }
.upload-zone i { font-size: 38px; color: var(--brand-2); }
.upload-zone .uz-title { font-size: 16px; font-weight: 800; }
.upload-zone .uz-sub { font-size: 12px; color: var(--text-dim); }
.upload-zone.error { border-color: var(--danger); }
.upload-zone.error .uz-title { color: var(--danger); }

.upload-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.up-thumb { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }

.publish textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 12px 14px;
  font-size: 15px; font-family: inherit; resize: vertical; outline: none;
}
.publish textarea:focus { border-color: var(--brand-2); }
.publish input[type="file"] { color: var(--text-dim); font-size: 13px; }
.publish input[type="number"] {
  width: 120px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 11px 14px; font-size: 15px; outline: none;
}
#publish-btn { margin-top: 8px; }

/* Galería de varias fotos en el detalle */
.post-media.has-gallery { display: block; }
.post-gallery {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  transition: height .2s ease; /* la altura se ajusta a la imagen visible (JS) */
}
.post-gallery::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.gallery-slide img { width: 100%; height: 100%; max-height: none; object-fit: contain; display: block; }
.gallery-count {
  position: absolute; top: 10px; right: 18px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}

/* ============================================================
   Reto (challenge)
   ============================================================ */
.reto-badge { color: #ffcb45; font-size: 14px; }
.badge-reto { margin: 0 0 8px; font-size: 12px; color: #ffcb45; font-weight: 700; }
.reto-info {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,203,69,.1); border: 1px solid rgba(255,203,69,.35);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5;
}
.reto-info i { color: #ffcb45; margin-top: 2px; }

/* ============================================================
   Toggle (switch con checkbox) reutilizable
   ============================================================ */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; margin-bottom: 12px; cursor: pointer;
}
.toggle-text { font-size: 14px; }
.toggle-text i { color: var(--brand-2); margin-right: 6px; }
.toggle { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--surface-2); transition: background .2s ease;
}
.toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .2s ease;
}
.toggle input:checked + .toggle-track { background: var(--brand-2); }
.toggle input:checked + .toggle-track::after { transform: translateX(20px); }

/* ============================================================
   Buscador (popup + resultados)
   ============================================================ */
.search-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; }
.search-modal[hidden] { display: none; }
.search-sheet {
  position: relative; width: 100%; max-width: 560px; margin: 64px 12px 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
  animation: sheetDown .2s ease;
}
@keyframes sheetDown { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 6px 4px 16px;
}
.search-bar > i { color: var(--text-dim); }
.search-bar input {
  flex: 1; background: none; border: none; outline: none; color: var(--text);
  font-size: 16px; padding: 11px 0;
}
.search-x { background: none; border: none; color: var(--text-dim); font-size: 24px; cursor: pointer; padding: 0 8px; }
.search-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px 0; }
.search-chips::-webkit-scrollbar { display: none; }
.search-sheet .btn { margin-top: 2px; }

/* Recall (barra que reabre el popup) */
.search-recall {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); padding: 12px 16px; font-size: 15px; cursor: pointer;
  margin: 14px 0 18px; text-align: left;
}
.search-recall span { color: var(--text); }

/* Pestañas de resultados */
.search-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.search-tabs::-webkit-scrollbar { display: none; }
.stab {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.stab span { color: var(--text-dim); margin-left: 3px; }
.stab.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.stab.on span { color: rgba(255,255,255,.8); }

.result-section[hidden] { display: none; }
.result-section .boards-section { margin-top: 8px; }

/* Lista de usuarios */
.user-list { display: flex; flex-direction: column; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.user-row:hover { text-decoration: none; background: var(--surface); }
.user-row img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.user-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-row-nick { font-weight: 700; }
.user-row-nick .verif { color: var(--brand-2); font-size: 12px; margin-left: 3px; }
.user-row-bio { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-foll { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.grid-badge-left { left: 6px; right: auto; }

/* ============================================================
   Mensajería
   ============================================================ */
.messages { padding-top: 14px; }
.msg-filter { display: flex; gap: 8px; margin-bottom: 12px; }
.msg-filter .filter-chip span { background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.msg-filter .filter-chip.on span { background: rgba(255,255,255,.25); }
.msg-empty-filter { padding: 20px 4px; }
.thread[hidden] { display: none; }
.thread-list { display: flex; flex-direction: column; }
.thread { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.thread:hover { text-decoration: none; background: var(--surface); }
.thread-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.thread-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-nick { font-weight: 700; }
.thread-prev { font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-prev.unread { color: var(--text); font-weight: 600; }
.thread-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.thread-side time { font-size: 11px; color: var(--text-dim); }
.thread-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }

/* Cabecera de conversación */
.chat-head {
  position: fixed; top: 56px; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(14,15,18,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: 8px 14px;
  max-width: var(--maxw); margin: 0 auto;
}
.chat-head-user { display: flex; align-items: center; gap: 10px; color: var(--text); }
.chat-head-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chat-head-user span { font-weight: 700; }
.chat-head-user .verif { color: var(--brand-2); font-size: 12px; margin-left: 3px; }
.chat-block { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.chat-block[data-blocked="1"] { color: var(--danger); border-color: rgba(255,90,95,.4); }

.chat-wrap { padding: 0; }
/* Área de mensajes con scroll propio (fija entre cabecera y composer). */
.chat-messages {
  position: fixed; top: 108px; bottom: 122px; left: 0; right: 0;
  max-width: var(--maxw); margin: 0 auto;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 36px;
}

/* Burbujas */
.msg { display: flex; max-width: 80%; padding-bottom: 14px; }
.msg.mine { align-self: flex-end; justify-content: flex-end; }
.msg.theirs { align-self: flex-start; }
.msg-bubble { padding: 8px 12px; border-radius: 16px; font-size: 18px; line-height: 1.4; word-wrap: break-word; }
.msg.theirs .msg-bubble { background: var(--surface-2); border-bottom-left-radius: 5px; }
.msg.mine .msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.msg.mine .msg-bubble a { color: #cdeffd; }
.msg-text a.mention { font-weight: 600; }
.msg-img { max-width: 220px; border-radius: 12px; cursor: zoom-in; display: block; }
.msg-meta { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 3px; }
.msg-meta time { font-size: 10px; opacity: .7; }
.ticks { font-size: 10px; opacity: .7; letter-spacing: -3px; }
.ticks.read { color: #53d2ca; opacity: 1; }
.msg.mine .ticks { color: #cfe9f2; }
.msg.mine .ticks.read { color: #8be8ff; }

/* Burn */
.burn-tag { display: block; font-size: 10px; font-weight: 700; color: #ffb454; margin-bottom: 3px; }
.msg.mine .burn-tag { color: #ffd9a0; }
.msg.burning { transition: opacity .8s ease, transform .8s ease; opacity: 0; transform: scale(.9); }

/* Ubicación */
.msg-geo { display: flex; align-items: center; gap: 10px; color: inherit; }
.msg-geo i { font-size: 22px; }
.msg-geo span { display: flex; flex-direction: column; font-weight: 700; }
.msg-geo small { font-weight: 400; opacity: .7; font-size: 11px; }

/* Escribiendo (flota justo encima del composer) */
.chat-typing {
  position: fixed; bottom: 118px; left: 0; right: 0; z-index: 41;
  max-width: var(--maxw); margin: 0 auto; padding: 2px 18px;
  font-size: 12px; color: var(--text-dim);
}
.chat-typing[hidden] { display: none; }
.chat-typing .dots span { animation: blink 1.2s infinite both; }
.chat-typing .dots span:nth-child(2) { animation-delay: .2s; }
.chat-typing .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.chat-blocked-note { text-align: center; font-size: 13px; color: var(--text-dim); padding: 14px; }

/* Composer */
/* El composer + la barra de respuesta viven en un "dock" fijo común. */
.composer-dock {
  position: fixed; bottom: 60px; left: 0; right: 0; z-index: 40;
  max-width: var(--maxw); margin: 0 auto;
}
.chat-composer {
  position: relative; /* ancla el menú "+" (comp-extras) al composer, no al dock */
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 8px 10px;
}
.chat-composer[hidden] { display: none; }
.comp-btn, .comp-burn { flex: 0 0 auto; width: 38px; height: 42px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.comp-btn b { font-size: 12px; font-weight: 800; }
.comp-btn:hover, .comp-burn:hover { color: var(--brand-2); }
.comp-burn input { display: none; }
.comp-burn input:checked + i { color: #ff7a18; }
#msg-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); padding: 11px 16px; font-size: 18px; outline: none; }
.comp-send { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; cursor: pointer; }
/* El picker GIF flota sobre el composer */
.chat-composer + #toast { }
/* Picker GIF flotando sobre el composer (chat). */
#gif-picker, #emoji-picker { position: fixed; bottom: 136px; left: 12px; right: 12px; max-width: 560px; margin: 0 auto; z-index: 45; }
/* En el detalle del post el composer es sticky: el picker debe ser sticky también
   (si fuera fixed, al "despegarse" el composer al final del scroll, el picker
   quedaría pegado al viewport y taparía el input). Así suben/bajan juntos. */
.detail #gif-picker, .detail #emoji-picker { position: sticky; bottom: 136px; }

/* ============================================================
   Panel de administración
   ============================================================ */
.menu-admin i { color: var(--accent); }
.profile-mini-actions { display: flex; gap: 10px; margin: -8px 0 18px; }

.creative-cta {
  background: var(--surface); border: 1px solid rgba(255,203,69,.35); border-radius: var(--radius);
  padding: 16px; margin-top: 16px;
}
.creative-cta-head { font-weight: 800; margin-bottom: 6px; }
.creative-cta-head i { color: #ffcb45; }
.creative-cta p { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; }
.creative-cta textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; outline: none; margin-bottom: 10px; }

.admin { padding-top: 12px; }
.admin-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav.sub { margin: -6px 0 14px; }
.admin-tab {
  flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); padding: 9px 14px; font-size: 13px; font-weight: 600;
}
.admin-tab.small { padding: 7px 12px; font-size: 12px; }
.admin-tab i { color: var(--text-dim); }
.admin-tab.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.admin-tab.on i { color: #fff; }
.admin-tab:hover { text-decoration: none; }

.admin-list { display: flex; flex-direction: column; }
.admin-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.admin-row.done { opacity: .55; }
.admin-row:hover { text-decoration: none; }
.admin-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #000; }
.admin-thumb.round { border-radius: 50%; }
.admin-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-row-info .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-meta { font-size: 11px; color: var(--text-dim); }
.admin-actions { display: flex; gap: 6px; }
.admin-badge { font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); }
.admin-badge.danger { color: var(--danger); }
.admin-badge.ok { color: var(--brand-2); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); }
.admin-subhead { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; font-weight: 700; }
.user-report-search { display: flex; gap: 8px; margin-bottom: 20px; }
.user-report-search input[type="text"] { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 14px; font-size: 14px; outline: none; }
.user-report-search input[type="text"]:focus { border-color: var(--brand); }
.user-report-card { display: flex; gap: 16px; align-items: flex-start; background: var(--surface-2); border-radius: 12px; padding: 16px; margin-bottom: 4px; }
.user-report-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.user-report-meta { flex: 1; min-width: 0; }
.user-report-nick { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; flex-wrap: wrap; margin-bottom: 4px; }
.ev-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); }
.ev-login { color: var(--brand-2); }
.ev-registro { color: #7ee787; }
.ev-reset, .ev-reset_login { color: #ffcb45; }

.admin-map { width: 100%; height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.admin-map .leaflet-control-attribution { font-size: 9px; }

/* ============================================================
   Notificaciones
   ============================================================ */
.notif-bell { position: relative; }
.notif-dot {
  position: absolute; top: -6px; right: -8px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.bb-msg { position: relative; }
.bb-dot {
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg);
}

.notif-list { display: flex; flex-direction: column; }
.notif { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.notif:hover { text-decoration: none; background: var(--surface); }
.notif.unread { background: rgba(255,59,107,.06); }
.notif-av-link { flex: 0 0 auto; display: block; line-height: 0; }
.notif-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.notif-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); }
.notif-main:hover { text-decoration: none; }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-body a { color: var(--text); }
.notif-nick { font-weight: 600; }
.notif-nick:hover { text-decoration: underline; }
.notif-text:hover { text-decoration: none; }
.notif-time { display: inline-block; color: var(--text-dim); }
.notif-body time { font-size: 11px; color: var(--text-dim); margin-top: 2px; cursor: pointer; }
.notif-thumb-link { flex: 0 0 auto; line-height: 0; }
.notif-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; display: block; }
.notif-ic { color: var(--brand-2); font-size: 18px; width: 44px; text-align: center; }

/* Ajustes */
.settings .toggle-text i { color: var(--brand-2); }
.lang-row { display: flex; gap: 8px; }
.settings .hint { margin: 0 0 8px; }

/* ============================================================
   Botón "+" del composer (comentarios y DM) — ahorra espacio en móvil
   ============================================================ */
/* (El composer ya es sticky/fixed: sirve de ancla al desplegable, no tocar su position) */
.cf-plus.open i, .comp-plus.open i { transform: rotate(45deg); transition: transform .15s ease; }
.cf-plus i, .comp-plus i { transition: transform .15s ease; }

.cf-extras, .comp-extras {
  position: absolute; bottom: calc(100% + 8px); left: 6px;
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px; box-shadow: var(--shadow); z-index: 46;
}
.cf-extras[hidden], .comp-extras[hidden] { display: none; }
.cf-extras .cf-btn, .comp-extras .comp-btn, .comp-extras .comp-burn { width: 40px; height: 40px; }

/* Cabecera del picker de GIF con botón cerrar */
.gif-head { display: flex; align-items: center; gap: 6px; padding: 6px; }
.gif-head #gif-search { flex: 1; margin: 0; }
.picker-close {
  flex: 0 0 auto; width: 32px; height: 32px; border: none; cursor: pointer;
  background: var(--surface-2, rgba(127,127,127,.15)); color: var(--text);
  border-radius: 50%; font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.picker-close:hover { background: var(--accent); color: #fff; }

/* ============================================================
   Menú superior ampliado + menú del perfil + favoritos
   ============================================================ */
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-panel { max-height: 82vh; overflow-y: auto; }

/* Menú discreto (tres puntos) en el perfil */
.profile-menu { position: relative; flex: 0 0 auto; align-self: flex-start; }
.profile-menu-trigger {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; font-size: 18px;
  display: grid; place-items: center;
}
.profile-menu-trigger:hover { background: var(--surface-2); color: var(--text); }
.profile-menu-panel {
  position: absolute; top: 40px; right: 0; min-width: 210px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.profile-menu.open .profile-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* Página de favoritos */
.favorites { padding-top: 14px; }
.fav-list { list-style: none; margin: 0; padding: 0; }
.fav-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.fav-user { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text); }
.fav-user:hover { text-decoration: none; }
.fav-user img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.fav-info { display: flex; flex-direction: column; min-width: 0; }
.fav-nick { font-weight: 700; }
.fav-nick .verif { color: var(--brand-2); font-size: 12px; margin-left: 3px; }
.fav-bio { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-toggle { flex: 0 0 auto; background: none; border: none; cursor: pointer; width: 42px; height: 42px; font-size: 20px; }
.fav-toggle .fa-star { color: #f5c518; }
.fav-toggle:disabled { opacity: .5; }

/* ============================================================
   Contadores del perfil enlazados + listado de seguidores/seguidos
   ============================================================ */
.profile-counts a { color: var(--text); }
.profile-counts a:hover { text-decoration: none; }
.profile-counts a:hover b { color: var(--brand-2); }

.connections { padding-top: 14px; }
.connections .page-title a { color: var(--text); }

.conn-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 14px; margin-bottom: 12px;
}
.conn-search i { color: var(--text-dim); }
.conn-search input { flex: 1; background: none; border: none; color: var(--text); font-size: 15px; outline: none; }

.conn-sort { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.conn-sort-label { font-size: 13px; color: var(--text-dim); }
.conn-dir {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  width: 36px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px;
}
.conn-dir:hover { background: var(--surface); }

.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.conn-row[hidden] { display: none; }
.conn-user { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text); }
.conn-user:hover { text-decoration: none; }
.conn-user img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.conn-nick { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.conn-nick .verif { color: var(--brand-2); font-size: 12px; margin-left: 3px; }
.conn-where { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; text-align: right; padding-right: 4px; }
.conn-where a { color: var(--brand-2); text-decoration: none; }
.conn-where a:hover { text-decoration: underline; }
.conn-you { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; padding-right: 6px; }

.conn-follow {
  flex: 0 0 auto; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--brand); white-space: nowrap;
}
.conn-follow.is-follow { background: var(--brand); color: #fff; }
.conn-follow.is-following { background: none; color: var(--text); border-color: var(--border); }
.conn-follow.is-mutual { color: var(--brand-2); border-color: var(--brand-2); }
.conn-follow:disabled { opacity: .55; }

/* ============================================================
   MAPA DE PROXIMIDAD
   ============================================================ */
.mapa { padding-top: 14px; }
.map-loc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.map-loc-label { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.map-loc-label i { color: var(--brand-2); }
.map-travel-toggle { white-space: nowrap; }
.map-travel-form { display: flex; gap: 8px; margin-bottom: 12px; }
.map-travel-form input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 10px 16px; outline: none;
}
.map-travel-form .btn { flex: 0 0 auto; width: auto; padding: 0 18px; }
.map-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.map-search {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px;
}
.map-search i { color: var(--text-dim); }
.map-search input { flex: 1; background: none; border: none; color: var(--text); outline: none; font-size: 14px; }
.map-filter { display: flex; gap: 6px; }
.map-permission { text-align: center; padding: 40px 20px; }
.map-permission i { font-size: 40px; color: var(--brand-2); }
.map-permission h2 { margin: 12px 0 4px; }
.map-permission .btn { width: auto; display: inline-flex; margin-top: 12px; }
.map-or { margin-top: 14px; font-size: 13px; }
.map-loading { text-align: center; padding: 30px; color: var(--text-dim); font-size: 22px; }

.map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 -16px;
}
.map-tile { display: block; color: #fff; }
.map-tile:hover { text-decoration: none; opacity: .88; }
.map-tile-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center center;
}
.map-tile-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.map-tile-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 5px 6px 6px;
  z-index: 2;
}
.map-tile-nick {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.map-tile-nick .verif { color: var(--brand-2); font-size: 9px; }
.map-tile-dist { display: block; font-size: 10px; color: rgba(255,255,255,.72); line-height: 1.3; }
@media (min-width: 480px) { .map-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   COMUNIDAD
   ============================================================ */
.community { padding-top: 14px; }
.welcome-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 18px;
}
.welcome-main { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.welcome-main i { color: var(--brand-2); font-size: 20px; }
.welcome-main b { font-size: 18px; }
.welcome-online { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.welcome-online:hover { text-decoration: none; color: var(--brand-2); }
.welcome-online i { font-size: 11px; color: var(--text-dim); }
.online-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: onlinePulse 2s infinite;
}
@keyframes onlinePulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.6); } 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }

/* Carrusel de últimas altas */
.newest-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.newest-row::-webkit-scrollbar { display: none; }
.newest-item { flex: 0 0 auto; width: 76px; text-align: center; color: var(--text); }
.newest-item:hover { text-decoration: none; }
.newest-img { width: 76px; height: 76px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--brand-2); }
.newest-nick { display: block; font-size: 11px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newest-nick .verif { color: var(--brand-2); font-size: 9px; }

/* Banner Aula de Dibujo */
.aula-banner {
  display: flex; align-items: center; gap: 14px; margin: 20px 0;
  background: linear-gradient(135deg, var(--brand), #8e5cff); color: #fff;
  border-radius: var(--radius); padding: 18px;
}
.aula-banner:hover { text-decoration: none; color: #fff; filter: brightness(1.05); }
.aula-banner-icon { font-size: 30px; flex: 0 0 auto; }
.aula-banner-text { flex: 1; display: flex; flex-direction: column; }
.aula-banner-text strong { font-size: 17px; }
.aula-banner-text span { font-size: 12.5px; opacity: .92; }
.aula-banner-arrow { font-size: 16px; opacity: .9; }

/* Bloques "para descubrir" */
.discover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.disc-tile { display: flex; flex-direction: column; align-items: center; }
.disc-photo {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  background-size: cover; background-position: center; border: 1px solid var(--border);
}
.disc-badge { position: absolute; top: 5px; right: 5px; color: var(--brand-2); background: var(--surface); border-radius: 50%; font-size: 13px; line-height: 1; }
.disc-nick { display: block; width: 100%; text-align: center; font-size: 12px; font-weight: 700; color: var(--text); margin: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-nick:hover { text-decoration: none; }
.disc-follow {
  width: 100%; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 0; cursor: pointer;
}
.disc-follow.following { background: none; color: var(--text); border-color: var(--border); }
.disc-follow:disabled { opacity: .55; }

/* Avatar con punto online en listados */
.conn-av-wrap { position: relative; flex: 0 0 auto; }
.online-dot-av { position: absolute; right: 0; bottom: 0; border: 2px solid var(--bg); }

/* ============================================================
   AULA DE DIBUJO
   ============================================================ */
.aula-intro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-dim); }
.aula-create-btn { display: inline-flex; width: auto; margin-bottom: 18px; }
.aula-form { max-width: 520px; }
.file-drop {
  display: block; position: relative; border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 28px 16px; text-align: center; cursor: pointer; margin-bottom: 14px;
  overflow: hidden;
}
.file-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-dim); }
.file-drop-inner i { font-size: 30px; color: var(--brand-2); }
.file-drop-inner span { font-weight: 700; color: var(--text); }
.file-drop img { width: 100%; border-radius: var(--radius-sm); display: block; }

/* ============================================================
   PREMIUM / ZANAHORIAS
   ============================================================ */
.premium { padding-top: 14px; }
.prem-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.prem-chips::-webkit-scrollbar { display: none; }
.prem-chips .chip { white-space: nowrap; flex: 0 0 auto; }
.prem-balance { font-size: 14px; margin-bottom: 14px; }
.prem-balance i { color: var(--accent); }
.prem-balance b { font-size: 16px; }

.prem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Etiquetas de contenido premium (display + picker) */
.prem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.prem-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: var(--surface-2); font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.prem-tag-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ptag-chip { position: relative; }
.ptag-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ptag-chip span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 20px; border: 2px solid var(--border); font-size: 13px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.ptag-chip input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }

.prem-video-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
    text-decoration: none; margin: 8px 0; word-break: break-all;
}
.prem-video-btn:hover { opacity: .85; color: #fff; }

.enlacevideo-input[hidden] { display: none; }
.enlacevideo-input {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding: 0 14px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s;
}
.enlacevideo-input:focus-within { border-color: var(--accent); }
.enlacevideo-input i { color: var(--text-dim); font-size: 14px; flex-shrink: 0; }
.enlacevideo-input input {
    flex: 1; border: 0; background: transparent;
    padding: 12px 0; font-size: 14px; color: var(--text);
    outline: none; min-width: 0;
}
.enlacevideo-input input::placeholder { color: var(--text-dim); }
.enlacevideo-preview { margin-top: 12px; }

.sales-list { display: flex; flex-direction: column; }
.sale-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.sale-item:hover { background: var(--surface); text-decoration: none; }
.sale-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 56px; background: var(--surface-2); }
.sale-desc { font-size: 14px; line-height: 1.5; }
@media (min-width: 560px) { .prem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prem-card { display: flex; flex-direction: column; }
.prem-cover {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  background-size: cover; background-position: center; border: 1px solid var(--border); display: block;
}
.prem-cover .prem-lock, .prem-cover .prem-owned {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 13px;
}
.prem-cover.owned .prem-owned { background: var(--brand); }
.prem-price { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 999px; }
.prem-price i { color: var(--accent); }
.prem-nick { font-size: 12px; color: var(--text-dim); margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prem-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 8px 0; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none;
}
.prem-btn.owned { background: none; color: var(--text); border-color: var(--border); }
.prem-btn:hover { text-decoration: none; }
.lock-overlay { border: none; cursor: pointer; font: inherit; width: 100%; }
.grid-badge-tl { left: 6px; right: auto; }

/* Modal de desbloqueo */
.unlock-sheet { text-align: center; }
.unlock-icon { font-size: 34px; color: var(--brand-2); margin-bottom: 6px; }
.unlock-figures { display: flex; gap: 12px; margin: 16px 0; }
.unlock-fig { flex: 1; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; }
.unlock-fig-label { display: block; font-size: 11px; color: var(--text-dim); }
.unlock-fig-val { font-size: 17px; } .unlock-fig-val i { color: var(--accent); }
.unlock-warn { color: var(--danger); font-size: 13px; margin: 6px 0; }
.unlock-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.unlock-anim { position: relative; min-height: 170px; display: grid; place-items: center; overflow: hidden; }
.unlock-lock { font-size: 64px; color: var(--accent); animation: lockpop .5s ease; }
@keyframes lockpop { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.carrot-drop { position: absolute; top: -34px; font-size: 26px; animation-name: carrotfall; animation-timing-function: linear; animation-iteration-count: 1; }
@keyframes carrotfall { to { transform: translateY(230px) rotate(160deg); opacity: 0; } }

/* Ganancias */
.earn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; }
.earn-row { display: flex; gap: 14px; }
.earn-fig { flex: 1; }
.earn-label { display: block; font-size: 12px; color: var(--text-dim); }
.earn-val { font-size: 22px; font-weight: 800; }
.earn-note { font-size: 12.5px; margin: 12px 0; }

/* Mercado */
.market-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.currency-switch { display: flex; gap: 6px; }
.market-rate { font-size: 13px; margin-bottom: 14px; }
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.pack-carrots { font-size: 26px; font-weight: 800; } .pack-carrots i { color: var(--accent); }
.pack-label { font-size: 12px; color: var(--text-dim); }
.pack-price { font-size: 18px; font-weight: 700; margin: 8px 0 12px; }
.pack-buy { width: 100%; }

/* ============================================================
   PÁGINAS LEGALES / GUÍA / AYUDA
   ============================================================ */
.legal { padding-top: 14px; max-width: 680px; }
.legal section { margin-bottom: 18px; }
.legal h2 { font-size: 16px; margin: 0 0 6px; }
.legal p { font-size: 14px; line-height: 1.6; color: var(--text); }
.legal-links { margin-top: 22px; font-size: 13px; color: var(--text-dim); }
.help-form { margin: 12px 0 24px; max-width: 560px; }
.help-links { list-style: none; padding: 0; margin: 10px 0; }
.help-links li { margin: 4px 0; }
.help-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); padding: 8px 0; }
.help-links i { width: 18px; color: var(--text-dim); }

.guide { padding-top: 14px; max-width: 680px; }
.guide-lead { font-size: 14.5px; color: var(--text-dim); margin-bottom: 18px; }
.guide-section { font-size: 17px; margin: 26px 0 12px; }
.guide-steps { display: flex; flex-direction: column; gap: 12px; }
.guide-step { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.guide-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 18px; color: var(--brand-2); }
.guide-step h3 { font-size: 15px; margin: 0 0 3px; }
.guide-step p { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.5; }

/* Compradores en el detalle premium */
.prem-buyers { margin-top: 12px; padding: 0 14px; }
.prem-price-tag { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.prem-price-tag i { color: var(--accent); }
.prem-price-tag b { color: var(--text); }
.prem-buyers-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.prem-buyers-head i, .prem-buyers-count i { color: var(--accent); }
.prem-buyers-count { font-size: 13px; color: var(--text-dim); margin-top: 12px; }
.prem-buyers-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.prem-buyers-list::-webkit-scrollbar { display: none; }
.prem-buyer { flex: 0 0 auto; width: 58px; text-align: center; color: var(--text); }
.prem-buyer:hover { text-decoration: none; }
.prem-buyer img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.prem-buyer span { display: block; font-size: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Botón "Solicitar compra" (premium solo mutuos) */
.prem-btn.prem-request { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   EDITAR PERFIL
   ============================================================ */
.edit-profile { padding-top: 14px; max-width: 600px; }
.ep-form .field { margin-bottom: 14px; }
.ep-form .field > label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 5px; }
.ep-form input[type="text"], .ep-form input[type="number"], .ep-form textarea, .ep-form select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; outline: none;
}
.ep-form input:focus, .ep-form textarea:focus, .ep-form select:focus { border-color: var(--brand-2); }
.ep-section { font-size: 14px; margin: 22px 0 10px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.ep-avatar { position: relative; display: block; width: 110px; margin: 0 auto 18px; cursor: pointer; }
.ep-avatar img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.ep-avatar-edit { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg); }

.ep-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ep-toggle > span:first-child i { width: 20px; color: var(--text-dim); }
.ep-hint { font-size: 12px; margin: 10px 0 20px; }
.edit-profile .btn-accent { width: 100%; }

/* Compartir perfil (URL + QR) */
.share-sheet { text-align: center; }
.share-qr { display: flex; justify-content: center; margin: 16px 0; }
.share-qr img, .share-qr canvas { display: block; border-radius: 8px; background: #fff; padding: 8px; }
.share-url { display: flex; gap: 8px; margin: 8px 0; }
.share-url input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.share-url button { flex: 0 0 auto; width: 46px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; }
.share-url button:hover { background: var(--surface); }
#share-native { width: 100%; margin-top: 8px; }

/* ============================================================
   AUTH: bloque "¿Qué es Xplicit?" + chip superior
   ============================================================ */
.auth-about { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; }
.auth-about h2 { font-size: 16px; margin: 0 0 8px; }
.auth-about p { font-size: 13px; line-height: 1.6; color: var(--text-dim); margin: 0 0 8px; }
.auth-about-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand-2); font-size: 13px; }
.auth-top-chip {
  position: fixed; top: 14px; right: 14px; z-index: 20;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700;
}
.auth-top-chip:hover { text-decoration: none; border-color: var(--brand-2); color: var(--brand-2); }
.auth-top-chip i { color: var(--brand-2); }

/* ============================================================
   LANDING PÚBLICA (/sobre)
   ============================================================ */
.public-body { background: var(--bg); }
.lp-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: rgba(14,15,18,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.lp-logo img { height: 26px; display: block; }
.lp-top-right { display: flex; align-items: center; gap: 14px; }
.lp-cta { width: auto; padding: 8px 16px; }

.lp-hero {
  min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center;
  background-size: cover; background-position: center; padding: 40px 20px; position: relative;
}
.lp-hero-inner { max-width: 640px; }
.lp-hero h1 { font-size: clamp(30px, 8vw, 54px); margin: 0 0 12px; line-height: 1.05; }
.lp-hero p { font-size: clamp(15px, 4vw, 20px); color: var(--text-dim); margin: 0 0 24px; }
.lp-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-hero-btns .btn { width: auto; padding: 12px 26px; }
.lp-scroll { display: block; margin-top: 34px; font-size: 22px; color: var(--text-dim); animation: lpbob 1.8s ease-in-out infinite; }
@keyframes lpbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.lp-features { max-width: 920px; margin: 0 auto; padding: 60px 20px; display: flex; flex-direction: column; gap: 70px; }
.lp-feature { display: flex; align-items: center; gap: 36px; }
.lp-feature.alt { flex-direction: row-reverse; }
.lp-feature-text { flex: 1; }
.lp-feature-text h2 { font-size: clamp(22px, 5vw, 30px); margin: 0 0 10px; }
.lp-feature-text p { font-size: 16px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.lp-feature-text .lp-feature-extra { font-size: 14.5px; margin-top: 12px; opacity: .85; }

/* Mockup de móvil */
.phone {
  flex: 0 0 auto; width: 210px; height: 420px; border-radius: 34px; background: #0a0b0d;
  border: 2px solid #2a2d34; padding: 9px; box-shadow: 0 20px 50px rgba(0,0,0,.5); position: relative;
}
.phone::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 6px; border-radius: 6px; background: #2a2d34; z-index: 2; }
.phone-screen { width: 100%; height: 100%; border-radius: 26px; background-size: cover; background-position: center; }

.lp-about { max-width: 720px; margin: 0 auto; padding: 30px 20px 60px; }
.lp-about h2 { font-size: clamp(24px, 6vw, 34px); margin: 0 0 16px; }
.lp-about p { font-size: 15.5px; line-height: 1.75; color: var(--text); }

.lp-gallery-wrap { padding: 40px 16px; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-gallery-wrap h2 { text-align: center; font-size: clamp(22px, 5vw, 30px); margin: 0 0 24px; }
.lp-gallery { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .lp-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .lp-gallery { grid-template-columns: repeat(4, 1fr); } }
.lp-art { margin: 0; position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; }
.lp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-art figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); display: flex; align-items: center; gap: 5px;
}
.lp-art figcaption i { color: var(--accent); }

.lp-final { text-align: center; padding: 64px 20px; }
.lp-final h2 { font-size: clamp(24px, 6vw, 34px); margin: 0 0 6px; }
.lp-final .lp-hero-btns { margin-top: 20px; }
.lp-foot { margin-top: 30px; font-size: 12px; color: var(--text-dim); }
.lp-foot a { color: var(--text-dim); }

/* Animación de aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 680px) {
  .lp-feature, .lp-feature.alt { flex-direction: column; text-align: center; gap: 22px; }
  .lp-feature-text p { font-size: 15px; }
}

/* Campos del formulario del Aula de Dibujo */
.aula-form .field { margin-bottom: 14px; }
.aula-form .field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 700; }
.aula-form textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 15px; line-height: 1.5;
  outline: none; resize: vertical; font-family: inherit;
}
.aula-form textarea:focus { border-color: var(--brand-2); }

/* Resultado de pago (Stripe) */
.pay-result { text-align: center; padding: 50px 20px; max-width: 460px; margin: 0 auto; }
.pay-ico { font-size: 64px; margin-bottom: 10px; }
.pay-ok .pay-ico { color: #2ecc71; }
.pay-err .pay-ico { color: var(--danger); }
.pay-result h1 { font-size: 24px; margin: 0 0 10px; }
.pay-balance { margin: 16px 0; font-size: 15px; }
.pay-balance i { color: var(--accent); }
.pay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.pay-actions .btn { width: auto; padding: 11px 22px; }

/* Navegación entre posts del mismo autor (flechas en PC; swipe en móvil) */
.post-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 35;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  display: none; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: var(--shadow);
}
.post-nav:hover { background: var(--surface-2); color: var(--brand-2); text-decoration: none; }
.post-nav-prev { left: 18px; }
.post-nav-next { right: 18px; }
@media (min-width: 760px) { .post-nav { display: flex; } }

/* ============================================================
   PUBLICACIONES DE PAGO (banner + opciones + superpost)
   ============================================================ */
.paid-section-title {
  display: flex; align-items: center; gap: 9px; font-size: 17px;
  margin: 46px 0 14px; padding-top: 26px; border-top: 1px solid var(--border);
}
.paid-section-title i { color: var(--accent); }
.paid-banner {
  display: flex; align-items: center; gap: 14px; margin-top: 0;
  background: linear-gradient(135deg, var(--accent), #ff9f1c); color: #fff;
  border-radius: var(--radius); padding: 16px;
}
.paid-banner:hover { text-decoration: none; color: #fff; filter: brightness(1.05); }
.paid-banner-ico { font-size: 26px; flex: 0 0 auto; }
.paid-banner-text { flex: 1; display: flex; flex-direction: column; }
.paid-banner-text strong { font-size: 16px; }
.paid-banner-text span { font-size: 12.5px; opacity: .92; }
.paid-banner-arrow { opacity: .9; }

.paid-options { padding-top: 14px; }
.pay-option {
  display: flex; align-items: center; gap: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.pay-option:hover { text-decoration: none; border-color: var(--brand-2); }
.pay-option.disabled { opacity: .55; }
.pay-option-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: #fff; }
.pay-option-ico.sp { background: linear-gradient(135deg, var(--accent), #ff7aa0); }
.pay-option-ico.ad { background: linear-gradient(135deg, #8e5cff, var(--brand-2)); }
.pay-option-ico.msg { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.pay-option-text { flex: 1; min-width: 0; }
.pay-option-text strong { display: block; font-size: 15px; }
.pay-option-text span { font-size: 12.5px; color: var(--text-dim); }
.pay-cost { font-size: 12px; font-weight: 700; color: var(--accent); margin-left: 6px; }
.pay-cost i { color: var(--accent); }
.pay-soon { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-dim); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

.sp-cost { font-size: 14px; font-weight: 700; margin-top: 8px; }
.sp-cost i { color: var(--accent); }
.sp-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }

/* Badges SUPERPOST */
.superpost-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800;
  letter-spacing: .5px; color: #fff; background: linear-gradient(135deg, var(--accent), #ff9f1c);
  border-radius: 999px; padding: 3px 8px; margin-left: 8px;
}
.badge-super {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--accent), #ff9f1c);
  border-radius: 999px; padding: 5px 12px; margin: 4px 0;
}

/* Acordeón "Modo viaje" en el mapa */
.map-travel-acc { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--surface); }
.map-travel-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; font-size: 14px; font-weight: 700;
}
.map-travel-acc summary::-webkit-details-marker { display: none; }
.map-travel-acc summary .fa-plane { color: var(--brand-2); margin-right: 6px; }
.map-travel-acc .acc-arrow { transition: transform .2s ease; color: var(--text-dim); }
.map-travel-acc[open] .acc-arrow { transform: rotate(180deg); }
.map-travel-acc .map-travel-form { padding: 0 14px 12px; margin: 0; }

/* ============================================================
   CAMPAÑAS: anuncio en el feed, formulario y "Mis campañas"
   ============================================================ */
.post-xt { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--surface); }
.xt-media { position: relative; display: block; }
.xt-media img { width: 100%; display: block; }
.xt-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  border-radius: 6px; padding: 3px 8px;
}
.xt-text { display: block; padding: 12px 14px; color: var(--text); font-size: 14px; line-height: 1.5; }
.xt-text:hover { text-decoration: none; }
.xt-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--brand-2); font-weight: 700; font-size: 13px; }

/* Formulario de campaña */
.campaign-create input[type="range"] { width: 100%; }
.campaign-create .field input[type="text"] {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; outline: none;
}
.campaign-create textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; outline: none; resize: vertical; font-family: inherit;
}

/* Mis campañas */
.campaigns { padding-top: 14px; }
.cmp-list { display: flex; flex-direction: column; gap: 10px; }
.cmp-row { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.cmp-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.cmp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-top { display: flex; align-items: center; gap: 8px; }
.cmp-state { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.cmp-state.cmp-pend { background: rgba(255,159,28,.2); color: #ff9f1c; }
.cmp-state.cmp-ok { background: rgba(46,204,113,.2); color: #2ecc71; }
.cmp-state.cmp-no { background: rgba(231,29,54,.18); color: var(--danger); }
.cmp-state.cmp-end { background: var(--surface-2); color: var(--text-dim); }
.cmp-dur { font-size: 11px; color: var(--text-dim); }
.cmp-text { font-size: 13px; }
.cmp-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); }
.cmp-stats i { margin-right: 3px; }

/* En crear campaña, el intro al mismo ancho que el formulario */
.campaign-create .aula-intro { max-width: 520px; }

/* Toast de envío "mensaje a todos" (segundo plano) */
.bcast-toast {
  position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 60;
  max-width: 560px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 12px 14px;
}
.bcast-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.bcast-head i { color: var(--brand-2); }
.bcast-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bcast-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ff9f1c); transition: width .4s ease; }
.bcast-toast.done .bcast-head i { color: #2ecc71; }

/* "Mensaje a todos": formulario a ancho completo del contenedor */
.broadcast-create .aula-form { max-width: none; }

/* Botones de perfil solo-icono (Estadísticas / Compartir) para no desbordar en móvil */
.profile-actions .btn-mini.btn-icon { padding: 0 14px; flex: 0 0 auto; }
.profile-actions .btn-mini.btn-icon i { margin: 0; }

/* Crédito a Bran Sólo (landing y guía) */
.lp-credit, .guide-credit { margin-top: 18px; font-size: 14px; color: var(--text-dim); }
.lp-credit a, .guide-credit a { color: var(--brand-2); }
.lp-credit a i, .guide-credit a i { font-size: 11px; }

/* Regalo de premium */
.prem-gift-btn { display: flex; width: fit-content; margin: 14px auto 20px; align-items: center; gap: 6px; }
.prem-buyer { position: relative; }
.prem-buyer-gift { position: absolute; top: -2px; right: 6px; background: var(--accent); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
.gift-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; margin: 10px 0; }
.gift-search i { color: var(--text-dim); }
.gift-search input { flex: 1; background: none; border: none; color: var(--text); outline: none; font-size: 15px; }
.gift-suggest { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.gift-sug { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-sm); color: var(--text); text-align: left; }
.gift-sug:hover { background: var(--surface-2); }
.gift-sug img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.gift-sug span { font-weight: 700; }

/* ============================================================
   CHAT DE GRUPO
   ============================================================ */
.gc-head {
  position: fixed; top: 56px; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(14,15,18,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: 8px 14px;
  max-width: var(--maxw); margin: 0 auto;
}
.gc-head h1 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; }
.gc-head h1 > i { color: var(--brand-2); }
.gc-online-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 999px; padding: 2px 9px 2px 7px; font-size: 12px; font-weight: 700; color: var(--accent); }
.gc-online-badge i { font-size: 10px; }
.gc-langs { display: flex; gap: 4px; }
.gc-lang { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; color: var(--text-dim); background: var(--surface-2); }
.gc-lang.on { background: var(--brand-2); color: #08231f; }
.gc-lang:hover { text-decoration: none; }

.gc-messages { gap: 12px !important; }
.gc-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 88%; }
.gc-bubble { max-width: 100%; }
.gc-text { overflow-wrap: anywhere; }
.gc-msg.mine { flex-direction: row-reverse; align-self: flex-end; }
.gc-av { flex: 0 0 auto; }
.gc-av img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.gc-body { min-width: 0; max-width: 82%; display: flex; flex-direction: column; align-items: flex-start; }
.gc-msg.mine .gc-body { align-items: flex-end; }
.gc-nick { font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.gc-nick .verif { font-size: 10px; color: var(--brand-2); }
.gc-bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.gc-msg.mine .gc-bubble { background: var(--brand); border-color: var(--brand); color: #fff; }
.gc-msg.mine .gc-bubble a { color: #fff; text-decoration: underline; }
.gc-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.gc-time { display: block; font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.gc-msg.mine .gc-time { text-align: right; color: rgba(255,255,255,.7); }
.gc-img { max-width: 220px; max-height: 260px; border-radius: 8px; display: block; cursor: pointer; }

/* Acceso al chat de grupo desde la bandeja */
.group-chat-link { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; color: var(--text); }
.group-chat-link:hover { text-decoration: none; border-color: var(--brand-2); }
.gcl-ico { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.gcl-text { flex: 1; display: flex; flex-direction: column; }
.gcl-text strong { font-size: 15px; }
.gcl-text small { font-size: 12px; color: var(--text-dim); }

/* Documento legal importado (términos) */
.legal-doc p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; color: var(--text); }
.legal-doc ul { padding-left: 20px; margin: 0 0 14px; }
.legal-doc li { font-size: 14px; line-height: 1.55; margin: 5px 0; }
.legal-doc strong, .legal-doc b { color: var(--text); }
.legal-doc br { line-height: 1; }

/* ============================================================
   PANEL ADMIN (rediseño con accesos grandes)
   ============================================================ */
.admin-home { padding-top: 14px; }
.admin-big-tile {
  display: flex; align-items: center; gap: 16px; color: #fff; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--c), #ff7aa0); border-radius: var(--radius); padding: 20px;
}
.admin-big-tile:hover { text-decoration: none; color: #fff; filter: brightness(1.05); }
.admin-big-tile > i:first-child { font-size: 30px; }
.admin-big-tile strong { display: block; font-size: 19px; }
.admin-big-tile span { font-size: 13px; opacity: .92; }
.admin-big-tile > div { flex: 1; }
.admin-big-arrow { opacity: .9; }

.admin-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .admin-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 10px; color: var(--text);
}
.admin-tile:hover { text-decoration: none; border-color: var(--c); }
.admin-tile-ico { position: relative; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--c); }
.admin-tile-badge { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 6px; }
.admin-tile-label { font-size: 12.5px; font-weight: 700; }

.admin-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.admin-sec-head .page-title { margin: 0; font-size: 18px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.admin-form input { flex: 1; min-width: 160px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 14px; outline: none; }
.admin-form .btn { width: auto; flex: 0 0 auto; padding: 10px 18px; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; }
.admin-chat { display: flex; flex-direction: column; gap: 6px; }
.admin-chat-msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; }
.admin-chat-msg b { color: var(--brand-2); }
.admin-chat-msg time { display: block; font-size: 10px; color: var(--text-dim); }

/* Banner modo espejo */
.impersonate-bar {
  position: fixed; bottom: 64px; left: 8px; right: 8px; z-index: 70; max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 12.5px; box-shadow: var(--shadow);
}
.impersonate-bar form { margin: 0; }
.impersonate-bar button { background: rgba(0,0,0,.25); color: #fff; border: none; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* Clasificador (galería a pantalla completa) */
.clf-wrap { padding: 10px 0 90px; }
.clf-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; }
.clf-head h1 { font-size: 18px; margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.clf-count { background: var(--surface-2); border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 13px; }
.clf-hint { font-size: 12.5px; color: var(--text-dim); padding: 0 12px 10px; }
.clf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.clf-cell { position: relative; }
.clf-item { position: relative; aspect-ratio: 3 / 4; cursor: pointer; display: block; overflow: hidden; }
.clf-item img, .clf-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clf-item input:checked ~ img, .clf-item input:checked ~ video { outline: 4px solid var(--accent); outline-offset: -4px; filter: brightness(1.08); }
.clf-mark { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; opacity: 0; transition: opacity .12s; }
.clf-item input:checked ~ .clf-mark { opacity: 1; }
.clf-eye { position: absolute; top: 6px; right: 6px; z-index: 3; width: 26px; height: 26px; border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 12px; }
/* Visor de post en el clasificador */
.clf-viewer { position: fixed; inset: 0; z-index: 1300; background: var(--bg); display: flex; flex-direction: column; }
.clf-viewer[hidden] { display: none; }
.clf-viewer-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.clf-viewer-open { color: var(--brand-2); font-weight: 600; font-size: 14px; }
.clf-viewer-close { background: none; border: 0; color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px; }
.clf-frame, #clf-frame { flex: 1; width: 100%; border: 0; }
.clf-eye:hover { background: var(--brand-2); color: #08231f; }
.clf-actions { position: fixed; bottom: 70px; left: 12px; right: 12px; max-width: 560px; margin: 0 auto; z-index: 30; }
.clf-actions .btn { width: 100%; box-shadow: var(--shadow); }

/* Badge de tareas pendientes del admin */
.menu-trigger { position: relative; }
.menu-admin-dot { position: absolute; top: -4px; right: -4px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; border-radius: 999px; padding: 2px 5px; border: 2px solid var(--bg); }
.menu-task-badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* Etiquetar personas (formulario de publicar) */
.tag-field { position: relative; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.tag-chip button { background: none; border: 0; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.tag-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.tag-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--text); }
.tag-opt:hover { background: rgba(255,255,255,.06); }
.tag-opt img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* Etiquetas mostradas en el detalle del post */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 14px 6px; color: var(--text-dim); font-size: 14px; }
.post-tags a { color: var(--brand-2); font-weight: 600; }

/* Chip "¿Quieres ser creativo?" junto al título Creativos en Explorar */
.creative-ask { display: inline; margin-left: 8px; }
.chip-magenta { display: inline-flex; align-items: center; gap: 6px; background: #c026d3; color: #fff; border: 0; border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.chip-magenta:hover { background: #a21caf; }
.creative-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.creative-head .boards-section { margin-bottom: 0; }
.creative-head .creative-ask { margin: 0; }

/* Candado de publicación privada en las tarjetas (feed/explorar/stories) */
.private-badge { display: inline-flex; align-items: center; font-size: 12px; color: var(--text-dim); margin-left: 6px; }
.private-badge i { color: var(--accent); }

/* DM: responder (cita) y reaccionar */
.msg { position: relative; }
.msg-quote { font-size: 12px; opacity: .8; border-left: 3px solid currentColor; padding: 2px 8px; margin-bottom: 5px; border-radius: 4px; background: rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; max-width: 100%; box-sizing: border-box; }
.msg-quote i { font-size: 10px; margin-right: 4px; opacity: .8; }
.msg-reaction { position: absolute; bottom: -2px; right: 8px; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 5px; font-size: 13px; line-height: 1.2; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.msg.mine .msg-reaction { right: auto; left: 8px; }
.msg-actions { position: fixed; z-index: 1400; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.msg-act-emos { display: flex; gap: 2px; }
.msg-act-emo { background: none; border: 0; font-size: 22px; cursor: pointer; padding: 4px 5px; border-radius: 8px; line-height: 1; }
.msg-act-emo:hover { background: rgba(255,255,255,.08); }
.msg-act-btns { display: flex; gap: 2px; }
.msg-act-reply, .msg-act-del { background: none; border: 0; cursor: pointer; padding: 7px 10px; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 7px; flex: 1; justify-content: center; white-space: nowrap; }
.msg-act-reply { color: var(--text); }
.msg-act-reply i { color: var(--brand-2); }
.msg-act-reply:hover { background: rgba(255,255,255,.08); }
.msg-act-del { color: #e55; }
.msg-act-del i { color: #e55; }
.msg-act-del:hover { background: rgba(229,85,85,.12); }

/* Barra "respondiendo a" sobre el composer */
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--surface); border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim); overflow: hidden;
}
.reply-bar[hidden] { display: none; }
.reply-bar > i { flex: 0 0 auto; color: var(--brand-2); }
.reply-bar-text { flex: 1 1 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar-x { flex: 0 0 auto; }
.reply-bar-x { background: none; border: 0; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.burn-bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: #ff7a18; border-top: 1px solid #e06810;
  font-size: 13px; color: #000; overflow: hidden;
}
.burn-bar[hidden] { display: none; }
.burn-bar > i { flex: 0 0 auto; }
.burn-bar > span { flex: 1 1 0; }
.burn-bar-x { flex: 0 0 auto; background: none; border: 0; color: #000; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .6; }
.burn-bar-x:hover { opacity: 1; }

/* Cambiar contraseña (editar perfil) */
.ep-change-pass { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ep-change-pass > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ep-change-pass > summary::-webkit-details-marker { display: none; }
.ep-change-pass > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: 12px; transition: transform .15s ease; }
.ep-change-pass[open] > summary::after { transform: rotate(180deg); }
.ep-change-pass-body { padding: 4px 16px 20px; }
.ep-change-pass-body .field { margin-bottom: 14px; }
.ep-change-pass-body .field > label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 5px; }
.ep-change-pass-body input[type="password"] { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; outline: none; }
.ep-change-pass-body input[type="password"]:focus { border-color: var(--brand-2); }

/* Zona peligrosa: eliminar cuenta (editar perfil) */
.ep-danger { margin-top: 28px; border: 1px solid rgba(255,59,107,.4); border-radius: var(--radius-sm); background: rgba(255,59,107,.05); }
.ep-danger > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 15px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.ep-danger > summary::-webkit-details-marker { display: none; }
.ep-danger > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: 12px; transition: transform .15s ease; }
.ep-danger[open] > summary::after { transform: rotate(180deg); }
.ep-danger-body { padding: 0 16px 16px; }
.ep-danger-body p { margin: 0 0 12px; }
.btn-danger { background: var(--accent); color: #fff; border: 0; }
.btn-danger:hover { filter: brightness(1.05); }

/* Búsqueda avanzada de perfiles */
.search-adv-link { margin: 8px 0 16px; display: inline-flex; align-items: center; gap: 8px; }
.profile-search { margin: 10px 0 18px; display: flex; flex-direction: column; gap: 14px; }
.profile-search input[type="text"],
.profile-search input[type="number"],
.profile-search select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.profile-search input:focus,
.profile-search select:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(83,210,202,.15);
}
.ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ps-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ps-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14px !important; color: var(--text) !important; align-self: center; }
.ps-check input { width: auto; accent-color: var(--accent); }
.ps-check i { color: var(--accent); }
.profile-search .btn { align-self: flex-start; }
.ps-results { margin-top: 6px; }
@media (min-width: 560px) { .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cita (responder) en el chat de grupo */
.gc-quote { font-size: 12px; opacity: .85; border-left: 3px solid var(--brand-2); padding: 2px 8px; margin-bottom: 5px; border-radius: 4px; background: rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(100%, 62vw, 340px); }
.gc-quote i { font-size: 10px; margin-right: 4px; opacity: .8; }

/* Reacciones acumuladas en el chat de grupo */
.gc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gc-reacts[hidden] { display: none; }
.gc-react { display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; font-size: 12px; line-height: 1.4; cursor: pointer; color: var(--text); }
.gc-react span { font-weight: 700; color: var(--text-dim); }
.gc-react:hover { border-color: var(--brand-2); }
.gc-msg.mine .gc-reacts { justify-content: flex-end; }

/* Tarjeta de publicación compartida (en DM y chat de grupo) */
.post-share-card { display: flex; align-items: stretch; gap: 0; width: 230px; max-width: 78vw; background: transparent; border-radius: 12px; overflow: hidden; color: var(--text); }
.post-share-card:hover { text-decoration: none; border-color: var(--brand-2); }
.post-share-card img { width: 76px; height: 76px; object-fit: cover; flex: 0 0 auto; }
.psc-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; min-width: 0; }
.psc-by { font-weight: 700; font-size: 13px; }
.psc-cap { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.psc-cta { font-size: 12px; font-weight: 600; color: var(--brand-2); margin-top: 2px; }

/* Modal compartir (detalle de post) */
.share-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.share-modal[hidden] { display: none; }
.share-sheet { background: var(--bg); width: 100%; max-width: 460px; border-radius: 16px 16px 0 0; padding: 0 16px 18px; }
.share-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); font-weight: 700; }
.share-head i { color: var(--brand-2); }
.share-x { background: none; border: 0; color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
.share-inapp { position: relative; padding: 14px 0; }
.share-inapp label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.share-inapp input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 11px 13px; font-size: 15px; outline: none; }
.share-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.share-suggest[hidden] { display: none; }
.share-sug { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--text); }
.share-sug:hover { background: rgba(255,255,255,.06); }
.share-sug img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.share-ext { display: flex; gap: 10px; }
.share-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 12px; font-size: 14px; cursor: pointer; }
.share-opt:hover { border-color: var(--brand-2); text-decoration: none; }
.share-opt .fa-whatsapp { color: #25d366; }

/* Selector de publicación propia (compartir en chat) */
.postpick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: 60vh; overflow-y: auto; padding-top: 8px; }
.postpick-item { border: 0; padding: 0; cursor: pointer; aspect-ratio: 1/1; background: var(--surface-2); overflow: hidden; border-radius: 6px; }
.postpick-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postpick-item:hover { outline: 2px solid var(--brand-2); outline-offset: -2px; }
@media (min-width: 560px) { .share-modal { align-items: center; } .share-sheet { border-radius: 16px; } }

/* Doble toque fiable: desactiva el zoom por doble toque en toda imagen de post */
[data-post-media] { touch-action: manipulation; }

/* Like (❤️) en comentarios */
.comment-like { background: none; border: 0; cursor: pointer; color: var(--text-dim); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.comment-like i { font-size: 13px; }
.comment-like.liked { color: var(--accent); }
.comment-like-count { font-weight: 600; }
.comment-del-btn { background: none; border: 0; padding: 0 2px; color: var(--text-dim); font-size: 11px; cursor: pointer; opacity: .45; transition: opacity .15s, color .15s; }
.comment-del-btn:hover { color: var(--danger); opacity: 1; }

/* Flechas para pasar diapositivas del carrusel (distintas de las de cambiar de post) */
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
.gallery-nav:hover { background: rgba(0,0,0,.78); }

/* Premium bloqueado en el feed: sin like/comentar, solo desbloquear */
.post-actions-locked { justify-content: center; }
.unlock-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px 0; background: none; border: none; cursor: pointer; font-family: inherit; }
.unlock-link:hover { text-decoration: none; }

/* Histórico de recargas (admin) */
.recarga-row { display: flex; align-items: center; gap: 10px; }
.recarga-row .rank-user { flex: 0 0 auto; }
.recarga-row .admin-row-info { flex: 1; min-width: 0; }
.recarga-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.recarga-badge.recarga-ok { background: rgba(46,204,113,.16); color: #2ecc71; }
.recarga-badge.recarga-err { background: rgba(255,59,107,.16); color: var(--accent); }
.recarga-badge.recarga-dup { background: var(--surface-2); color: var(--text-dim); }

/* Resumen de gasto de zanahorias (admin) */
.gasto-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gasto-resumen .chip { cursor: default; }
.gasto-resumen .chip i { color: var(--accent); }

.grid-badge-priv { background: rgba(0,0,0,.45); border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; text-shadow: none; }

/* Candado sobreimpreso en posts privados visibles (feed) */
.priv-corner { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; pointer-events: none; }

/* Overlay de publicación privada en el detalle (visible pero con candado) */
.lock-overlay-priv { background: rgba(0,0,0,.38); }
.lock-overlay-priv i { color: var(--accent); }

/* Modal FRIENDS! */
.friends-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; }
.friends-backdrop[hidden] { display: none; }
.friends-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 32px 28px 24px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.6); position: relative; animation: friends-in .28s ease; }
@keyframes friends-in { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.friends-close { position: absolute; top: 14px; right: 14px; background: var(--surface-2); border: 0; color: var(--text-dim); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
.friends-close:hover { color: var(--text); }
.friends-logo { max-width: 180px; height: auto; margin: 0 auto 16px; display: block; }
.friends-tagline { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0 0 22px; }
.friends-tagline strong { color: var(--text); }
.friends-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: #ff6b35; color: #fff; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 13px 24px; text-decoration: none; margin-bottom: 10px; transition: filter .15s; }
.friends-cta:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }
.friends-skip { background: none; border: 0; color: var(--text-dim); font-size: 13px; cursor: pointer; padding: 6px 12px; width: 100%; }
.friends-skip:hover { color: var(--text); }


/* ===== CHAT GRUPO – popup de usuarios conectados ===== */
.gc-users-popup { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: gc-popup-in .2s ease; }
.gc-users-popup[hidden] { display: none; }
@keyframes gc-popup-in { from { opacity: 0; } to { opacity: 1; } }
.gc-users-popup-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; width: min(360px, 92vw); max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.55); overflow: hidden; animation: gc-popup-card .2s ease; }
@keyframes gc-popup-card { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.gc-users-popup-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.gc-users-popup-head span { font-size: 15px; font-weight: 700; color: var(--text); }
.gc-users-popup-x { background: var(--surface-2); border: 0; color: var(--text-dim); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; line-height: 1; transition: background .15s, color .15s; }
.gc-users-popup-x:hover { background: var(--border); color: var(--text); }
.gc-users-list { overflow-y: auto; flex: 1; padding: 8px 0; }
.gc-user-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; transition: background .12s; }
.gc-user-row:hover { background: var(--surface-2); }
.gc-user-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gc-user-nick { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-user-nick:hover { color: var(--accent); }
.gc-user-mention { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; font-size: 12px; padding: 4px 12px; cursor: pointer; flex-shrink: 0; font-weight: 600; transition: border-color .12s, color .12s; }
.gc-user-mention:hover { color: var(--accent); border-color: var(--accent); }

/* ===== CHAT GRUPO – lightbox ===== */
.gc-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gc-lightbox[hidden] { display: none; }
.gc-lb-close { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.gc-lb-dl { position: absolute; bottom: 20px; right: 20px; background: rgba(255,255,255,.15); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: background .15s; }
.gc-lb-dl:hover { background: rgba(255,255,255,.28); color: #fff; text-decoration: none; }
.gc-lb-img { max-width: 94vw; max-height: 88vh; border-radius: 8px; object-fit: contain; }

/* ===== MENSAJES – botón eliminar en acción ===== */
.msg-act-del { color: #e55; }

/* ===== MENSAJES DIRECTOS – cabecera ===== */
.chat-head-actions { display: flex; align-items: center; gap: 8px; }
.chat-del-conv { background: none; border: 0; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.chat-del-conv:hover { color: #e55; }
.lightbox-dl { background: none; color: #fff; font-size: 22px; line-height: 1; text-decoration: none; display: flex; align-items: center; opacity: .8; }
.lightbox-dl:hover { opacity: 1; color: #fff; text-decoration: none; }

/* ===== MAPA – self / online / ahora ===== */
/* Los bordes van en ::before (z-index:3) para quedar por encima del gradient ::after (z-index:1) */
.map-online .map-tile-img::before,
.map-self .map-tile-img::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  box-shadow: inset 0 0 0 3px #22c55e; pointer-events: none;
}
@keyframes ahorapulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,.7); }
    50%       { box-shadow: 0 0 0 10px rgba(168,85,247,0); }
}
.map-ahora .map-tile-img { animation: ahorapulse 2s ease-in-out infinite; }
.map-ahora .map-tile-img::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  box-shadow: inset 0 0 0 3px #a855f7; pointer-events: none;
}
/* AHORA tiene prioridad: el ::before morado sobreescribe el verde */
.map-ahora.map-online .map-tile-img::before,
.map-ahora.map-self .map-tile-img::before {
  box-shadow: inset 0 0 0 3px #a855f7;
}
.map-ahora-dot { display: none; }
.map-ahora-btn { position: fixed; bottom: 80px; right: 16px; z-index: 100; background: var(--surface); border: 2px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: border-color .15s, color .15s, background .15s; }
.map-ahora-btn.active { border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,.12); }
.map-ahora-btn:hover:not(.active) { border-color: #a855f7; color: #a855f7; }

/* ===== Modal AHORA ===== */
.ahora-modal-backdrop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; }
.ahora-modal-backdrop[hidden] { display: none; }
.ahora-modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 32px 28px 28px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: ahora-card-in .22s ease; }
@keyframes ahora-card-in { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.ahora-modal-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(168,85,247,.15); border: 2px solid #a855f7; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 22px; color: #a855f7; animation: ahorapulse 2s ease-in-out infinite; }
.ahora-modal-title { font-size: 20px; font-weight: 800; margin: 0 0 12px; color: var(--text); }
.ahora-modal-body { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 0 0 26px; }
.ahora-modal-btns { display: flex; gap: 10px; }
.ahora-modal-btns .btn-outline { flex: 1; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 11px 0; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.ahora-modal-btns .btn-outline:hover { border-color: var(--text-dim); color: var(--text); }
.ahora-modal-btns .btn-ahora { flex: 2; background: #a855f7; border: 0; color: #fff; border-radius: 999px; padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: filter .15s; }
.ahora-modal-btns .btn-ahora:hover { filter: brightness(1.12); }

/* ===== XPLICIT PLAY – botón especial ===== */
@keyframes xplay-glow {
    0%, 100% { box-shadow: 0 0 8px 2px rgba(229,9,20,.45), 0 2px 12px rgba(0,0,0,.4); }
    50%       { box-shadow: 0 0 22px 7px rgba(255,60,30,.85), 0 2px 12px rgba(0,0,0,.4); }
}
@keyframes xplay-attention {
    0%, 60%, 100% { transform: scale(1); }
    70%  { transform: scale(1.1) rotate(-3deg); }
    80%  { transform: scale(1.07) rotate(2deg); }
    90%  { transform: scale(1.04) rotate(-1deg); }
}
.xplay-story { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; width: 66px; }
.xplay-ring { display: block; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(145deg, #ff1a1a 0%, #c0000a 60%, #8b0000 100%); position: relative; overflow: hidden; animation: xplay-glow 2s ease-in-out infinite, xplay-attention 5s ease-in-out infinite; }
.xplay-ring::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%); }
.xplay-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.xplay-tri { color: #fff; font-size: 22px; margin-left: 4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.xplay-bunny { position: absolute; bottom: 4px; right: 5px; font-size: 17px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.xplay-label { display: block; font-size: 10px; font-weight: 900; color: #ff3333; letter-spacing: .5px; text-align: center; white-space: normal; line-height: 1.15; text-shadow: 0 0 6px rgba(255,50,50,.5); }

/* ===== STORIES – fila de círculos ===== */
.story-btn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.story-btn .story-ring { border: 2px solid #a855f7; }
.story-btn.story-seen .story-ring { border-color: var(--border); opacity: .7; }

/* ===== STORIES – visor overlay ===== */
.sv-overlay { position: fixed; inset: 0; z-index: 9500; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sv-overlay[hidden] { display: none; }
/* Barra de progreso con zanahoria */
.sv-progress-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(255,255,255,.18); z-index: 20; overflow: visible; }
.sv-progress-fill { height: 100%; width: 0%; background: #f97316; position: relative; border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(249,115,22,.7); }
.sv-progress-fill::after { content: '🥕'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); pointer-events: none; }
.sv-close { position: absolute; top: 18px; right: 16px; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; z-index: 10; line-height: 1; }
.sv-author { position: absolute; top: 16px; left: 14px; display: flex; align-items: center; gap: 8px; text-decoration: none; z-index: 10; }
.sv-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.sv-author span { color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.sv-media { position: relative; width: 100%; height: 100%; }
.sv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-tap { position: absolute; top: 0; height: 100%; z-index: 5; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.sv-tap-left { left: 0; width: 30%; }
.sv-tap-center { left: 30%; width: 40%; }
.sv-tap-right { right: 0; width: 30%; }
.sv-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px max(env(safe-area-inset-bottom), 12px); display: flex; align-items: center; gap: 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); z-index: 10; }
.sv-heart-btn { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 4px; flex-shrink: 0; transition: transform .15s; }
.sv-heart-btn.liked { color: #e55; }
.sv-heart-btn.liked i { font-weight: 900; }
@keyframes sv-heart-pop { 0% { transform: scale(1); } 50% { transform: scale(1.45); } 100% { transform: scale(1); } }
.sv-heart-pop { animation: sv-heart-pop .4s ease; }
.sv-comment-form { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 8px 6px 14px; backdrop-filter: blur(6px); }
.sv-comment-form input { background: none; border: 0; color: #fff; flex: 1; font-size: 14px; outline: none; }
.sv-comment-form input::placeholder { color: rgba(255,255,255,.6); }
.sv-comment-send { background: none; border: 0; color: rgba(255,255,255,.7); font-size: 16px; cursor: pointer; padding: 2px 4px; }
.sv-comment-send:hover { color: #fff; }

/* ===== EFECTO PUBLICACIÓN PREMIUM ===== */
@-webkit-keyframes carrot-fall {
    0%   { -webkit-transform: translateY(-80px) rotate(-20deg); opacity: 1; }
    85%  { opacity: 1; }
    100% { -webkit-transform: translateY(110vh) rotate(740deg); opacity: 0; }
}
@keyframes carrot-fall {
    0%   { transform: translateY(-80px) rotate(-20deg); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(740deg); opacity: 0; }
}
.carrot-rain-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10002; pointer-events: none; overflow: hidden; }
.carrot-rain-item { position: absolute; top: 0; line-height: 1; }

@-webkit-keyframes premium-card-in {
    0%   { -webkit-transform: scale(.5) translateY(30px); opacity: 0; }
    65%  { -webkit-transform: scale(1.06) translateY(-4px); opacity: 1; }
    100% { -webkit-transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes premium-card-in {
    0%   { transform: scale(.5) translateY(30px); opacity: 0; }
    65%  { transform: scale(1.06) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.premium-pub-overlay { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.premium-pub-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 28px 24px 26px; max-width: 300px; width: 88%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); -webkit-animation: premium-card-in .35s cubic-bezier(.34,1.56,.64,1) both; animation: premium-card-in .35s cubic-bezier(.34,1.56,.64,1) both; }
.premium-pub-canvas { display: block; margin: 0 auto 20px; width: 180px; height: 180px; border-radius: 12px; image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.premium-pub-text { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin: 0; }
.premium-pub-text strong { color: var(--accent); display: block; font-size: 16px; margin-bottom: 6px; }