:root {
  --bg: #06060b;
  --panel: rgba(8, 6, 16, 0.55);
  --panel-solid: #121018;
  --panel-2: rgba(8, 6, 16, 0.62);
  --panel-3: rgba(8, 6, 16, 0.55);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #f3f1f8;
  --text-dim: #9c96b0;
  --text-dimmer: #6d6884;
  --accent-a: #7c6cf0;
  --accent-b: #4fa8f0;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(124, 108, 240, 0.16), rgba(79, 168, 240, 0.12));
  --gold: #e8b13d;
  --blue: #4fa8e8;
  --green: #35d68e;
  --red: #f0546b;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 12px 32px -10px rgba(124, 108, 240, 0.35);
  /* El navegador embebido de WhatsApp renderiza backdrop-filter de forma
     rota (paneles e íconos quedan invisibles), así que se desactiva del
     todo: los paneles ya tienen un color de fondo sólido propio. */
  --blur: none;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Paleta nueva para el rediseño de Inicio (YU Match/Surprise/Battles/Coins,
     historias, tarjetas laterales) — se suma a los tokens de arriba, no los
     reemplaza, para no afectar el resto de la app. */
  --yu-purple: #8b5cf6;
  --yu-blue: #4fa8f0;
  --yu-pink: #ec4899;
  --yu-turquoise: #22d3ee;
  --yu-gold: #f0b429;
  --gradient-yu: linear-gradient(135deg, var(--yu-purple), var(--yu-blue) 45%, var(--yu-pink) 80%, var(--yu-turquoise));
  --gradient-yu-purple: linear-gradient(135deg, #7c6cf0, #a855f7);
  --gradient-yu-blue: linear-gradient(135deg, #4fa8f0, #22d3ee);
  --gradient-yu-pink: linear-gradient(135deg, #ec4899, #f0546b);
  --gradient-yu-gold: linear-gradient(135deg, #f0b429, #e8b13d);
  --gradient-yu-green: linear-gradient(135deg, #2fd980, #1f9c58);
  --gradient-yu-violet: linear-gradient(135deg, #8b5cf6, #a78bfa);
  --glow-purple: 0 6px 22px -6px rgba(139, 92, 246, 0.55);
  --glow-blue: 0 6px 22px -6px rgba(79, 168, 240, 0.55);
  --glow-pink: 0 6px 22px -6px rgba(236, 72, 153, 0.55);
  --glow-gold: 0 6px 22px -6px rgba(240, 180, 41, 0.5);
  /* Alto real de la barra superior en celular: los 4.2rem de diseño más lo
     que tape la barra de estado del sistema (notch, cámara, etc.) — sin
     esto los botones (mensajes, buscar, crear) quedaban pegados arriba de
     todo, parcialmente debajo de la barra de estado y difíciles de tocar. */
  --mobile-topbar-h: calc(4.2rem + env(safe-area-inset-top));
}

* {
  box-sizing: border-box;
}

.mp-body {
  margin: 0;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", "Inter", system-ui, sans-serif;
  background:
    linear-gradient(180deg, rgba(6, 6, 15, 0.72), rgba(6, 6, 15, 0.85) 45%, rgba(6, 6, 15, 0.94)),
    url("img/fondo-app.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--text);
  min-height: 100vh;
  letter-spacing: 0.005em;
}

@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mp-layout {
  display: flex;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.mp-sidebar {
  width: 224px;
  flex-shrink: 0;
  /* Blanco sólido (pedido explícito) -- mismo color que ya usa este menú
     en escritorio (ver .mp-sidebar en css/dashboard-exact.css), ahora
     también en celular en vez del fondo oscuro que tenía. El texto no
     necesita ajuste aparte: var(--text)/var(--text-dim)/var(--border) ya
     los redefine global-light-theme.css para toda la app. El overlay
     (.mp-sidebar-backdrop) sigue encargándose de oscurecer el resto de la
     pantalla por separado. */
  background: #ffffff;
  border-right: 1px solid var(--border);
  padding: 1.5rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 0.5rem;
}

.mp-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(124, 108, 240, 0.6);
}

/* Nombre de la marca con el mismo degradado violeta-a-azul del logo. */
.mp-brand-text,
.mp-mobile-topbar-brand {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.mp-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  position: relative;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.mp-nav-item svg {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease);
}

.mp-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.mp-nav-item.active {
  background: var(--gradient-soft);
  border-color: rgba(124, 108, 240, 0.35);
  color: var(--text);
}

.mp-nav-item.active::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--gradient);
}

.mp-nav-item.active svg {
  opacity: 1;
  color: var(--accent-a);
}

.mp-nav-item.disabled {
  opacity: 0.35;
  cursor: default;
}

.mp-nav-item.disabled:hover {
  background: none;
  color: var(--text-dim);
}

.mp-nav-install {
  width: 100%;
  background: var(--gradient-soft);
  border-color: rgba(124, 108, 240, 0.35);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 0.3rem;
}

.mp-nav-install svg {
  opacity: 1;
  color: var(--accent-a);
}

.mp-nav-install.hidden {
  display: none;
}

.mp-nav-badge {
  margin-left: auto;
  background: var(--red);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
}

.mp-premium-box {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.mp-premium-box h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.mp-premium-box p {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.45;
}

.mp-premium-box .mp-diamond {
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.mp-logout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background 0.18s var(--ease);
}

/* El ícono queda rojo suave siempre (no solo al tocar), para que "cerrar
   sesión" se distinga de un vistazo del resto de las opciones — el texto
   se queda con el color normal, no todo el renglón en rojo. */
.mp-logout svg {
  color: rgba(240, 84, 107, 0.85);
  flex-shrink: 0;
}

.mp-logout:hover {
  background: rgba(240, 84, 107, 0.1);
}

/* ===== Buttons (shared design system) ===== */
.mp-btn-gradient,
.mp-btn-green,
.mp-btn-white,
.mp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.05rem;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), filter 0.16s var(--ease), background 0.16s var(--ease);
  white-space: nowrap;
}

.mp-btn-gradient:hover,
.mp-btn-green:hover,
.mp-btn-white:hover,
.mp-btn-outline:hover {
  transform: translateY(-1px);
}

.mp-btn-gradient:active,
.mp-btn-green:active,
.mp-btn-white:active,
.mp-btn-outline:active {
  transform: translateY(0);
}

.mp-btn-gradient {
  width: 100%;
  background: var(--gradient);
  color: white;
  box-shadow: 0 6px 18px -6px rgba(124, 108, 240, 0.55);
}

.mp-btn-gradient:hover {
  box-shadow: 0 8px 22px -6px rgba(124, 108, 240, 0.7);
}

.mp-btn-green {
  background: rgba(53, 214, 142, 0.14);
  color: var(--green);
  border-color: rgba(53, 214, 142, 0.3);
}

.mp-btn-green:hover {
  background: rgba(53, 214, 142, 0.22);
}

.mp-btn-white {
  background: rgba(255, 255, 255, 0.92);
  color: #3d2e73;
}

.mp-btn-white:hover {
  background: white;
}

.mp-btn-outline {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

.mp-btn-outline:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--border-strong);
}

/* ===== Main ===== */
.mp-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem 3rem;
  max-width: 1100px;
}

.mp-card {
  background: var(--panel);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

#profileView,
#videochatView {
  animation: mpFadeIn 0.45s var(--ease);
}

/* Profile header: portada + avatar centrado superpuesto, estilo tarjeta de
   perfil de red social (foto de portada, avatar, nombre, bio, stats). */
.mp-profile-header {
  position: relative;
  padding: 0 0 0.6rem;
  margin-bottom: 1.1rem;
  overflow: hidden;
}

.mp-profile-cover {
  /* La imagen es 1536x1024 (3:2) — un alto fijo mucho más chato que esa
     proporción hacía que "cover" recortara casi toda la foto para llenar el
     rectángulo (solo se veía una franja del medio). Con aspect-ratio igual
     al de la imagen, entra completa sin recortar ni dejar espacios vacíos. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 20rem;
  background: var(--gradient);
  background-image: url('img/profile-cover-universo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mp-cover-edit-btn {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-cover-edit-btn:hover {
  background: rgba(0, 0, 0, 0.72);
}

.mp-profile-online-btn {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
}

.mp-profile-header-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.4rem;
  margin-top: -2.6rem;
}

.mp-profile-header-body h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.6rem 0 0;
  letter-spacing: -0.01em;
}

.mp-profile-bio {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 26rem;
}

.mp-profile-bio.hidden {
  display: none;
}

.mp-profile-stats {
  display: flex;
  padding: 0.9rem 0.5rem 0.3rem;
}

.mp-profile-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.mp-profile-stat strong {
  font-size: 1.15rem;
  color: var(--text);
}

.mp-profile-stat span {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.mp-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin: 0 auto;
}

.mp-avatar {
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--gradient);
  padding: 3px;
  box-shadow: 0 8px 24px -8px rgba(124, 108, 240, 0.55);
}

.mp-avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gradient);
  border: 2px solid var(--panel-solid);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-avatar-edit-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mp-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.mp-avatar-initials {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 0;
  border: none;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  color: white;
}

.mp-online-dot {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--panel-solid);
  box-shadow: 0 0 0 1px rgba(53, 214, 142, 0.4);
}

.mp-profile-id {
  color: var(--text-dim);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.mp-level-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
}

.mp-level-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--panel-3);
  border: 1px solid var(--border);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #cfc2fb;
  white-space: nowrap;
}

.mp-xp-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
}

.mp-xp-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 999px;
}

.mp-xp-label {
  font-size: 0.74rem;
  color: var(--text-dimmer);
  white-space: nowrap;
}

.mp-online-label {
  margin-top: 0.55rem;
  font-size: 0.76rem;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.mp-online-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(53, 214, 142, 0.18);
}

/* Stat chips */
.mp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.mp-stat-chip {
  padding: 0.95rem 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

.mp-stat-chip:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.mp-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-stat-icon.gold { background: rgba(232, 177, 61, 0.14); color: var(--gold); }
.mp-stat-icon.blue { background: rgba(79, 168, 232, 0.14); color: var(--blue); }
.mp-stat-icon.green { background: rgba(53, 214, 142, 0.14); color: var(--green); }
.mp-stat-icon.red { background: rgba(240, 84, 107, 0.14); color: var(--red); }

.mp-stat-label {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}

.mp-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp-stat-chip svg.chevron {
  margin-left: auto;
  color: var(--text-dimmer);
}

.mp-welcome-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 177, 61, 0.16), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.22), transparent 55%),
    linear-gradient(160deg, #15111f 0%, #0c0a14 100%);
  border: 1px solid rgba(232, 177, 61, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mp-welcome-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(232, 177, 61, 0.4);
}

.mp-welcome-avatar img.mp-avatar-round {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-welcome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-welcome-text {
  flex: 1;
  min-width: 0;
}

.mp-welcome-text strong {
  display: block;
  font-size: 1.02rem;
}

.mp-welcome-text p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.mp-welcome-sparkle {
  flex-shrink: 0;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(232, 177, 61, 0.5));
}

/* Balance row */
.mp-balance-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.mp-balance-card {
  padding: 1.4rem 1.5rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 79, 151, 0.35), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(124, 108, 240, 0.4), transparent 55%),
    rgba(255, 255, 255, 0.045);
  position: relative;
  overflow: hidden;
}

.mp-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 0.85rem;
}

.mp-balance-amount {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.45rem 0 0.15rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.mp-balance-amount .mp-currency {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.mp-balance-sub {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 1.05rem;
}

.mp-balance-card-gold {
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 177, 61, 0.4), transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(201, 138, 31, 0.3), transparent 55%),
    linear-gradient(160deg, #241a08 0%, #140f06 70%);
  border: 1px solid rgba(232, 177, 61, 0.3);
}

.mp-balance-card-gold .mp-balance-top {
  color: rgba(255, 244, 214, 0.85);
}

.mp-balance-card-gold .mp-balance-amount {
  background: linear-gradient(135deg, #fff2cf 0%, var(--gold) 60%, #c98a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-balance-card-gold .mp-balance-amount .mp-currency {
  -webkit-text-fill-color: rgba(255, 244, 214, 0.75);
  color: rgba(255, 244, 214, 0.75);
}

.mp-balance-card-gold .mp-balance-sub {
  color: rgba(255, 244, 214, 0.6);
}

.mp-balance-gold-coin {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 96px;
  height: 96px;
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

.mp-btn-gold-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, var(--gold) 0%, #c98a1f 100%);
  color: #1a1206;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(232, 177, 61, 0.55);
  transition: transform 0.16s var(--ease);
}

.mp-btn-gold-pill:hover {
  transform: translateY(-1px);
}

.mp-side-list {
  display: flex;
  flex-direction: column;
}

.mp-side-list-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 0.16s var(--ease);
}

.mp-side-list-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.mp-side-list-item:last-child {
  border-bottom: none;
}

.mp-side-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-side-icon.purple { background: rgba(124, 108, 240, 0.16); color: #cfc2fb; }
.mp-side-icon.green { background: rgba(53, 214, 142, 0.16); color: var(--green); }
.mp-side-icon.red { background: rgba(240, 84, 107, 0.16); color: var(--red); }

.mp-side-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.mp-side-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-side-list-item .mp-nav-badge {
  margin-left: auto;
}

.mp-side-list-item svg.chevron {
  margin-left: auto;
  color: var(--text-dimmer);
}

/* Two column panels */
.mp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.mp-panel {
  padding: 1.2rem 1.3rem;
}

/* ===== Mensajería (rediseño premium: dos paneles, glassmorphism) ===== */

/* Blur local para esta pantalla: --blur está desactivado globalmente
   (rendimiento en el resto de la app), pero acá el usuario pidió cristal
   translúcido explícitamente, así que se aplica directo sin tocar la
   variable compartida. */
.mp-messages-view {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  height: calc(100vh - 1.75rem - 3rem);
  height: calc(100dvh - 1.75rem - 3rem);
}

/* En PC, la sección de mensajes usa toda la pantalla disponible: el padding
   y el max-width de .mp-main (pensados para el feed/perfil) sobraban acá y
   dejaban franjas vacías arriba, abajo y a los costados del chat. Solo en
   desktop: en mobile .mp-conv-panel/.mp-chat-panel-container ya tienen su
   propio layout de pantalla completa más abajo. */
@media (min-width: 860px) {
  body:has(#messagesView:not(.hidden)) .mp-main {
    padding: 0;
    max-width: none;
  }

  /* Descuenta la barra superior de escritorio (sticky, ~4rem con logo +
     buscador), que sigue arriba de .mp-main y no se puede tapar. */
  body:has(#messagesView:not(.hidden)) .mp-messages-view {
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
  }

  body:has(#messagesView:not(.hidden)) .mp-conv-panel,
  body:has(#messagesView:not(.hidden)) .mp-chat-panel-container {
    border-radius: 0;
  }

  body:has(#messagesView:not(.hidden)) .mp-conv-panel {
    border-top: none;
    border-bottom: none;
    border-left: none;
  }

  body:has(#messagesView:not(.hidden)) .mp-chat-panel-container {
    border-top: none;
    border-bottom: none;
    border-right: none;
  }
}

/* Panel izquierdo: lista de conversaciones (30%) — tema claro/colorido
   pedido explícito por el dueño para la lista de chats ("el diseño que
   deseo que quede por defecto"), independiente del resto de la app que
   sigue oscura. Redefinir acá los mismos tokens que ya usan las reglas de
   abajo (--panel-solid, --text, --border, etc.) hace que todo ese CSS ya
   existente se reskinee solo, sin tener que tocar cada regla una por una. */
.mp-conv-panel {
  --panel: rgba(255, 255, 255, 0.7);
  --panel-solid: #f7f6fc;
  --panel-2: #ffffff;
  --panel-3: #ede9f7;
  --border: rgba(124, 108, 240, 0.14);
  --border-strong: rgba(124, 108, 240, 0.22);
  --text: #1c1730;
  --text-dim: #6f6a85;
  --text-dimmer: #928da5;
  --shadow-card: 0 10px 30px -14px rgba(124, 108, 240, 0.28);
  /* Pedido explícito con una captura de referencia -- degradado lavanda/
     celeste pastel, fijo (no depende de "Diseños de chat", que sigue
     existiendo para quien lo use, pero ya no cambia este fondo). */
  --conv-accent-a: #7c6cf0;
  --conv-accent-b: #5b8def;
  --conv-gradient: linear-gradient(135deg, var(--conv-accent-a) 0%, var(--conv-accent-b) 100%);

  width: 32%;
  min-width: 280px;
  max-width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Pedido explícito: dio marcha atrás al degradado lila/celeste -- mejor
     blanco, simple, igual al resto de la app. */
  background: #ffffff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* BUG REAL encontrado (reportado como "mocho"/no deja bajar): #chatsListPanel
   envuelve el buscador + pastillas + la lista, pero nunca tuvo su propio
   layout — sin display:flex/flex:1/min-height:0 acá, la cadena que hace
   que #friendsList (.mp-conversation-list, flex:1 + overflow-y:auto) se
   ajuste al espacio disponible se corta en este div intermedio: la lista
   terminaba creciendo a su alto natural completo en vez de quedar acotada
   y con scroll propio, y .mp-conv-panel (overflow:hidden) recortaba todo
   lo que sobraba sin ninguna forma de alcanzarlo. */
#chatsListPanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.mp-conv-panel-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.1rem 0.7rem;
  flex-shrink: 0;
}

/* Ícono cuadrado con degradado, pedido explícito con una captura de
   referencia (una burbuja de chat en un cuadrado redondeado). */
.mp-conv-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: var(--conv-gradient);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(124, 108, 240, 0.55);
}

.mp-conv-header-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-conv-subtitle {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mp-conv-header-icon-btn {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: rgba(124, 108, 240, 0.1);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-conv-header-icon-btn:hover {
  background: rgba(124, 108, 240, 0.18);
}

.mp-conv-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
  font-size: 0.68rem;
  font-weight: 700;
}

.mp-conv-filter-pill:not(.active) .mp-conv-pill-badge {
  background: var(--conv-gradient);
  color: white;
}

.mp-conv-logo {
  height: 34px;
  width: auto;
  mix-blend-mode: screen;
}

.mp-conv-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1.1rem 0.8rem;
  padding: 0.55rem 0.6rem 0.55rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  color: var(--text-dim);
  flex-shrink: 0;
}

.mp-conv-search svg {
  flex-shrink: 0;
}

.mp-conv-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}

.mp-conv-search input:focus {
  outline: none;
}

/* "+" de filtros extra (No leídos/Favoritos) -- pedido explícito, en la
   referencia van acá y no como pestaña arriba. */
.mp-conv-more-filters-wrap {
  position: relative;
  flex-shrink: 0;
}

.mp-conv-search-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: none;
  background: rgba(124, 108, 240, 0.14);
  color: var(--text-dim);
  cursor: pointer;
}

.mp-conv-more-filters-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
}

.mp-conv-more-filter-opt {
  background: none;
  border: none;
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.mp-conv-more-filter-opt:hover {
  background: rgba(124, 108, 240, 0.1);
}

.mp-conv-panel-note {
  margin: 0 1.1rem 0.7rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.mp-conv-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}

.mp-conv-archived-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.1rem 0.6rem;
  flex-shrink: 0;
}

.mp-conv-archived-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

/* Mismo bug que #chatsListPanel (ver el comentario largo junto a
   .mp-conv-panel): sin esto, la lista de llamadas también crecía a su
   alto natural completo y quedaba cortada sin poder bajar a verla. */
.mp-calls-list-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.mp-calls-list-panel.hidden {
  display: none;
}

.mp-call-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.mp-call-card:hover {
  background: rgba(79, 168, 240, 0.1);
}

.mp-call-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-call-card-info strong {
  font-size: 0.92rem;
}

.mp-call-card-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mp-call-card-meta svg {
  flex-shrink: 0;
}

.mp-call-card-meta.missed {
  color: #f26d6d;
}

.mp-call-card-mode {
  color: var(--text-dim);
  flex-shrink: 0;
}

.mp-conv-filter-pills {
  display: flex;
  gap: 0.4rem;
  padding: 0 1.1rem 0.7rem;
  overflow-x: auto;
  flex-shrink: 0;
}

.mp-conv-filter-pills::-webkit-scrollbar {
  display: none;
}

/* La causa real de "se pone grande" era otra (button:hover genérico
   ganándole a cualquier botón al tocarlo -- ver style.css), ya
   corregida ahí. El width fijo que se había probado acá (132px) ya no
   hace falta y encima se veía como una cápsula inflada (puntas muy
   redondeadas sobre un botón más ancho de lo necesario) -- vuelve a
   medir según su propio contenido, como el resto de los chips/pills de
   la app. */
.mp-conv-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  /* Altura fija explícita (pedido explícito con captura: "Personas" se
     veía más ALTA que "Todos"/"Grupos" en el celular real, no solo más
     ancha -- eso no debería pasar con el mismo padding/tamaño de letra
     para los 3, y no se reproduce probando en Chrome de escritorio, así
     que puede depender de cómo ese celular puntual mide la línea de
     texto. Con height + line-height fijos ya no depende de ese cálculo:
     miden lo mismo de alto pase lo que pase. */
  height: 32px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0 0.9rem;
  /* Vuelve a la cápsula redonda de siempre (var(--radius-pill)): el
     problema nunca fue esta forma -- era el button:hover genérico
     ganándole al color propio de cualquier botón al tocarlo (ver
     style.css, ya corregido), que hacía que CUALQUIER forma se sintiera
     "grande". Con eso resuelto, esta vuelve a ser la forma de siempre. */
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-conv-filter-pill svg {
  flex-shrink: 0;
}

/* Antes era un relleno sólido con letra blanca -- pedido explícito: se
   sentía "como que se agranda" al tocarlo (el contraste fuerte contra los
   demás, en contorno gris, lo hacía ver mucho más grande aunque medía lo
   mismo). Ahora un tinte suave, mismo tamaño, solo cambia de color. */
.mp-conv-filter-pill.active {
  background: rgba(124, 108, 240, 0.14);
  border-color: rgba(124, 108, 240, 0.4);
  color: var(--conv-accent-b);
}

/* Pedido explícito, otra vuelta sobre el mismo bug ("Personas se agranda
   exagerado un instante y después vuelve a su tamaño normal" al
   seleccionarlo): ya se descartaron contraste/color (2b6aa89), ancho
   (dc3836f/9279803 -- unequal width entre labels es esperado, no es
   esto) y alto por motor de fuente (b474d64). Ninguna regla de ESTE
   archivo anima transform/tamaño en .mp-conv-filter-pill, pero
   button:hover/:active con transform:scale() + transition puede venir de
   otro lado (extensión, WebView del celular, algo que se agregue
   después) y le gana a estas reglas por especificidad si no se fija acá
   explícitamente. Se ancla transform a "none" y la transition SOLO a
   color/fondo/borde en todos los estados posibles -- así ningún hover,
   :active al presionar, foco o cambio de .active puede mover ancho/alto,
   sin importar qué transform le llegue de afuera. Nada de esto reduce
   una duración: elimina la propiedad que podría animarse. */
.mp-conv-filter-pill,
.mp-conv-filter-pill:hover,
.mp-conv-filter-pill:active,
.mp-conv-filter-pill:focus,
.mp-conv-filter-pill:focus-visible,
.mp-conv-filter-pill.active,
.mp-conv-filter-pill.active:hover,
.mp-conv-filter-pill.active:active {
  transform: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  animation: none !important;
}

.mp-conv-archived-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 1.1rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-conv-archived-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  flex-shrink: 0;
}

.mp-conv-archived-icon svg {
  flex-shrink: 0;
}

.mp-conv-archived-label {
  flex: 1;
  text-align: left;
}

.mp-conv-archived-count {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.78rem;
}

/* Pull-to-refresh de la lista de conversaciones: altura 0 por defecto (no
   ocupa espacio ni se ve); el JS le va creciendo la altura al ritmo del
   dedo, lo que empuja la lista hacia abajo de forma natural (el panel es un
   flex-column) sin tocar el scroll ni el transform de la lista misma. */
.mp-pull-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--text-dim);
}

.mp-pull-refresh-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent-a);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.mp-pull-refresh.pulling .mp-pull-refresh-spinner,
.mp-pull-refresh.refreshing .mp-pull-refresh-spinner {
  opacity: 1;
}

.mp-pull-refresh.refreshing .mp-pull-refresh-spinner {
  animation: mpPullSpin 0.7s linear infinite;
}

@keyframes mpPullSpin {
  to { transform: rotate(360deg); }
}

/* Panel derecho: conversación abierta / estado vacío (70%) */
.mp-chat-panel-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.mp-messages-topbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mp-online-row-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.mp-online-avatars-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mp-online-avatar-item {
  flex-shrink: 0;
  margin-left: -10px;
  position: relative;
  border-radius: 50%;
  border: 2px solid var(--panel-solid);
  cursor: pointer;
  transition: transform 0.16s var(--ease);
}

.mp-online-avatar-item:first-child {
  margin-left: 0;
}

.mp-online-avatar-item:hover {
  transform: translateY(-3px);
  z-index: 1;
}

.mp-online-avatar-item .mp-friend-online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--panel-solid);
}

.mp-online-avatar-more {
  flex-shrink: 0;
  margin-left: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--panel-solid);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.mp-messages-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.mp-topbar-icon-plain {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.mp-topbar-icon-plain:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.mp-messages-topbar .mp-topbar-icon {
  width: 38px;
  height: 38px;
}

.mp-messages-topbar .mp-topbar-icon svg {
  width: 17px;
  height: 17px;
}

.mp-messages-topbar .mp-chat-call-btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text-dim);
}

/* Estado vacío: ninguna conversación seleccionada */
.mp-chat-empty-state {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2rem;
  color: var(--text-dim);
}

.mp-chat-empty-state svg {
  opacity: 0.35;
  margin-bottom: 0.4rem;
}

.mp-chat-empty-state h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
}

.mp-chat-empty-state p {
  margin: 0 0 0.6rem;
  max-width: 320px;
  font-size: 0.85rem;
}

.mp-chat-empty-state .mp-btn-gradient {
  width: auto;
  padding: 0.6rem 1.4rem;
}

@media (max-width: 859px) {
  .mp-messages-view {
    gap: 0;
  }

  .mp-conv-panel {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-lg);
  }

  .mp-chat-panel-container {
    display: none;
  }

  .mp-messages-view.mp-chat-open .mp-conv-panel {
    display: none;
  }

  .mp-messages-view.mp-chat-open .mp-chat-panel-container {
    display: flex;
    width: 100%;
  }
}

.mp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  gap: 0.75rem;
}

.mp-panel-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.mp-select {
  background: var(--panel-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.76rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
}

.mp-activity-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
}

.mp-activity-item .mp-side-icon {
  width: 28px;
  height: 28px;
}

.mp-activity-label {
  font-size: 0.83rem;
  flex: 1;
  color: var(--text-dim);
}

.mp-activity-value {
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.mp-activity-value.green { color: var(--green); }

.mp-rank-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.mp-rank-label {
  font-size: 0.76rem;
  color: var(--text-dim);
}

.mp-rank-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.mp-goal-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
}

.mp-goal-title {
  font-size: 0.83rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.mp-goal-sub {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-bottom: 0.7rem;
}

.mp-goal-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.mp-goal-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 999px;
}

.mp-goal-foot {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* Achievements */
.mp-achievements {
  margin-bottom: 1.1rem;
  padding: 1.2rem 1.3rem;
}

.mp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.95rem;
}

.mp-section-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.mp-section-head a {
  color: #cfc2fb;
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: 600;
}

.mp-achv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.mp-achv-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

.mp-achv-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.mp-achv-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.6rem;
}

.mp-achv-icon.gold { background: rgba(232, 177, 61, 0.16); color: var(--gold); }
.mp-achv-icon.orange { background: rgba(233, 130, 61, 0.16); color: #e9823d; }
.mp-achv-icon.blue { background: rgba(79, 168, 232, 0.16); color: var(--blue); }
.mp-achv-icon.cyan { background: rgba(56, 200, 200, 0.16); color: #38c8c8; }

.mp-achv-title {
  font-size: 0.83rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.mp-achv-sub {
  font-size: 0.71rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* Quick access */
.mp-quick {
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.1rem;
}

.mp-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.mp-quick-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.85rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 600;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease);
}

.mp-quick-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.mp-quick-item svg {
  flex-shrink: 0;
  color: #cfc2fb;
}

/* Bottom banner */
.mp-banner {
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}

.mp-banner h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.mp-banner p {
  margin: 0 0 1rem;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.88);
}

.mp-banner-gift {
  font-size: 3rem;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ===== Pantalla de autenticación (glass) ===== */
.auth-section {
  max-width: 400px;
  margin: 8vh auto;
  padding: 2rem 1.9rem;
  background: rgba(8, 6, 16, 0.6);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text);
  animation: mpFadeIn 0.5s var(--ease);
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(124, 108, 240, 0.20), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(233, 79, 151, 0.14), transparent 40%),
    radial-gradient(circle at 50% 110%, rgba(79, 168, 232, 0.10), transparent 45%),
    var(--bg) !important;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", "Inter", system-ui, sans-serif !important;
}

.mp-brand-center {
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.auth-tabs {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  gap: 0.25rem;
}

.auth-tabs .tab-btn {
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  padding: 0.55rem 0.5rem;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.auth-tabs .tab-btn.tab-active {
  background: var(--gradient);
  color: white;
  box-shadow: 0 4px 14px -4px rgba(124, 108, 240, 0.55);
}

.auth-form input,
.auth-form select,
.inline-form input {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  /* 16px mínimo: por debajo de eso, Safari/Chrome en celular hacen zoom
     automático al enfocar el campo. */
  font-size: 16px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.auth-form input:focus,
.auth-form select:focus,
.inline-form input:focus {
  outline: none;
  border-color: var(--accent-a);
  background: rgba(255, 255, 255, 0.06);
}

.auth-form button[type="submit"] {
  border-radius: var(--radius-pill);
  background: var(--gradient);
  border: none;
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 6px 18px -6px rgba(124, 108, 240, 0.55);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.auth-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(124, 108, 240, 0.7);
}

.field-label {
  color: var(--text-dim);
}

.mp-password-field {
  position: relative;
  display: flex;
}

.mp-password-field input {
  width: 100%;
  padding-right: 2.6rem;
}

.mp-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.3rem;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-password-toggle:hover {
  color: var(--text);
}

.mp-forgot-link {
  display: block;
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: none;
  margin-top: -0.4rem;
}

.mp-forgot-link:hover {
  color: #cfc2fb;
  text-decoration: underline;
}

/* ===== Modales (edad / términos) ===== */
.modal-overlay {
  background: rgba(4, 4, 8, 0.75);
}

.modal-box {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text);
  animation: mpFadeIn 0.4s var(--ease);
}

.modal-box button {
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 0.16s var(--ease);
}

.modal-box button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.modal-box button:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dimmer);
}

.checkbox-row a {
  color: #cfc2fb;
}

.checkbox-row input,
.auth-form input[type="checkbox"] {
  accent-color: var(--accent-a);
  width: 16px;
  height: 16px;
}

/* ===== Video chat: pantalla completa estilo llamada ===== */
.plain-list button,
#hangupPaidHostBtn,
#sendTipBtn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.plain-list button:hover,
#hangupPaidHostBtn:hover,
#sendTipBtn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.09);
}

#hangupPaidHostBtn, #hangupPaidBtn { color: var(--red); }

#videochatView {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: #050507;
  color: #fff;
  flex-direction: column;
  animation: mpFadeIn 0.3s var(--ease);
}

#videochatView:not(.hidden) {
  display: flex;
}

/* Mismo bug real que ya pasó con #vcEffectsModal/#vcGiftModal (ver abajo):
   estos modales viven en el DOM ANTES que #videochatView/.mp-live-full (no
   son hijos suyos), así que su z-index de .modal-overlay (2100) queda por
   DEBAJO del 2200 de esas pantallas -- se "abrían" pero invisibles y sin
   poder tocarlos. Se les sube el z-index a mano de una, para las de en vivo
   no hay que esperar a que se rompan primero. */
#vcEffectsModal,
#vcGiftModal,
#endLiveConfirmModal,
#liveGiftModal,
#liveEffectsModal,
#liveEndSummaryModal,
#liveManageModal,
#liveBeautyModal,
#liveProductsModal,
#liveProductDetailModal {
  z-index: 2300;
}

.mp-vc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1rem 0.6rem;
  flex-shrink: 0;
}

.mp-vc-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

/* Mismo problema que .mp-chat-back-btn: el botón no se comprime, pero sin
   esto el SVG de adentro sí (queda en 2px de ancho reales en vez de los
   ~20px del ícono) cuando este botón vive dentro de una fila que también
   es flex, como en el encabezado de Configuración/Tienda/video chat. */
.mp-vc-icon-btn svg {
  flex-shrink: 0;
}

.mp-vc-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mp-vc-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.mp-vc-topbar-mid {
  text-align: center;
  min-width: 0;
}

.mp-vc-topbar-mid h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-vc-timer {
  margin: 0.15rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.mp-vc-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(53, 214, 142, 0.6);
  animation: mpVcDotPulse 2s infinite;
}

@keyframes mpVcDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 214, 142, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(53, 214, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 214, 142, 0); }
}

.mp-vc-status {
  text-align: center;
  margin: 0;
  padding: 0 1rem;
  min-height: 0;
  flex-shrink: 0;
}

/* Antes este texto de estado era siempre del mismo color discreto — con
   esto se nota de un vistazo si la llamada está conectada, todavía
   conectando, o hubo un problema (ver setStatus() en client.js). */
.mp-vc-status-connecting { color: var(--gold); font-weight: 700; }
.mp-vc-status-connected { color: var(--green); font-weight: 700; }
.mp-vc-status-error { color: var(--red); font-weight: 700; }

#videochatView .mp-vc-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: block;
  padding: 0;
  grid-template-columns: none;
}

.mp-vc-remote-wrap {
  position: absolute;
  inset: 0;
}

.mp-vc-remote-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c0c12;
}

.mp-vc-pip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}

.mp-vc-pip-card {
  position: relative; /* para .mp-vc-gift-face-overlay (beso/corona/corazón) */
  width: 108px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-card);
  background: #0c0c12;
}

/* Beso/corona/corazón (pedido explícito): dibuja arriba de remoteVideo
   (quien manda el regalo) o localVideo (quien lo recibe) -- ver
   playFaceGiftEffect en client.js. */
.mp-vc-gift-face-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.mp-vc-pip-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-vc-pip-card video.mirrored {
  transform: scaleX(-1);
}

.mp-vc-pip-flip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: #fff;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
}

.mp-vc-pip-flip svg {
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.mp-vc-pip-flip:hover svg {
  background: rgba(0, 0, 0, 0.75);
}

.mp-vc-wave-badge {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  background: rgba(6, 6, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 2;
  transition: opacity 0.35s var(--ease);
}

.mp-vc-wave-badge.hidden {
  opacity: 0;
  pointer-events: none;
  display: block;
}

/* Efectos/Regalo/Dado: debajo de la miniatura de mi cámara, mismo lado
   (right:1rem) que .mp-vc-pip -- el offset de arriba es a ojo, como el resto
   de esta pantalla (ver .mp-vc-pip/.mp-vc-wave-badge), pensado para que
   nunca choque con la miniatura ni con el botón de voltear cámara debajo. */
.mp-vc-fun-actions {
  position: absolute;
  top: 210px;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 2;
}

.mp-vc-fun-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: rgba(6, 6, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
}

.mp-vc-fun-btn span {
  font-size: 0.6rem;
  line-height: 1;
}

.mp-vc-fun-btn:disabled {
  opacity: 0.35;
}

.mp-vc-fun-btn:not(:disabled):active {
  transform: scale(0.94);
}

.mp-vc-sticky-gifts {
  position: absolute;
  bottom: 5.5rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 2;
  pointer-events: none;
}

.mp-vc-sticky-gift {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(6, 6, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  font-size: 1.1rem;
  animation: vcGiftPop 0.35s var(--ease);
}

.mp-vc-sticky-gift span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

@keyframes vcGiftPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.mp-vc-gift-banner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  background: rgba(6, 6, 11, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  animation: vcGiftPop 0.4s var(--ease);
}

.mp-vc-gift-banner.hidden { display: none; }

.mp-vc-dice-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}

.mp-vc-dice-overlay.hidden { display: none; }

.mp-vc-dice-cube {
  font-size: 4rem;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
  animation: vcDiceRoll 0.6s ease-in-out infinite;
}

@keyframes vcDiceRoll {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50% { transform: rotate(14deg) scale(1.08); }
}

.mp-vc-dice-cube.settled {
  animation: none;
  transform: none;
}

.mp-vc-dice-result {
  background: rgba(6, 6, 11, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 0.7rem 1.2rem;
  font-size: 1.15rem;
  color: #fff;
}

.mp-vc-dice-result.hidden { display: none; }

/* Regalo "Luna" (pedido explícito): cambia el color del video unos segundos
   -- ver VC_GIFT_EFFECTS.luna en client.js, que agrega/saca esta clase sola. */
#videochatView.vc-luna-effect .mp-vc-remote-wrap video,
#videochatView.vc-luna-effect .mp-vc-pip-card video {
  filter: hue-rotate(150deg) saturate(1.4) brightness(1.05);
  transition: filter 0.4s var(--ease);
}

/* Regalo "Gas" (pedido explícito), mismo mecanismo que Luna pero con un
   tinte verdoso/gris en vez de azulado. */
#videochatView.vc-gas-effect .mp-vc-remote-wrap video,
#videochatView.vc-gas-effect .mp-vc-pip-card video {
  filter: hue-rotate(70deg) saturate(0.6) brightness(0.9) contrast(1.1);
  transition: filter 0.4s var(--ease);
}

.mp-vc-effects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin: 0.8rem 0;
}

.mp-vc-effect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: var(--panel-3);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.4rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.mp-vc-effect-card .mp-vc-effect-icon {
  font-size: 1.7rem;
}

.mp-vc-effect-card.active {
  border-color: var(--accent-b);
  background: var(--gradient-soft);
}

.mp-vc-effect-card.locked {
  opacity: 0.55;
}

.mp-vc-effect-card .mp-vc-effect-soon {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mp-vc-gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin: 0.8rem 0;
}

.mp-vc-gift-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.4rem;
  color: var(--text);
}

.mp-vc-gift-card .mp-vc-gift-icon {
  font-size: 1.9rem;
}

.mp-vc-gift-card .mp-vc-gift-name {
  font-size: 0.78rem;
  font-weight: 700;
}

.mp-vc-gift-card .mp-vc-gift-price {
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
}

.mp-vc-gift-card:disabled,
.mp-vc-gift-card.locked {
  opacity: 0.5;
}

.mp-vc-gift-card .mp-vc-gift-soon {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
}

.mp-vc-messages.hidden,
.mp-vc-message-bar.hidden,
.mp-vc-more-menu.hidden {
  display: none;
}

.mp-vc-messages {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  max-height: 32%;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 2;
}

.mp-vc-message-bubble {
  align-self: flex-start;
  max-width: 80%;
  background: rgba(6, 6, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  word-break: break-word;
}

.mp-vc-message-bubble.mine {
  align-self: flex-end;
  background: var(--gradient);
  border-color: transparent;
}

.mp-vc-controls-bar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto calc(0.75rem + env(safe-area-inset-bottom));
  padding: 0.7rem 1rem;
  background: rgba(20, 18, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  max-width: calc(100% - 1.5rem);
  gap: 0.3rem;
}

.mp-vc-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: #fff;
  padding: 0;
  width: 58px;
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.15;
}

.mp-vc-ctrl-btn svg {
  width: 42px;
  height: 42px;
  padding: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.mp-vc-ctrl-btn:hover svg {
  background: rgba(255, 255, 255, 0.2);
}

.mp-vc-ctrl-btn.mp-vc-active svg {
  background: #fff;
  color: #14161a;
}

/* Orden de siempre para el video chat aleatorio (fila única): Silenciar,
   Ocultar cámara, Altavoz, Colgar, Voltear cámara, Más — el orden real en
   el HTML cambió (ver comentario sobre la grilla de llamadas más abajo),
   así que se restaura acá a mano con flex order para no correrle el
   layout a algo que no pidieron tocar. */
#toggleAudio { order: 1; }
#toggleVideo { order: 2; }
#speakerToggleBtn { order: 3; }
#stopBtn { order: 4; }
#switchCameraBarBtn { order: 5; }
#vcMoreBtn { order: 6; }

/* Llamada con una amiga: grilla de 2 filas x 3 columnas (Video/Altavoz/
   Silenciar arriba, Más/Compartir/Finalizar abajo), como WhatsApp — acá sí
   importa el orden real del HTML, por eso no se tocan los "order" de arriba. */
#videochatView.friend-call-mode .mp-vc-controls-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 0.5rem;
  justify-items: center;
  width: 100%;
  max-width: 320px;
}

#videochatView.friend-call-mode .mp-vc-ctrl-btn {
  order: 0;
  width: auto;
}

.mp-vc-hangup svg {
  background: var(--red);
}

.mp-vc-hangup:hover svg {
  background: #d43c52;
}

/* Pantalla de llamada entrante: a pantalla completa, como una llamada real
   (WhatsApp/teléfono nativo) — antes era una tarjeta chica flotando en el
   centro, que "en grande, con la foto de quien llama" no se veía para nada.
   El fondo es la propia foto de quien llama, difuminada y oscurecida (o un
   degradado de marca si no tiene foto — ver setIncomingCallBackground() en
   client.js), con el avatar grande y el nombre encima, y Contestar/Rechazar
   siempre pegados abajo del todo. */
.mp-incoming-call-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 2.5rem) 1.5rem calc(env(safe-area-inset-bottom, 1.5rem) + 2.5rem);
  overflow: hidden;
  background: #0c0a14;
}

.mp-incoming-call-bg {
  position: absolute;
  inset: -10%;
  background-color: #0c0a14;
  background-size: cover;
  background-position: center;
  filter: blur(38px) brightness(0.55) saturate(1.15);
  transform: scale(1.15);
}

.mp-incoming-call-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 15, 0.35) 0%, rgba(6, 6, 15, 0.75) 100%);
}

.mp-incoming-call-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  margin-top: 12vh;
}

.mp-incoming-call-avatar {
  display: block;
  margin-bottom: 1.1rem;
}

.mp-incoming-call-avatar .mp-avatar-round {
  width: 96px;
  height: 96px;
  font-size: 2.2rem;
}

.mp-incoming-call-avatar .mp-avatar-round-huge {
  width: 168px;
  height: 168px;
  font-size: 3.6rem;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6);
}

.mp-incoming-call-content h2 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
}

.mp-incoming-call-content .note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.mp-incoming-call-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 4.5rem;
}

.mp-incoming-call-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.mp-incoming-call-action span {
  font-size: 0.82rem;
  font-weight: 600;
  /* Fijo en blanco (no var(--text-dim)) a propósito: esta pantalla siempre
     es oscura, con la foto de quien llama de fondo, sin importar si el
     resto de la app está en tema claro u oscuro — igual que la pantalla de
     video en vivo, acá no tiene sentido pintarla clara. */
  color: rgba(255, 255, 255, 0.85);
}

.mp-incoming-call-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.5);
  transition: transform 0.16s var(--ease);
}

.mp-incoming-call-btn:active {
  transform: scale(0.92);
}

.mp-incoming-call-btn.reject {
  background: var(--red);
}

.mp-incoming-call-btn.accept {
  background: var(--green);
  animation: mpIncomingCallPulse 1.4s ease-out infinite;
}

@keyframes mpIncomingCallPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 214, 142, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(53, 214, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 214, 142, 0); }
}

/* Fondo oscuro detrás de la tarjeta cuando está centrada (ver .mp-vc-more-menu
   más abajo) -- toca afuera para cerrar, mismo criterio que un modal-overlay. */
.mp-vc-more-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 29;
}

.mp-vc-more-backdrop.hidden { display: none; }

.mp-vc-more-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.2rem;
  background: rgba(18, 16, 26, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: min(320px, 84vw);
}

.mp-vc-menu-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.mp-vc-menu-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mp-vc-menu-btn-skip {
  background: var(--gradient-yu-blue);
  box-shadow: var(--glow-blue);
}

.mp-vc-menu-btn-report {
  background: rgba(155, 32, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mp-vc-menu-btn-block {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#reportBtn, #blockBtn { color: var(--gold); }

#speakerToggleBtn.active {
  border-color: transparent;
  background: var(--gradient);
  color: white;
}

.mp-vc-message-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: rgba(20, 18, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
}

.mp-vc-message-bar input {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 0.3rem 0;
  outline: none;
}

.mp-vc-message-bar input::placeholder {
  color: var(--text-dim);
}

.mp-vc-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

#videochatView.audio-mode .mp-vc-stage,
#videochatView.audio-mode .mp-vc-messages,
#videochatView.audio-mode .mp-vc-message-bar,
#videochatView.audio-mode .video-mode-only {
  display: none;
}

#videochatView.friend-call-mode .random-chat-only {
  display: none;
}

/* Inverso de video-mode-only: botones que solo tienen sentido en llamada
   de audio (ej. "Video" para pasar a videollamada, donde en modo video ya
   está "Ocultar cámara" en ese mismo lugar). El video chat aleatorio nunca
   entra en audio-mode, así que estos quedan ocultos ahí sin hacer falta
   nada más. */
#videochatView:not(.audio-mode) .audio-mode-only {
  display: none;
}

/* El de "agregar a la llamada" solo tiene sentido llamando a una amiga
   puntual (para más adelante, cuando haya llamadas grupales) — en el
   video chat aleatorio no hay con quién agregar. */
#videochatView:not(.friend-call-mode) .friend-call-only {
  display: none;
}

.mp-search-result-name {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  /* No 0: con la fila de llamada+mensaje completa (dos íconos + el pill de
     "Enviar mensaje"), un nombre largo se podía terminar comiendo hasta
     quedar en 0px de ancho — con este piso, siempre se ve algo truncado.
     140px, no menos: el avatar (44px) + el punto de en línea + los gaps ya
     suman ~82px antes de llegar al texto, así que con menos no queda
     lugar real para ninguna letra. */
  min-width: 140px;
  flex: 1;
}

.mp-search-result-name-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.mp-search-result-name-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.mp-search-result-name-text .note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.mp-search-result-name .mp-avatar-round,
.mp-search-result-name .mp-friend-online-dot {
  flex-shrink: 0;
}

.mp-search-result-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mp-search-call-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
}

.mp-search-call-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mp-search-call-btn svg {
  flex-shrink: 0;
}

.mp-search-head {
  display: block;
}

.mp-search-subtitle {
  margin: 0.2rem 0 0;
}

.mp-search-input-row {
  margin: 0.9rem 0 0;
}

.mp-search-result-row {
  gap: 0.6rem;
}

.mp-search-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.mp-search-status-pill-accent {
  background: rgba(53, 214, 142, 0.14);
  border-color: rgba(53, 214, 142, 0.35);
  color: var(--green);
}

.mp-search-status-pill-accent:hover {
  background: rgba(53, 214, 142, 0.22);
}

/* Listas planas (retiros, anfitrionas) sobre el nuevo tema */
.plain-list li {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* "Fulana se unió a YU" en Notificaciones */
.mp-new-members {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.mp-new-members h4 {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
}

.mp-new-member-row {
  cursor: pointer;
}

.mp-new-member-text {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.mp-new-member-text strong {
  color: var(--text);
}

.mp-new-member-view {
  flex-shrink: 0;
}

.mp-activity-notif-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
}

.mp-activity-notif-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.16);
  color: var(--yu-purple);
}

.mp-activity-notif-text {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.mp-activity-notif-text strong {
  color: var(--text);
}

.note {
  color: var(--text-dim);
}

.form-error {
  color: var(--red);
}

/* ===== Avatares reutilizables ===== */
.mp-avatar-round {
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  color: white;
}

.mp-avatar-round-initials {
  background: var(--gradient);
}

.mp-avatar-round-28 { width: 28px; height: 28px; font-size: 0.68rem; margin-right: 0.5rem; }
/* Faltaba: se usa en el feed (post.author) y en las carpetas de YU
   Surprise -- sin esta regla, un <img> real (avatarHtml() lo pone sin
   width/height propios) se queda con su tamaño natural completo y
   border-radius:50% lo recorta como un óvalo gigante en vez de un
   círculo chico. Con solo la inicial (sin foto) no se nota tanto porque
   ese caso es un <span>, no una imagen real. */
.mp-avatar-round-32 { width: 32px; height: 32px; font-size: 0.75rem; }
.mp-avatar-round-36 { width: 36px; height: 36px; font-size: 0.85rem; }
.mp-avatar-round-40 { width: 40px; height: 40px; font-size: 0.9rem; }
.mp-avatar-round-44 { width: 44px; height: 44px; font-size: 0.95rem; flex-shrink: 0; }
.mp-avatar-round-50 { width: 50px; height: 50px; font-size: 1.05rem; }
.mp-avatar-round-64 { width: 100%; height: 100%; font-size: 1.3rem; }
.mp-avatar-round-56 { width: 56px; height: 56px; font-size: 1.15rem; }

/* ===== Barra superior de escritorio (reemplaza el sidebar en pantallas grandes) ===== */
.mp-desktop-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 1.5rem;
  background: rgba(8, 6, 16, 0.75);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 500;
}

.mp-desktop-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1;
  min-width: 0;
}

.mp-desktop-topbar-logo {
  height: 38px;
  width: auto;
  mix-blend-mode: screen;
  flex-shrink: 0;
}

.mp-desktop-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  color: var(--text-dim);
  max-width: 280px;
  width: 100%;
}

.mp-desktop-search svg {
  color: var(--accent-a);
  flex-shrink: 0;
}

.mp-desktop-search input {
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
}

.mp-desktop-search input:focus {
  outline: none;
}

.mp-desktop-topbar-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-desktop-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  border-bottom: 3px solid transparent;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.mp-desktop-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mp-desktop-nav-item.active {
  color: var(--accent-a);
  border-bottom-color: var(--accent-a);
}

.mp-desktop-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

.mp-desktop-icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  color: white;
  box-shadow: 0 6px 16px -6px rgba(124, 108, 240, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.mp-desktop-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(124, 108, 240, 0.8);
}

.mp-desktop-icon-btn .mp-nav-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
}

.mp-desktop-profile-menu {
  position: relative;
}

.mp-desktop-profile-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
}

.mp-desktop-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 200px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 501;
}

.mp-desktop-dropdown a,
.mp-desktop-dropdown-disabled {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.86rem;
}

.mp-desktop-dropdown a:hover {
  background: rgba(255, 255, 255, 0.07);
}

.mp-desktop-dropdown-disabled {
  color: var(--text-dimmer);
  cursor: default;
}

.mp-desktop-dropdown hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.3rem 0;
}

@media (min-width: 641px) {
  .mp-desktop-topbar {
    display: flex;
  }
  .mp-sidebar {
    display: none;
  }
}

/* ===== Topbar (buscar/perfil/mensaje) — retirado, queda accesible desde
   el menú lateral (☰) tanto en móvil como en escritorio. ===== */
.mp-topbar {
  display: none;
}

.mp-topbar-logo {
  height: 34px;
  width: auto;
  mix-blend-mode: screen;
}

.mp-topbar-profile-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-topbar-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  color: white;
  box-shadow: 0 6px 18px -6px rgba(124, 108, 240, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.mp-topbar-icon .mp-nav-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
}

.mp-topbar-icon:active {
  transform: scale(0.94);
}

.mp-topbar-icon svg {
  width: 22px;
  height: 22px;
}

.mp-topbar-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mp-topbar-icon:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* ===== Subir video (pedido con imagen de referencia) ===== */
.mp-uv-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mp-uv-picker {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.mp-uv-preview-box {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: var(--panel-2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}

.mp-uv-preview-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-uv-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}

.mp-uv-preview-duration {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}

.mp-uv-preview-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-uv-fileinfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-uv-fileinfo strong {
  font-size: 0.85rem;
}

.mp-uv-filerow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-uv-file-ok {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-uv-filename {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  word-break: break-all;
}

.mp-uv-changebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-size: 0.8rem;
  padding: 0.45rem 0.8rem;
}

.mp-uv-hashtags-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: -0.5rem;
}

.mp-uv-hashtag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: -0.6rem;
}

.mp-uv-hashtag-add {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

/* ===== Hacer en vivo (pedido con imagen de referencia) ===== */
.mp-cl-headright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.mp-cl-ready {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
}

.mp-cl-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mp-cl-top {
  display: flex;
  justify-content: center;
}

.mp-cl-camera-box {
  flex-shrink: 0;
  width: 160px;
  height: 220px;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
}

.mp-cl-camera-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-cl-camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-dim);
  text-align: center;
  padding: 0 0.5rem;
}

.mp-cl-camera-placeholder strong {
  font-size: 0.78rem;
}

.mp-cl-camera-placeholder span {
  font-size: 0.68rem;
}

.mp-cl-flip-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-cl-fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-cl-optrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.mp-cl-optrow-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
}

.mp-cl-optrow-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mp-cl-optrow-text strong {
  font-size: 0.8rem;
}

.mp-cl-optrow-text .note {
  margin: 0;
}

/* Comentarios/regalos/colaboradores: ícono+texto arriba, el interruptor en su propia línea
   abajo -- así nunca queda amontonado contra el texto cuando la etiqueta pasa a dos líneas
   (ej. "Invitar colaboradores" en una tarjeta angosta). */
.mp-cl-optrow-toggle {
  flex-direction: column;
  align-items: stretch;
}

.mp-cl-optrow-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-cl-optrow-toggle input[type="checkbox"] {
  align-self: flex-end;
}

.mp-cl-optrow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.16s ease;
}

.mp-cl-optrow input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 0.16s ease;
}

.mp-cl-optrow input[type="checkbox"]:checked {
  background: var(--gradient);
  border-color: transparent;
}

.mp-cl-optrow input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

/* ===== Modal: crear publicación ===== */
.mp-create-post-modal {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 500px;
  padding: 1.2rem 1.3rem;
}

.mp-create-post-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.mp-create-post-modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.mp-create-post-modal-head .note {
  margin: 0.15rem 0 0;
}

.mp-create-post-modal-head .mp-modal-close {
  flex-shrink: 0;
}

.mp-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel-3);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-modal-close:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mp-create-post-modal-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.mp-create-post-modal-user strong {
  font-size: 0.9rem;
  display: block;
}

.mp-create-post-visibility-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}

.mp-create-post-visibility-pill:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mp-create-post-feeling-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  background: var(--panel-3);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-create-post-feeling-chip.hidden {
  display: none;
}

.mp-create-post-feeling-chip button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
}

.mp-create-post-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.mp-create-post-tags-chips.hidden {
  display: none;
}

.mp-create-post-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--panel-3);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem 0.15rem 0.15rem;
  font-size: 0.76rem;
  color: var(--text);
}

.mp-create-post-tag-chip img,
.mp-create-post-tag-chip .mp-avatar-round-initials {
  width: 20px;
  height: 20px;
}

.mp-create-post-tag-chip button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
}

.mp-create-post-textarea-wrap {
  position: relative;
}

.mp-create-post-char-count {
  position: absolute;
  right: 0.4rem;
  bottom: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-dim);
  pointer-events: none;
}

.mp-create-post-modal textarea {
  border: none;
  background: none;
  min-height: 90px;
}

.mp-create-post-modal-preview {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  margin-bottom: 0.9rem;
}

.mp-create-post-modal-preview img,
.mp-create-post-modal-preview video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.mp-create-post-modal-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Grilla "Foto/Video, Sentimiento, Ubicación, Etiquetar, Más" -- reemplaza
   la fila vieja de solo 2 íconos (Foto/Video por separado, sin las otras
   3 opciones). */
.mp-create-post-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.4rem;
  margin-bottom: 0.7rem;
}

.mp-create-post-grid-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.1rem;
  border-radius: var(--radius-sm);
}

.mp-create-post-grid-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mp-create-post-grid-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.mp-create-post-grid-icon.blue { background: rgba(59, 130, 246, 0.18); color: #3b82f6; }
.mp-create-post-grid-icon.green { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.mp-create-post-grid-icon.red { background: rgba(240, 84, 107, 0.18); color: var(--red); }
.mp-create-post-grid-icon.purple { background: rgba(139, 92, 246, 0.18); color: #8b5cf6; }
.mp-create-post-grid-icon.gray { background: var(--panel-3); color: var(--text-dim); }

/* Paneles que se despliegan al tocar Sentimiento/Ubicación/Etiquetar */
.mp-create-post-inline-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem;
  margin-bottom: 0.7rem;
}

.mp-create-post-inline-panel.hidden {
  display: none;
}

.mp-create-post-tag-panel {
  flex-direction: column;
  align-items: stretch;
}

.mp-create-post-inline-input {
  flex: 1;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  color: var(--text);
  font-size: 0.85rem;
}

.mp-create-post-tag-results {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.mp-create-post-tag-result-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.mp-create-post-tag-result-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mp-create-post-tag-result-row.selected {
  color: var(--accent-b);
  font-weight: 600;
}

.mp-create-post-private-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0.8rem 0 0.4rem;
  cursor: pointer;
}

.mp-create-post-private-row input[type="checkbox"] {
  display: none;
}

.mp-toggle-switch {
  width: 38px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--panel-3);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.mp-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 0.15s ease;
}

.mp-create-post-private-row input[type="checkbox"]:checked + .mp-toggle-switch {
  background: var(--gradient-yu);
  border-color: transparent;
}

.mp-create-post-private-row input[type="checkbox"]:checked + .mp-toggle-switch .mp-toggle-knob {
  transform: translateX(16px);
}

#createPostModalSubmitBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ===== Feed (Inicio) ===== */
.mp-feed {
  width: min(560px, 100%);
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Círculos flotando directo sobre el fondo, sin tarjeta envolvente
   (como en la foto de referencia). */
.mp-stories {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.2rem 0.1rem 0.6rem;
}

.mp-stories::-webkit-scrollbar {
  display: none;
}

.mp-stories-friends {
  display: flex;
  gap: 0.7rem;
}

/* Círculos con aro degradado, como Instagram/WhatsApp — reemplaza las
   tarjetas rectangulares grandes de antes, a pedido explícito ("los
   estados deben verse así, en círculos", con la foto de referencia). */
.mp-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 68px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.mp-story-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--gradient-yu);
  display: flex;
  flex-shrink: 0;
}

.mp-story-ring-self {
  /* Sin historia propia todavía: círculo liso, sin aro de color (el aro
     implica "hay algo para ver"). */
  background: var(--border-strong);
}

.mp-story-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--bg);
  background: var(--panel-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-story-avatar img,
.mp-story-avatar video,
.mp-story-avatar .mp-avatar-round {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-story-card-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  background: var(--gradient);
}

.mp-story-live-pill {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--gradient-yu-pink);
  color: white;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.08rem 0.38rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.mp-story-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-story-plus {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-yu);
  border: 2.5px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  z-index: 2;
}

/* ===== Encabezado de Inicio ===== */
.mp-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mp-home-header-brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mp-home-logo {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  background: var(--gradient-yu);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-home-tagline {
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-home-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.mp-home-icon-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--panel-3);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-home-icon-btn svg {
  width: 24px;
  height: 24px;
}

.mp-home-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--yu-pink);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.mp-home-badge.hidden {
  display: none;
}

.mp-home-wallet {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--panel-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.5rem 0.4rem 0.7rem;
  color: var(--text);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: var(--glow-gold);
}

.mp-home-wallet-icon {
  font-size: 0.95rem;
}

.mp-home-wallet-plus {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-yu-gold);
  color: #221600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}

/* ===== 4 tarjetas de función =====
   En celular las 4 caben completas en una sola fila, sin scroll: con el
   tamaño grande (o con scroll horizontal) Battles quedaba cortada y Coins
   no se alcanzaba a ver. Para que quepan las 4 completas se esconde la
   descripción larga (el ícono + título + botón ya explican la tarjeta) y
   se usa una grilla fija de 4 columnas en vez de carrusel. En escritorio
   (más abajo, min-width:860px) vuelven a un tamaño más grande, con
   descripción visible. */
.mp-home-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.2rem;
}

/* Chico y sin tarjeta -- mismo lenguaje visual que los botones de la barra
   inferior (Inicio/Llamadas/Chats, .mp-bottomnav-item): ícono + etiqueta,
   sin fondo, sin descripción, sin botón de CTA propio. Antes esto era una
   tarjeta grande (136px de alto) con fondo, borde y un pill de texto
   abajo -- se veía enorme en un celular real. */
.mp-home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  text-align: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.1rem;
  color: var(--text);
  cursor: pointer;
  min-height: 0;
  box-shadow: none;
  transition: transform 0.16s var(--ease);
}

.mp-home-card:active {
  transform: scale(0.94);
}

/* El círculo de color del ícono es lo único que sigue distinguiendo cada
   función -- mismo tamaño para las 5 (Match/Empresas/Battles/Coins/Editor
   de fotos), sin la insignia grande de antes. */
.mp-home-card-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

/* Pedido explícito: "un corazón morado en vez del círculo" -- la insignia
   de Match/VYNKOS pasa de redonda a forma de corazón (clip-path
   compartido #mpHeartClip, ver el <svg> oculto arriba del <body>), en
   morado en vez del círculo azul cielo/lila de antes. */
.mp-home-card-match .mp-home-card-icon-heart {
  clip-path: url(#mpHeartClip);
  border-radius: 0;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  padding: 0;
}
.mp-home-card-battles .mp-home-card-icon { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border-strong); }
.mp-home-card-coins .mp-home-card-icon { background: var(--gradient-yu-gold); }
.mp-home-card-photoeditor .mp-home-card-icon { background: var(--gradient-yu-violet); }
.mp-home-card-business .mp-home-card-icon { background: var(--gradient-yu-blue); }

.mp-home-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

.mp-home-card-title {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.mp-home-card-desc {
  display: none;
}

/* El botón de acción ("Conectar", "Ver más", etc.) ya no se muestra --
   mismo criterio que Inicio/Llamadas/Chats en la barra inferior, que no
   llevan ningún texto de acción aparte del nombre. */
.mp-home-card-cta {
  display: none;
}

.mp-home-card-soon {
  position: absolute;
  top: -0.15rem;
  right: 0.1rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.3rem;
  font-size: 0.44rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ===== YU Moments (encabezado de historias) ===== */
.mp-moments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp-moments-head h3 {
  margin: 0;
  font-size: 1rem;
}

.mp-moments-viewall {
  background: none;
  border: none;
  color: var(--accent-b);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* Historia de alguien transmitiendo en vivo: aro degradado + rótulo LIVE */
.mp-story-live .mp-story-card {
  border: 2px solid transparent;
  background-image: linear-gradient(var(--panel-3), var(--panel-3)), var(--gradient-yu);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.mp-story-live-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  background: var(--gradient-yu-pink);
  color: white;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.35rem;
  border-radius: var(--radius-sm);
}

/* Composer */
.mp-composer {
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
}

.mp-composer-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}

.mp-composer-input {
  flex: 1;
  text-align: left;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1rem;
  color: var(--text-dim);
  font-size: 0.88rem;
  cursor: pointer;
}

.mp-composer-input:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* "¿Cómo te sentís hoy?" -- tocar un emoji abre el modal de crear
   publicación con ese sentimiento ya elegido (ver createPostModalFeelingChip
   más abajo, donde se puede quitar antes de publicar). */
.mp-composer-mood-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.mp-composer-mood-row::-webkit-scrollbar {
  display: none;
}

.mp-composer-mood-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.mp-composer-mood-btn {
  flex-shrink: 0;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.mp-composer-mood-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mp-composer-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.65rem;
}

.mp-composer-action {
  display: flex;
  align-items: center;
  /* min-width:0 rompe el mínimo por defecto de los flex items (que se
     niegan a encogerse más allá del ancho de su propio contenido): sin
     esto, en pantallas angostas (~360px, típico Android) la suma del
     contenido de los 4 botones ("En vivo" es el texto más largo) supera
     el ancho disponible y el último botón ("Más") queda cortado/desborda
     fuera de la tarjeta. En pantallas más anchas (iPhone) alcanzaba a
     entrar igual, por eso no se notaba ahí. */
  min-width: 0;
  gap: 0.35rem;
  flex: 1;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.mp-composer-action svg {
  flex-shrink: 0;
}

.mp-composer-action:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* Tarjeta de post */
.mp-feed-scroll {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1rem;
}

#feedEmptyMessage {
  text-align: center;
  padding: 2rem;
}

@media (min-width: 860px) {
  .mp-home-cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    gap: 0.7rem;
  }
  .mp-home-card {
    padding: 1.1rem 0.85rem 0.9rem;
    min-height: 200px;
    gap: 0.4rem;
  }
  .mp-home-card-icon {
    width: 68px;
    height: 68px;
  }
  .mp-home-card-title {
    font-size: 0.92rem;
  }
  .mp-home-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.72rem;
    opacity: 0.85;
    line-height: 1.3;
  }
  .mp-home-card-cta {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
  }
  .mp-home-card-soon {
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.62rem;
  }
}

.mp-post-card {
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Sin padding lateral: así la foto/video queda exactamente del mismo
     ancho que el header/texto de abajo (que ponen su propio padding),
     en vez de quedar más ancha y desalineada con el resto de la tarjeta. */
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.7rem;
  animation: mpFadeIn 0.3s var(--ease);
}

.mp-post-card-header,
.mp-post-card-caption,
.mp-post-card-counts,
.mp-post-card-actions {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mp-post-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
}

.mp-post-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.mp-post-card-menu-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 0.3rem;
  cursor: pointer;
  display: flex;
}

@media (hover: hover) {
  .mp-post-card-menu-btn:hover {
    background: none;
  }
}

.mp-post-card-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-width: min(80vw, 260px);
  display: flex;
  flex-direction: column;
  background: #1c1c28;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 5;
}

.mp-post-card-menu.hidden {
  display: none;
}

.not-interested-btn {
  background: none;
  border: none;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.8rem;
  color: white;
  cursor: pointer;
}

.not-interested-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Resto de opciones del menú "···" (Ver más de este tipo, Guardar, Copiar
   enlace, Reportar, y los ajustes de reproducción de VYNKO Play). Mismo
   look que .not-interested-btn, generalizado a una sola clase. */
.mp-post-card-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: none;
  border: none;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.8rem;
  color: white;
  cursor: pointer;
  white-space: normal;
  width: 100%;
}

.mp-post-card-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mp-post-card-menu-item:disabled {
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.mp-post-card-menu-item:disabled:hover {
  background: none;
}

.mp-post-card-menu-item.danger {
  color: var(--red);
}

/* "Test — se siente feliz 😊" junto al nombre, estilo Facebook */
.mp-post-feeling {
  font-weight: 400;
  color: var(--text-dim);
}

/* Los ítems con un valor al lado (Activado/Desactivado, 1x/1.5x/...) pasan
   a dos líneas -- en una sola fila con "Desplazamiento automático" no
   entraban sin desbordar el menú. */
.mp-post-card-menu-item:has(.mp-menu-item-value) {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.mp-post-card-menu-item .mp-menu-item-value {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}

.mp-post-card-menu-item .mp-menu-soon-badge {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  flex-shrink: 0;
}

.mp-post-card-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.25rem 0;
}

/* Desplazamiento automático / velocidad / calidad / subtítulos solo tienen
   sentido dentro de VYNKO Play (videos en cadena estilo Reels) -- en el
   feed normal (fotos y videos mezclados, sin reproducción en cadena) el
   grupo entero queda oculto. */
.mp-vynko-play-settings-group {
  display: none;
}

#vynkoPlayFeed .mp-vynko-play-settings-group {
  display: flex;
  flex-direction: column;
}

#postDetailAvatar, #postDetailAuthorName {
  cursor: pointer;
}

.mp-post-card-headtext {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.mp-post-card-headtext strong {
  font-size: 0.9rem;
}

.mp-post-card-headtext .note {
  font-size: 0.72rem;
}

.mp-post-card-caption {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}

.mp-post-media-wrap {
  position: relative;
  min-width: 0;
}

/* Línea de progreso del video, como TikTok/Facebook */
.mp-video-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  /* El área tocable real es más alta que la línea visible (14px de padding
     invisible arriba) -- de un dedo real, 3px es casi imposible de agarrar
     con precisión. box-sizing:content-box (el resto de la app usa
     border-box a propósito) + background-clip:content-box para que ese
     padding de más no se pinte, solo agrande dónde responde al toque. */
  box-sizing: content-box;
  padding-top: 14px;
  background: rgba(255, 255, 255, 0.25);
  background-clip: content-box;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
}

.mp-video-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-yu, linear-gradient(135deg, #8b5cf6, #4fa8f0));
  transition: width 0.1s linear;
}

/* Mientras se arrastra, sin transición -- si no, el relleno queda
   corriendo atrás del dedo en vez de seguirlo al instante. */
.mp-video-progress.seeking .mp-video-progress-fill {
  transition: none;
}

.mp-post-detail-progress {
  z-index: 6;
}

.mp-post-media {
  display: block;
  width: 100%;
  max-width: 100%;
  /* Alto natural según la proporción real de cada foto/video (como
     Facebook), no una relación fija: forzar siempre 4:5 recortaba de más
     fotos que no eran así de altas, dejándolas con demasiado zoom. Con
     height:auto se ve completa; max-height es solo un techo para que una
     foto muy angosta/alta no domine el feed (ahí sí recorta un poco). */
  height: auto;
  max-height: 36rem;
  object-fit: cover;
  background: #000;
  cursor: pointer;
}

/* Evita que un toque largo dispare el menú nativo del celular
   ("Abrir video en pestaña nueva", "Descargar", etc.), que se sentía
   como si la app cambiara de pantalla sola. */
.mp-post-media,
.mp-post-tile img,
.mp-post-tile video,
.mp-post-detail-media img,
.mp-post-detail-media video,
.mp-story-viewer-media img,
.mp-story-viewer-media video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mp-feed-mute-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease);
}

.mp-feed-mute-btn:hover {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.8);
}

/* Los <svg> de estos botones a veces colapsan a 0x0 dentro del flex si no
   llevan tamaño explícito por CSS (el atributo width/height del propio
   svg no alcanza en algunos casos): se fija el tamaño y flex-shrink:0
   para que el ícono siempre se vea. */
.mp-feed-mute-btn svg,
.mp-modal-close svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mp-feed-follow-btn {
  background: var(--panel-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s var(--ease);
  flex-shrink: 0;
}

.mp-feed-follow-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mp-feed-follow-btn[data-following="true"] {
  opacity: 0.6;
}

.mp-post-card-counts {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* Insignia de "a N personas les gusta", estilo Facebook: circulito con el
   pulgar seguido del número, en vez de un simple "❤ 302" en texto plano. */
.mp-post-card-like-summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mp-post-card-like-summary.hidden {
  display: none;
}

.mp-post-card-like-summary-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-b);
  color: white;
}

.mp-post-card-actions {
  display: flex;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.mp-post-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  gap: 0.28rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.4rem 0.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
  /* Sin esto, Safari/iOS trata el mantener-presionado sobre el botón como
     una selección de texto normal (resaltado azul + menú de copiar) en vez
     de dejar que corra el long-press de attachReactionPicker(). */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mp-post-card-action svg {
  flex-shrink: 0;
}

/* El número va en la fila estilo Facebook (arriba de los botones) en el feed
   de Inicio, así que en el botón se oculta ahí. En VYNKO Play sí se muestra
   bajo el ícono (ver #vynkoPlayFeed más abajo). */
.mp-post-card-action .mp-act-count { display: none; }

/* Iconos de acción pastel outline (corazón / globo / avión / marcador). El
   "destello" se saca en todos lados: se salía de la caja del ícono y se
   montaba encima del texto del botón de al lado. */
.yu-act-spark { display: none !important; }
.mp-post-card-action .yu-act-icon {
  width: 20px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  overflow: hidden;
}

.mp-post-card-action:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* Activo: el degradado pastel entra en el path rellenable + un latido */
.mp-post-card-action.liked,
.mp-post-card-action.saved {
  color: var(--accent-b);
}
.mp-post-card-action.liked .yu-act-icon,
.mp-post-card-action.saved .yu-act-icon {
  stroke: url(#yuActGrad);
}
.mp-post-card-action.liked .yu-act-fill,
.mp-post-card-action.saved .yu-act-fill {
  fill: url(#yuActGrad);
}
.mp-post-card-action.liked .yu-act-fill {
  transform-box: fill-box;
  transform-origin: center;
  animation: yuActPop 0.35s ease;
}
@keyframes yuActPop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

.mp-post-card-action.gift-btn {
  color: var(--yu-gold);
}

.mp-post-card-action-emoji {
  font-size: 1rem;
  line-height: 1;
}

.mp-post-card-action.gift-btn.sent {
  animation: mpGiftSent 0.5s var(--ease);
}

@keyframes mpGiftSent {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.mp-comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mp-comments-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.mp-comments-list li .mp-avatar-round {
  flex-shrink: 0;
}

.mp-comments-list li.mp-comments-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  border-bottom: none;
  color: var(--text-dimmer);
  text-align: center;
}

.mp-comments-empty strong {
  color: var(--text);
  font-size: 0.95rem;
}

.mp-comment-body {
  flex: 1;
  min-width: 0;
}

.mp-comment-body p {
  margin: 0;
}

.mp-comment-body strong {
  margin-right: 0.4rem;
}

.mp-comment-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.mp-comment-reply-btn,
.mp-comment-delete-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0;
}

.mp-comment-reply-btn:hover {
  color: var(--text);
}

.mp-comment-delete-btn:hover {
  color: #ff6b7a;
}

.mp-comment-like-btn {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.15rem;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.2rem;
}

.mp-comment-like-btn svg {
  transition: transform 0.12s var(--ease);
}

.mp-comment-like-btn:active svg {
  transform: scale(1.2);
}

.mp-comment-like-btn.active {
  color: var(--red);
}

.mp-comment-like-count {
  font-size: 0.72rem;
  font-weight: 600;
}

.mp-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.9rem;
}

.mp-textarea:focus {
  outline: none;
  border-color: var(--accent-a);
  background: rgba(255, 255, 255, 0.06);
}

.mp-settings-view-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.mp-settings-view-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.mp-profile-content-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
  margin-bottom: 0.9rem;
}

.mp-profile-content-tab {
  flex: 1;
  max-width: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dimmer);
  cursor: pointer;
}

.mp-profile-content-tab:hover {
  color: var(--text-dim);
}

.mp-profile-content-tab.active {
  color: var(--accent-a);
  border-bottom: 2px solid var(--accent-a);
}

/* ===== Tienda (comprar monedas y regalos) ===== */
.mp-store-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.mp-store-head-text {
  flex: 1;
  min-width: 0;
}

.mp-store-head-text h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.mp-store-head-text p {
  margin: 0.2rem 0 0;
}

.mp-store-balance-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  flex-shrink: 0;
}

.mp-store-coin-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mp-store-balance-chip div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.mp-store-balance-chip .note {
  font-size: 0.68rem;
}

.mp-store-balance-chip strong {
  font-size: 1rem;
  color: var(--gold);
}

.mp-store-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1.3rem;
}

.mp-store-feature {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mp-store-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.mp-store-feature strong {
  display: block;
  font-size: 0.82rem;
}

.mp-store-feature span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.mp-store-section-title {
  margin: 1.3rem 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 700;
}

.mp-store-packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-top: 0.7rem;
}

.mp-store-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  overflow: hidden;
  background: var(--panel);
  background-image: url('img/coin-pile.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0.6rem;
  background-size: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 0.7rem;
}

.mp-store-package-card.popular {
  border-color: var(--accent-a);
  box-shadow: 0 0 0 1px var(--accent-a);
}

.mp-store-package-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.mp-store-package-coin {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 0.3rem;
  border: 3px solid var(--panel);
  box-shadow: 0 6px 16px -6px rgba(224, 168, 79, 0.6);
}

.mp-store-package-amount,
.mp-store-package-usd,
.mp-store-package-buy,
.mp-store-package-google,
.mp-store-package-badge {
  position: relative;
  z-index: 1;
}

.mp-store-package-amount {
  font-size: 1.05rem;
  font-weight: 700;
}

.mp-store-package-usd {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.mp-store-package-buy {
  width: 100%;
  margin-top: 0.3rem;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-pill);
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.55rem 0.4rem;
  cursor: pointer;
}

.mp-store-package-google {
  width: 100%;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.72rem;
  padding: 0.4rem;
  cursor: pointer;
}

.mp-store-gifts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.mp-store-gift-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.3rem;
  cursor: pointer;
}

.mp-store-gift-card:hover {
  border-color: var(--accent-a);
}

.mp-store-gift-emoji {
  font-size: 1.6rem;
}

.mp-store-gift-name {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.mp-store-gift-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
}

.mp-store-payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mp-store-payment-badge {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-store-secure-note {
  text-align: center;
  margin: 1rem 0 0.5rem;
}

/* BUG REAL reportado: "Reenviar" (que muestra TODAS las conversaciones de
   una, sin filtrar por búsqueda como el buscador de regalos) podía crecer
   más alto que la pantalla -- sin un límite de alto acá, el encabezado con
   el botón de cerrar quedaba empujado fuera de la vista y el modal se
   sentía "pegado", sin forma de salir. max-height + la lista con su
   propio scroll (ver #forwardMessageList/#giftRecipientResults) dejan el
   encabezado siempre alcanzable, sin importar cuántas filas haya. */
.mp-gift-recipient-box {
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-gift-recipient-box .mp-create-post-modal-head {
  flex-shrink: 0;
}

#forwardMessageList,
#giftRecipientResults {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#giftRecipientSearchInput,
#forwardMessageSearchInput {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
  font-size: 16px;
}

/* "Mini ventana" tipo iPhone, pedido explícito: MANTENER PRESIONADA una
   fila de la bandeja muestra esto -- tamaño grande (como la referencia:
   casi todo el ancho, harto alto), con el fondo/tema real que la persona
   ya eligió para sus chats (ver #chatPeekMessages más arriba, junto a
   #chatPanel en cada bloque de tema) + el menú de siempre debajo. Soltar
   el dedo cierra todo (o ejecuta el botón del menú donde haya quedado el
   dedo) -- ver attachHoldToPeek en client.js. */
.mp-conv-peek-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(4, 4, 12, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: mpFadeIn 0.15s var(--ease);
}

.mp-conv-peek-wrap {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mp-chat-peek-box {
  width: 100%;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.mp-chat-peek-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.mp-chat-peek-avatar-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.mp-chat-peek-avatar-wrap > * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-chat-peek-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.mp-chat-peek-name {
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-chat-peek-hint {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  color: var(--text-dimmer);
}

.mp-chat-peek-hint svg {
  flex-shrink: 0;
  opacity: 0.75;
  width: 11px;
  height: 11px;
}

/* Alto grande a propósito -- pedido explícito: "ponlo del tamaño de la
   imagen que aparece", el fondo real del chat tiene que notarse, no
   quedar como una franja chica. */
.mp-chat-peek-messages {
  height: min(48vh, 380px);
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.8rem 0.65rem;
  border-radius: var(--radius-md);
  /* Fondo real: el gradiente/imagen de --chat-bg (ver reglas de arriba),
     no un color fijo -- pedido explícito. */
  background: var(--chat-bg);
  background-size: cover;
  background-position: center;
  /* Igual que dentro del chat de verdad: solo mirar, sin poder
     seleccionar/copiar por accidente desde la vista previa. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mp-chat-peek-messages .mp-chat-bubble {
  max-width: 82%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
}

.mp-chat-peek-messages .mp-chat-bubble-time {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.64rem;
  opacity: 0.65;
}

/* El mismo menú de siempre (Favorito/Archivar/Eliminar, con el estilo
   real de .mp-msg-action-menu -- .mp-chat-bubble-menu/.mp-conv-card-menu
   nunca tuvieron CSS propio, quedaba sin fondo/tarjeta), ahora mostrado
   siempre pegado debajo de la vista previa en vez de flotar cerca de la
   fila -- se selecciona soltando el dedo encima del botón que se quiera
   (ver attachHoldToPeek), como el menú de Mensajes de iPhone. */
.mp-conv-peek-menu {
  position: static !important;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.mp-conv-peek-menu button.mp-hold-target-active {
  background: rgba(255, 255, 255, 0.12);
}

.mp-gift-recipient-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.2rem;
}

.mp-gift-recipient-row span {
  flex: 1;
  font-size: 0.88rem;
}

.mp-gift-recipient-row button {
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-pill);
  color: white;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

@media (max-width: 380px) {
  .mp-store-gifts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Cuadrícula de publicaciones (perfil) ===== */
.mp-posts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

/* Muro estilo Inicio: las publicaciones una debajo de la otra, como el
   feed. Pisa el grid (misma clase en el contenedor). */
.mp-posts-grid.mp-posts-wall {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-template-columns: none;
}
.mp-posts-grid.mp-posts-wall .mp-post-card {
  margin: 0;
}
/* Que cada foto/video NO se coma toda la pantalla en el muro -- tope de
   alto razonable (estilo Facebook); se toca para verla completa. */
.mp-posts-grid.mp-posts-wall .mp-post-media {
  max-height: 60vh;
}
.mp-posts-grid.mp-posts-wall .mp-post-media-wrap {
  max-height: 60vh;
  overflow: hidden;
}

.mp-post-tile {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  cursor: pointer;
}

.mp-post-tile img,
.mp-post-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-post-tile .mp-post-play-icon {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  color: white;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.mp-post-tile .mp-post-likes {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

@media (max-width: 720px) {
  .mp-posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* El overlay del visor no lleva el padding/centrado del resto de modales:
   este debe verse a pantalla completa (como Facebook/Instagram), no como
   una tarjeta flotando en medio de la pantalla. */
#postDetailModal.modal-overlay {
  padding: 0;
}

.mp-post-detail-modal {
  position: relative;
  max-width: none;
  width: 100%;
  /* height (no solo max-height): así el layout siempre llena exactamente el
     espacio disponible del overlay (.modal-overlay, position:fixed;inset:0
     -- se achica solo con el teclado gracias a interactive-widget=
     resizes-content en el <meta viewport>, sin ayuda de JS), y las
     secciones de abajo con flex:1 se reparten ese espacio en vez de quedar
     con tamaño fijo y que el teclado tape todo. */
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mpFadeIn 0.25s var(--ease);
}

.mp-post-detail-close {
  position: absolute;
  /* En un iPhone con notch/Dynamic Island (viewport-fit=cover ya está en el
     <meta viewport>), 0.8rem sin más queda pegado o debajo del recorte
     físico de la pantalla — justo la zona donde iOS reserva sus propios
     gestos (Centro de Control, bajar notificaciones). Un toque real ahí a
     veces ni le llega al botón, aunque en un navegador de escritorio o en
     una prueba automatizada nunca se note. */
  top: calc(0.8rem + env(safe-area-inset-top));
  left: calc(0.8rem + env(safe-area-inset-left));
  z-index: 6;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.mp-post-detail-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.mp-post-detail-media-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #000;
}

.mp-post-detail-media {
  /* position+z-index de verdad, no solo estar despues en el HTML: un
     elemento position:absolute (el fondo difuminado, .mp-post-detail-
     media-blur) pinta ARRIBA de cualquier hijo sin posicionar del mismo
     contenedor sin importar el orden en el HTML -- para fotos/videos
     "anchos" (con el fondo difuminado activado) esto tapaba la foto
     nitida entera, dejando ver solo el difuminado. Con position+z-index
     acá, la foto nítida queda garantizado arriba. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.mp-post-detail-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: mpSpin 0.8s linear infinite;
  z-index: 4;
  pointer-events: none;
}
.mp-post-detail-spinner.hidden { display: none; }
@keyframes mpSpin { to { transform: rotate(360deg); } }

.mp-post-detail-broken {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #0a0714;
  color: #fff;
  text-align: center;
  padding: 1.5rem;
}
.mp-post-detail-broken p { margin: 0; font-size: 1rem; color: rgba(255,255,255,0.85); }
.mp-post-detail-broken button {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
}

.mp-post-detail-media img,
.mp-post-detail-media video {
  max-width: 100%;
  object-fit: contain;
}

.mp-post-detail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}

.mp-post-detail-nav:hover {
  background: rgba(0, 0, 0, 0.75);
}

.mp-post-detail-nav-prev {
  left: 0.8rem;
}

.mp-post-detail-nav-next {
  right: 0.8rem;
}

.mp-post-detail-sidebar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--panel-solid);
  padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  gap: 0.7rem;
  overflow: hidden;
}

.mp-post-detail-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.mp-post-detail-headtext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mp-post-detail-headtext strong {
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#postDetailFollowBtn {
  flex-shrink: 0;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(124, 108, 240, 0.65);
}

#postDetailFollowBtn[data-following="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  box-shadow: none;
  border: 1px solid var(--border);
}

.mp-post-detail-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Bloquear/desbloquear (pedido explícito): en rojo, como cualquier acción
   destructiva de este estilo en la app. */
#publicProfileBlockBtn {
  color: var(--red);
}

.mp-post-detail-menu-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  border-radius: 50%;
  cursor: pointer;
}

/* Mismo problema que .mp-chat-back-btn: sin esto el SVG de los tres
   puntos se comprimía a un par de píxeles de ancho al vivir dentro de un
   botón flex metido en una fila que también es flex. */
.mp-post-detail-menu-btn svg {
  flex-shrink: 0;
}

.mp-post-detail-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

#postDetailMenu {
  top: calc(100% + 4px);
  bottom: auto;
  right: 0;
}

.mp-post-detail-caption {
  color: var(--text);
  margin: 0;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.mp-post-detail-caption:empty {
  display: none;
}

.mp-post-detail-comments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  flex: 1;
  min-height: 0;
}

.mp-post-detail-comments-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
}

.mp-post-detail-comments .mp-comments-list {
  flex: 1;
  min-height: 40px;
  overflow-y: auto;
}

.mp-post-detail-comment-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-top: 0.2rem;
}

.mp-post-detail-comment-form input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  /* 16px mínimo: por debajo de eso, Safari/Chrome en celular hacen zoom
     automático al enfocar el campo. */
  font-size: 16px;
  font-family: inherit;
}

.mp-post-detail-comment-form input:focus {
  outline: none;
  border-color: var(--accent-a);
  background: rgba(255, 255, 255, 0.08);
}

.mp-post-detail-send-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mp-post-detail-send-btn svg {
  width: 17px;
  height: 17px;
}

/* Fondo desenfocado de respaldo: solo se activa (clase .visible, puesta
   por JS según la proporción real del video/foto) cuando el media no
   llena el área vertical y quedaría con franjas negras a los lados —
   en vez de esas franjas, se ve una copia del mismo video/foto agrandada
   y borrosa detrás, como Reels/TikTok. */
.mp-post-detail-media-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: none;
}

.mp-post-detail-media-blur.visible {
  display: block;
}

.mp-post-detail-media-blur img,
.mp-post-detail-media-blur video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(35px) brightness(0.55);
  transform: scale(1.2);
}

.mp-post-detail-playpause-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mp-post-detail-playpause-hint.show {
  opacity: 1;
}

/* Doble toque en el video/foto: corazón grande que aparece y se desvanece
   en el centro, como Instagram — ver triggerPostDetailDoubleTapLike en
   client.js, que le agrega/saca la clase .show. */
.mp-post-detail-heart-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 4;
  color: white;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mp-post-detail-heart-burst.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Corazón único al centro de la pantalla en el doble toque (visor y VYNKO
   Play). Fijo al viewport, sin partículas. Ver flashBigHeart() en client.js. */
#yuBigHeart {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.35);
  pointer-events: none;
  z-index: 2147482500;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45));
}
#yuBigHeart svg { width: 100%; height: 100%; display: block; }
#yuBigHeart.show {
  animation: yuBigHeartPop 0.75s ease forwards;
}
@keyframes yuBigHeartPop {
  0% { opacity: 0; transform: scale(0.35); }
  22% { opacity: 0.95; transform: scale(1.05); }
  40% { opacity: 0.95; transform: scale(0.95); }
  70% { opacity: 0.9; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.05); }
}

.mp-post-detail-overlay-scrim {
  display: none;
}

.mp-post-detail-quick-comment-bar {
  display: none;
}

.mp-post-detail-comments-sheet-head {
  display: none;
}

/* Escritorio: video/foto a la izquierda a toda la altura, panel de
   comentarios fijo a la derecha (como el visor de la referencia). En
   celular es el visor a pantalla completa de abajo (ver
   @media max-width: 859px), estilo TikTok/Reels. */
@media (min-width: 860px) {
  .mp-post-detail-modal {
    flex-direction: row;
  }

  .mp-post-detail-media-col {
    flex: 1;
    height: 100%;
  }

  .mp-post-detail-media {
    height: 100%;
    max-height: none;
  }

  .mp-post-detail-media img,
  .mp-post-detail-media video {
    max-height: 100%;
  }

  .mp-post-detail-sidebar {
    width: 400px;
    flex-shrink: 0;
  }
}

/* ===== Móvil: visor a pantalla completa estilo TikTok/Reels =====
   El video ocupa toda la pantalla (object-fit:cover); la info del autor y
   la fila de acciones se superponen sobre el video en vez de vivir en un
   panel aparte; los comentarios quedan ocultos hasta tocar "Comentar",
   donde suben como una hoja — así el video sigue siendo lo principal. */
@media (max-width: 859px) {
  .mp-post-detail-media-col {
    flex: 1;
    min-height: 0;
  }

  .mp-post-detail-media {
    height: 100%;
    max-height: none;
  }

  .mp-post-detail-media img,
  .mp-post-detail-media video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* JS la pone cuando el media es más ancho que alto (horizontal): en vez
     de recortarlo con cover, se ve completo (contain) sobre el fondo
     borroso de arriba en lugar de sobre franjas negras lisas. */
  .mp-post-detail-media.contain-mode img,
  .mp-post-detail-media.contain-mode video {
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .mp-post-detail-overlay-scrim {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
    pointer-events: none;
  }

  .mp-post-detail-sidebar {
    position: absolute;
    inset: 0;
    display: block;
    background: none;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .mp-post-detail-info-block {
    position: absolute;
    left: 0.9rem;
    right: 4.6rem;
    /* Deja lugar para mp-post-detail-quick-comment-bar, pegada abajo del
       todo (ver más abajo en este mismo bloque). */
    bottom: calc(3.6rem + env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .mp-post-detail-info-block .mp-post-detail-headtext strong,
  .mp-post-detail-info-block .mp-post-detail-caption {
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }

  .mp-post-detail-info-block .note {
    color: rgba(255, 255, 255, 0.75);
  }

  .mp-post-detail-info-block .mp-post-detail-menu-btn {
    color: white;
    background: rgba(0, 0, 0, 0.35);
  }

  /* Escopado a #postDetailModal a propósito: .mp-post-card-actions/-action
     también los usan las tarjetas del feed (fila horizontal normal, esa no
     se toca), así que sin este prefijo esta regla se filtraba ahí también
     y les rompía el layout. */
  #postDetailModal .mp-post-card-actions {
    position: absolute;
    right: 0.7rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
    pointer-events: auto;
    width: 44px;
  }

  #postDetailModal .mp-post-card-action {
    flex: none;
    flex-direction: column;
    gap: 0.2rem;
    width: 44px;
    padding: 0;
    color: white;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  }

  /* Solo íconos en esta columna (sin texto "Me gusta"/"Comentar"/...): con
     el texto puesto, el ancho de cada botón variaba según la palabra y
     terminaba invadiendo el espacio del bloque de info de la izquierda. */
  #postDetailModal .mp-post-card-action-label {
    display: none;
  }

  #postDetailModal .mp-post-card-action svg {
    width: 28px;
    height: 28px;
  }

  #postDetailModal .mp-post-card-action-emoji {
    font-size: 1.6rem;
    line-height: 1;
  }

  /* #postDetailModal .mp-post-card-action ya pesa más que .mp-post-card-
     action.liked/.saved (id + clase > dos clases) y le ganaba el blanco de
     arriba al azul/dorado de "ya reaccionado" — se repite acá con el mismo
     peso para que el pulgar/marcador sigan cambiando de color. Azul (no
     rojo) para el "me gusta" a propósito: es el ícono de pulgar, no de
     corazón — el corazón rojo queda para el doble toque (ver más abajo). */
  #postDetailModal .mp-post-card-action.liked {
    color: var(--accent-b);
  }

  #postDetailModal .mp-post-card-action.saved {
    color: var(--gold);
  }

  #postDetailModal .mp-post-card-action.liked svg {
    fill: var(--accent-b);
  }

  #postDetailModal .mp-post-card-action-count {
    font-size: 0.68rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }

  #postDetailModal .mp-post-card-action-count:empty {
    display: none;
  }

  /* Barra fija de "Agrega un comentario": deja el mismo margen a la
     derecha que mp-post-detail-info-block para no meterse debajo de la
     columna de íconos, y queda pegada abajo del todo (por debajo del
     bloque de info, que crece hacia arriba desde su propio bottom). */
  .mp-post-detail-quick-comment-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0.9rem;
    right: 4.6rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 2;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    pointer-events: auto;
    cursor: pointer;
  }

  .mp-post-detail-quick-comment-emoji {
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .mp-post-detail-comments-block {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* 72vh a secas no sigue al teclado (queda "congelado" al alto de
       pantalla sin teclado) -- el campo de comentar, pegado abajo de este
       bloque, terminaba corrido/tapado por el teclado en vez de quedar
       justo arriba (pedido explícito, mismo bug ya resuelto en
       .mp-messages-view: ver "100dvh" más abajo en este archivo).
       72dvh sí sigue el alto visible real en todo momento. */
    height: 72vh;
    height: 72dvh;
    background: var(--panel-solid);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px -10px rgba(0, 0, 0, 0.6);
    transform: translateY(100%);
    transition: transform 0.25s var(--ease);
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 1.1rem calc(1rem + env(safe-area-inset-bottom));
    pointer-events: auto;
  }

  .mp-post-detail-comments-block.open {
    transform: translateY(0);
  }

  .mp-post-detail-comments-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0 0.5rem;
    flex-shrink: 0;
  }

  .mp-post-detail-comments-sheet-head strong {
    font-size: 0.95rem;
  }

  .mp-post-detail-close {
    background: rgba(0, 0, 0, 0.45);
  }

  /* En móvil se navega deslizando arriba/abajo (ver touchstart/touchend en
     client.js) — las flechas de escritorio ahí encima ya no hacen falta y
     tapaban el video. */
  .mp-post-detail-nav {
    display: none;
  }
}

.mp-inline-comments {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-top: -0.1rem;
}

.mp-inline-comments.hidden {
  display: none;
}

.mp-inline-comments .mp-comments-list {
  max-height: 240px;
  overflow-y: auto;
}

#postDetailDeleteBtn {
  color: #ff6b7a;
}

/* ===== Visor de historias ===== */
.mp-story-viewer {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 88vh;
  max-height: 860px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
}

.mp-story-viewer-progress {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.mp-story-viewer-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.mp-story-viewer-seg-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

.mp-story-viewer-seg-fill.done {
  width: 100%;
}

@keyframes mpStoryFill {
  from { width: 0%; }
  to { width: 100%; }
}

.mp-story-viewer-head {
  position: absolute;
  top: 1.1rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  color: #fff;
}

.mp-story-viewer-head strong {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mp-story-viewer-head .mp-modal-close {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.mp-story-viewer-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-story-viewer-media img,
.mp-story-viewer-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mp-story-viewer-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mp-story-viewer-zone-prev {
  left: 0;
}

.mp-story-viewer-zone-next {
  right: 0;
}

.mp-story-viewer-reply {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.6rem 0.75rem 0.85rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mp-story-viewer-reply.hidden {
  display: none;
}

.mp-story-viewer-like {
  position: absolute;
  right: 0.8rem;
  bottom: 6.2rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: transform 0.16s var(--ease);
}

.mp-story-viewer-like:active {
  transform: scale(0.9);
}

.mp-story-viewer-like svg {
  transition: transform 0.16s var(--ease);
}

.mp-story-viewer-like.liked svg {
  fill: #ff4d6d;
  stroke: #ff4d6d;
  transform: scale(1.15);
}

.mp-story-viewer-like span {
  font-size: 0.78rem;
  font-weight: 600;
}

.mp-story-viewer-own-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.6rem 0.75rem 0.85rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.mp-story-viewer-own-bar.hidden {
  display: none;
}

.mp-story-viewer-views-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

#storyViewerDeleteBtn {
  margin-left: 0.5rem;
  background: rgba(240, 84, 107, 0.25);
  border-color: rgba(240, 84, 107, 0.5);
}

.mp-story-viewer-viewers-list {
  margin-top: 0.5rem;
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(20, 18, 28, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mp-story-viewer-viewers-list.hidden {
  display: none;
}

.mp-story-viewer-viewer-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  color: white;
  font-size: 0.85rem;
}

.mp-story-viewer-viewer-row .mp-avatar-round-28,
.mp-story-viewer-viewer-row .mp-avatar-round-36 {
  flex-shrink: 0;
}

.mp-story-viewer-quick-emojis {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}

.mp-story-quick-emoji {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s var(--ease);
  flex-shrink: 0;
}

.mp-story-quick-emoji:hover {
  transform: scale(1.15);
}

.mp-story-viewer-reply .inline-form input {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.mp-story-viewer-reply .inline-form input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

#storyReplyMessage {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin: 0;
  min-height: 1em;
  font-size: 0.75rem;
}

/* ===== En vivo: pantalla completa estilo TikTok ===== */
.mp-live-full {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: #000;
  color: #fff;
  overflow: hidden;
  animation: mpFadeIn 0.3s var(--ease);
}

.mp-live-full:not(.hidden) {
  display: block;
}

.mp-live-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c0c12;
  cursor: pointer;
}

/* Efecto espejo: SOLO para la propia anfitriona mirándose con la cámara frontal (igual que
   cualquier app de cámara/videollamada) -- lo que ven las espectadoras nunca se toca, sigue
   siendo el video real sin invertir. Con la cámara trasera no se aplica (ver liveFacingMode). */
.mp-live-mirrored {
  transform: scaleX(-1);
}

/* Reacciones flotantes (corazones/emoji) sobre el video en vivo */
.mp-live-reactions {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.mp-live-float-emoji {
  position: absolute;
  bottom: 4.2rem;
  font-size: 1.8rem;
  animation: mpLiveFloatUp 2.6s ease-out forwards;
}

@keyframes mpLiveFloatUp {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% {
    transform: translateY(-20px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-220px) scale(1.1);
    opacity: 0;
  }
}

.mp-live-topbar {
  position: absolute;
  top: calc(0.6rem + env(safe-area-inset-top));
  left: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.mp-live-icon-round {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(6, 6, 11, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.mp-live-dot-badge {
  background: rgba(6, 6, 11, 0.45);
  border: 1px solid rgba(240, 84, 107, 0.6);
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
}

/* Columna única para todo lo que flota sobre el video, anclada abajo: cada
   franja mide lo que su contenido real necesita (no hay huecos reservados
   de más para comentarios que no existen) y el espacio entre secciones es
   el mismo "gap" en todos lados, ~10px, dentro del rango 8-12px pedido. */
.mp-live-bottom-stack {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: calc(0.6rem + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.25s var(--ease);
}

.mp-live-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

/* Franja con el avatar/nombre/likes de la anfitriona y el conteo de
   espectadoras (igual en host y viewer). */
.mp-live-host-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mp-live-host-avatar .mp-avatar-round {
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.mp-live-host-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  background: rgba(6, 6, 11, 0.4);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.6rem;
}

.mp-live-host-name {
  font-size: 0.82rem;
  font-weight: 700;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-live-mini-likes {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.mp-live-viewer-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Columna de controles del lado derecho (voltear/efectos/mic/belleza/
   productos): botones circulares apilados, igual que TikTok/Instagram en
   vivo, separados de la franja de info de abajo para no amontonarse con el
   nombre/estadísticas cuando el título es largo. */
.mp-live-side-stack {
  position: absolute;
  right: 0.7rem;
  bottom: 11.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.mp-live-side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: #fff;
  padding: 0;
}

.mp-live-side-btn svg {
  width: 42px;
  height: 42px;
  padding: 0.55rem;
  border-radius: 50%;
  background: rgba(6, 6, 11, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
}

.mp-live-side-btn span {
  font-size: 0.66rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Silenciado: mismo criterio visual que cualquier toggle "activo" de la app
   (fondo con el gradiente de marca en vez de negro translúcido). */
.mp-live-side-btn.muted svg {
  background: var(--gradient);
  border-color: transparent;
}

.mp-live-host-name-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.mp-live-verified-badge {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-b);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-live-verified-badge.hidden {
  display: none;
}

.mp-live-quality-dot {
  flex-shrink: 0;
  font-size: 0.62rem;
}

/* Título/descripción del LIVE (lo que se escribió en "Hacer en vivo"):
   una sola línea con puntos suspensivos -- el video de fondo no tiene
   espacio para un párrafo entero flotando encima. */
.mp-live-title-text {
  display: block;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-live-title-text.hidden {
  display: none;
}

.mp-live-stats-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.mp-live-mini-gifts,
.mp-live-mini-coins {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.mp-live-chat-overlay {
  z-index: 2;
  max-height: 26vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Se desvanece hacia arriba, como los comentarios de un LIVE. */
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
}

.mp-live-chat-overlay:empty {
  display: none;
}

.mp-live-chat-overlay .mp-chat-bubble {
  align-self: flex-start;
  max-width: 90%;
  /* Pedido explícito: la letra blanca no se veía -- con video de fondo
     claro, un fondo tan transparente (antes 0.55) se ve casi blanco y el
     texto blanco desaparece. Bien opaco para que el contraste no dependa
     de qué tan clara/oscura salga la transmisión de cada quien. */
  background: rgba(6, 6, 11, 0.85);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.83rem;
  word-break: break-word;
}

/* El arreglo de arriba seguía sin verse: css/global-light-theme.css (tema
   claro, activo SIEMPRE para toda la app -- ver @import en
   css/modular-main.css, carga después de este archivo) le pone
   ".mp-chat-bubble:not(.mine) { background: #f1f5f9 !important }" -- pensado
   para el chat normal (fondo sólido de la página), pero estas burbujas de
   en vivo (appendLiveChatMessage en client.js nunca les pone .mine) también
   califican, y ese !important le ganaba al fondo oscuro de arriba, dejando
   la burbuja casi blanca con letra blanca de nuevo. Achica el alcance de esa
   regla: acá siempre oscura y opaca, porque va sobre un video (que puede
   ser claro u oscuro), no sobre el fondo blanco de la página. */
.mp-live-chat-overlay .mp-chat-bubble:not(.mine) {
  background: rgba(6, 6, 11, 0.85) !important;
  color: #fff !important;
}

.mp-live-chat-overlay .mp-chat-bubble strong {
  color: var(--accent-b);
  font-weight: 700;
  margin-right: 0.3rem;
}

.mp-live-bottom-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.25s var(--ease);
}

.mp-live-chat-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Antes oscuro y transparente (con letra negra encima, ver input más
     abajo) -- contra un video de fondo claro se veía casi blanco y la letra
     negra pasaba, pero contra uno oscuro habría vuelto a desaparecer. Claro
     y bien opaco para que la letra negra se lea siempre, sea cual sea el
     video de fondo. */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.35rem 0.3rem 0.8rem;
}

.mp-live-chat-form-emoji {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mp-live-chat-form input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: #000; /* pedido explícito: la letra blanca no se veía al escribir */
  font-size: 16px;
}

.mp-live-chat-form input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.mp-live-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.mp-live-action-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  transition: opacity 0.2s var(--ease), max-height 0.2s var(--ease);
  overflow: hidden;
}

.mp-live-action-row.mp-live-action-row-collapsed {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

.mp-live-emoji-picker {
  display: flex;
  gap: 0.2rem;
  background: rgba(6, 6, 11, 0.45);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.5rem;
  flex-shrink: 0;
}

.mp-live-emoji-btn {
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem;
}

.mp-live-emoji-btn:active {
  transform: scale(1.2);
}

.mp-live-pill-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(6, 6, 11, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}

.mp-live-pill-btn.mp-live-like-btn {
  background: var(--gradient);
  border-color: transparent;
  margin-left: auto;
}

.mp-live-pill-btn.mp-live-like-btn.liked {
  filter: brightness(1.25);
}

.mp-live-pill-btn.mp-live-gift-btn {
  background: linear-gradient(135deg, #e94f97, #f07c6c);
  border-color: transparent;
}

/* Resumen real al finalizar el LIVE (#liveEndSummaryModal) */
.mp-live-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.mp-live-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mp-live-summary-cell strong {
  font-size: 1.15rem;
}

.mp-live-summary-cell span {
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Gestión/Moderación del LIVE (#liveManageModal) */
.mp-live-manage-box {
  text-align: left;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-live-manage-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mp-live-manage-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
}

.mp-live-manage-toggle-row input[type="checkbox"] {
  display: none;
}

.mp-live-manage-toggle-row input[type="checkbox"]:checked + .mp-toggle-switch {
  background: var(--gradient-yu);
  border-color: transparent;
}

.mp-live-manage-toggle-row input[type="checkbox"]:checked + .mp-toggle-switch .mp-toggle-knob {
  transform: translateX(16px);
}

.mp-live-manage-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
}

.mp-live-manage-viewer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-live-manage-viewer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.mp-live-manage-viewer-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.mp-live-manage-viewer-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-live-manage-viewer-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--panel-3);
  color: var(--text-dim);
  flex-shrink: 0;
}

.mp-live-manage-viewer-badge.mod {
  background: var(--gradient);
  color: #fff;
}

.mp-live-manage-viewer-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.mp-live-manage-viewer-actions button {
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
}

.mp-live-manage-viewer-actions button.active {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

.mp-live-manage-viewer-actions button.danger {
  color: var(--red);
}

/* Belleza (#liveBeautyModal) */
.mp-live-beauty-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.8rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.mp-live-beauty-row input[type="range"] {
  width: 100%;
}

/* Lista de productos para destacar (#liveProductsModal) */
.mp-live-products-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 50vh;
  overflow-y: auto;
  margin: 0.6rem 0;
}

.mp-live-product-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.mp-live-product-row.featured {
  border-color: var(--accent-b);
}

.mp-live-product-row-photo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--panel-3);
  flex-shrink: 0;
  overflow: hidden;
}

.mp-live-product-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-live-product-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-live-product-row-info strong {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-live-product-row-info span {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-live-product-row button {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
}

.mp-live-product-row.featured button {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

/* Producto destacado flotando sobre el video (host y espectadora) */
.mp-live-product-spotlight {
  position: absolute;
  top: calc(3.2rem + env(safe-area-inset-top));
  left: 0.7rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(6, 6, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  color: #fff;
  max-width: 78%;
}

.mp-live-product-spotlight-photo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  overflow: hidden;
}

.mp-live-product-spotlight-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-live-product-spotlight-name {
  font-size: 0.76rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

.mp-live-product-spotlight-cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-b);
  flex-shrink: 0;
}

/* Modal de detalle del producto (#liveProductDetailModal) */
.mp-live-product-detail-photo {
  width: 100%;
  height: 160px;
  border-radius: 14px;
  background: var(--panel-2);
  overflow: hidden;
}

.mp-live-product-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-live-product-detail-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-b);
  margin: 0.3rem 0;
}

/* ===== Mensajes / Chat privado ===== */
.mp-chat-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.mp-chat-privacy-banner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  margin: -0.4rem 0 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(124, 108, 240, 0.12);
  color: var(--accent-a);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}
.mp-chat-privacy-banner svg { flex-shrink: 0; }

.mp-chat-back-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  transition: background 0.16s var(--ease);
}

/* Sin esto, aunque el botón no se comprima, el SVG de adentro sí: al ser un
   flex item dentro de un botón que también es flex (display:flex,
   justify-content:center) metido en una fila que también lo es, el motor
   lo achicaba a un par de píxeles de ancho en vez de sus 20px reales (el
   alto quedaba bien, solo el ancho se comprimía) — la flecha quedaba
   reducida a una línea invisible. Pasaba tanto en el encabezado del chat
   como en el del perfil público, así que va a nivel de clase. */
.mp-chat-back-btn svg {
  flex-shrink: 0;
}

.mp-chat-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mp-chat-back-btn:active {
  transform: scale(0.94);
}

.mp-chat-head-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

#chatPeerName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-chat-head strong {
  font-size: 0.95rem;
}

.mp-chat-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

.mp-chat-status.typing #chatPeerStatusText {
  color: var(--accent-a);
  font-style: italic;
}

.mp-chat-status.typing #chatPeerOnlineDot {
  display: none;
}

.mp-chat-call-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.mp-chat-call-btn svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
}

.mp-chat-call-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mp-chat-call-btn-outline {
  background: transparent;
  box-shadow: none;
}

#videochatView.friend-call-mode .random-chat-only {
  display: none;
}

.mp-chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dimmer);
  flex-shrink: 0;
}

.mp-chat-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(53, 214, 142, 0.18);
}

.mp-chat-messages {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: none;
}

.mp-chat-messages::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

.mp-chat-messages::-webkit-scrollbar-thumb {
  background: transparent;
}

.mp-chat-messages:hover {
  scrollbar-width: thin;
}

.mp-chat-messages:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
}

.mp-chat-bubble {
  position: relative;
  max-width: 75%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  align-self: flex-start;
  /* Pedido explícito: "al dejar presionado parece seleccionado todo" --
     sin esto, mantener presionado en el celular dispara A LA VEZ el menú
     propio Y el selector de texto nativo del navegador (que pinta todo
     de celeste, como si se hubiera seleccionado). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mp-chat-bubble-deleted {
  opacity: 0.6;
  font-style: italic;
}

.mp-chat-bubble.mine {
  align-self: flex-end;
  background: var(--chat-bubble-mine-bg, var(--gradient-soft));
  border-color: var(--chat-bubble-mine-border, rgba(124, 108, 240, 0.35));
  color: var(--chat-bubble-mine-color, var(--text));
}

/* !important + #messagesView #chatPanel: mismo motivo que en el bloque de
   arriba — css/global-light-theme.css tiene
   ".mp-chat-bubble:not(.mine) { background: ... !important }" y carga
   después de este archivo, así que sin esto ninguna burbuja "de la otra
   persona" cambiaba de color con los temas. */
#messagesView #chatPanel .mp-chat-bubble.mine {
  background: var(--chat-bubble-mine-bg, var(--gradient-soft)) !important;
  border-color: var(--chat-bubble-mine-border, rgba(124, 108, 240, 0.35)) !important;
  color: var(--chat-bubble-mine-color, var(--text)) !important;
}

#messagesView #chatPanel .mp-chat-bubble:not(.mine) {
  background: var(--chat-bubble-theirs-bg, rgba(255, 255, 255, 0.05)) !important;
  border-color: var(--chat-bubble-theirs-border, var(--border)) !important;
  color: var(--chat-bubble-theirs-color, var(--text)) !important;
}

/* Conversación abierta: fondo de universo (Yû también significa universo, cielo),
   un poco más oscuro que antes para que las burbujas resalten más — este es
   el fondo del tema "Clásico" (data-chat-theme="classic" o sin atributo),
   guardado también como el valor por defecto de --chat-bg para que el resto
   de las reglas de acá abajo (que solo leen la variable) no necesiten su
   propio fallback repetido. Los demás temas (YU+, ver CHAT_THEME_CONFIG en
   client.js) van más abajo, cada uno solo redefiniendo estas variables. */
#chatPanel {
  /* Pedido explícito: el fondo por defecto ("Clásico") pasa de la foto
     oscura a blanco liso -- por eso el resto de las variables de acá
     abajo también cambian de claras (pensadas para esa foto oscura) a
     oscuras: sin esto, el encabezado y la burbuja de la otra persona
     quedarían en texto blanco sobre blanco, mismo bug que ya se corrigió
     antes en el chat de En Vivo. */
  --chat-bg: #ffffff;
  --chat-header-color: #000000;
  --chat-header-status-color: rgba(0, 0, 0, 0.6);
  --chat-bubble-mine-bg: var(--gradient);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(124, 108, 240, 0.35);
  --chat-bubble-theirs-bg: #f1f5f9;
  --chat-bubble-theirs-color: #000000;
  --chat-bubble-theirs-border: rgba(0, 0, 0, 0.1);
  /* Sin valor propio por defecto: sigue a --chat-header-color salvo que un
     tema puntual lo pise (los 9 nuevos sí lo hacen, con su color de acento
     real — ver más abajo) — pedido explícito: "el más+, la carita y el
     micrófono tal cual" con el color de cada fondo. */
  --chat-icon-color: var(--chat-header-color);
  --chat-font: inherit;

  padding: 1.1rem 1.2rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* !important + selector con #messagesView duplicado a propósito: hay un
   #chatPanel { background-color/image: ... !important } más genérico en
   css/global-light-theme.css (el rediseño claro del dueño, pensado para
   toda la app) que carga DESPUÉS de este archivo — con la misma
   especificidad (#chatPanel solo) y su propio !important, esa regla le
   ganaba siempre a la de acá y ningún tema de chat se llegaba a ver nunca.
   #messagesView #chatPanel tiene más especificidad (dos ID en vez de uno)
   que #chatPanel solo, así que esto gana pase lo que pase, sin importar en
   qué orden se carguen los archivos. Mismo motivo en todas las reglas de
   acá abajo que tocan el encabezado/burbujas del chat. */
#messagesView #chatPanel {
  background: var(--chat-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  font-family: var(--chat-font) !important;
}

/* "Mini ventana" de vista previa (openChatPeekModal): pedido explícito, el
   fondo por defecto es el MISMO tema de chat que cada quien ya eligió para
   sus conversaciones (Personalizar chats → Diseños de fondo), no un fondo
   fijo aparte. #chatPeekMessages[data-chat-theme="..."] se agregó como
   segundo selector a cada bloque de tema de más abajo (junto a
   #chatPanel[data-chat-theme="..."]) -- este bloque de acá solo cubre el
   valor por defecto ("classic"/sin tema), igual que #chatPanel más arriba. */
#chatPeekMessages {
  --chat-bg: #ffffff;
  --chat-bubble-mine-bg: var(--gradient);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(124, 108, 240, 0.35);
  --chat-bubble-theirs-bg: #f1f5f9;
  --chat-bubble-theirs-color: #000000;
  --chat-bubble-theirs-border: rgba(0, 0, 0, 0.1);
}

#chatPeekModal #chatPeekMessages {
  background: var(--chat-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  font-family: var(--chat-font, inherit) !important;
}

/* Mismo motivo que #messagesView #chatPanel .mp-chat-bubble.mine/:not(.mine)
   más abajo: sin esto, la regla genérica de css/global-light-theme.css
   (.mp-chat-bubble:not(.mine) { background: #f1f5f9 !important }) le gana a
   cualquier tema también dentro de la vista previa. */
#chatPeekModal .mp-chat-bubble.mine {
  background: var(--chat-bubble-mine-bg, var(--gradient-soft)) !important;
  border-color: var(--chat-bubble-mine-border, rgba(124, 108, 240, 0.35)) !important;
  color: var(--chat-bubble-mine-color, var(--text)) !important;
}

#chatPeekModal .mp-chat-bubble:not(.mine) {
  background: var(--chat-bubble-theirs-bg, rgba(255, 255, 255, 0.05)) !important;
  border-color: var(--chat-bubble-theirs-border, var(--border)) !important;
  color: var(--chat-bubble-theirs-color, var(--text)) !important;
}

#messagesView #chatPanel .mp-chat-head .mp-chat-back-btn,
#messagesView #chatPanel .mp-chat-head strong,
#messagesView #chatPanel .mp-chat-head #chatPeerName,
#messagesView #chatPanel .note {
  color: var(--chat-header-color) !important;
}

#messagesView #chatPanel .mp-chat-status {
  color: var(--chat-header-status-color) !important;
}

/* "el mas+, la carita y el microfono tal cual" -- iconos de la barra de
   entrada y los botones de llamada/video siguen el color de acento del
   tema activo (por defecto igual al color del encabezado). */
#messagesView #chatPanel .mp-chat-input-icon {
  color: var(--chat-icon-color, #ffffff) !important;
  border-color: var(--chat-icon-color, rgba(255, 255, 255, 0.25)) !important;
}

#messagesView #chatPanel .mp-chat-call-btn,
#messagesView #chatPanel .mp-chat-call-btn-outline {
  color: var(--chat-icon-color, var(--chat-header-color)) !important;
  border-color: var(--chat-icon-color, rgba(255, 255, 255, 0.25)) !important;
}

/* .mp-chat-call-btn (videollamada) hereda "background: var(--gradient)" de
   .mp-topbar-icon -- ese --gradient es el de marca de toda la app, no el
   del tema de este chat. Antes de los 9 fondos nuevos ningún tema definía
   --chat-icon-color propio (todos seguían a --chat-header-color, casi
   siempre blanco), así que este cambio de fondo se deja solo para esos 9
   -- en el resto el botón de video sigue como estaba (celeste de marca). */
#messagesView #chatPanel:is(
  [data-chat-theme="purpleSpark"],
  [data-chat-theme="pinkClouds"],
  [data-chat-theme="spaceVortex"],
  [data-chat-theme="blackGold"],
  [data-chat-theme="purpleWave"],
  [data-chat-theme="neonDoodle"],
  [data-chat-theme="tealWatercolor"],
  [data-chat-theme="redTech"],
  [data-chat-theme="lavenderFloral"]
) .mp-chat-call-btn {
  background: var(--chat-icon-color) !important;
  color: #fff !important;
}

#messagesView #chatPanel:is(
  [data-chat-theme="purpleSpark"],
  [data-chat-theme="pinkClouds"],
  [data-chat-theme="spaceVortex"],
  [data-chat-theme="blackGold"],
  [data-chat-theme="purpleWave"],
  [data-chat-theme="neonDoodle"],
  [data-chat-theme="tealWatercolor"],
  [data-chat-theme="redTech"],
  [data-chat-theme="lavenderFloral"]
) .mp-chat-call-btn-outline {
  background: transparent !important;
}

/* Los 9 fondos nuevos van "tal cual" a la referencia: abajo solo el mas+,
   la carita y el micrófono -- sin la rosa (regalo) ni el acceso directo a
   cámara que sí tiene el resto de temas. */
#messagesView #chatPanel:is(
  [data-chat-theme="purpleSpark"],
  [data-chat-theme="pinkClouds"],
  [data-chat-theme="spaceVortex"],
  [data-chat-theme="blackGold"],
  [data-chat-theme="purpleWave"],
  [data-chat-theme="neonDoodle"],
  [data-chat-theme="tealWatercolor"],
  [data-chat-theme="redTech"],
  [data-chat-theme="lavenderFloral"]
) #chatGiftBtn,
#messagesView #chatPanel:is(
  [data-chat-theme="purpleSpark"],
  [data-chat-theme="pinkClouds"],
  [data-chat-theme="spaceVortex"],
  [data-chat-theme="blackGold"],
  [data-chat-theme="purpleWave"],
  [data-chat-theme="neonDoodle"],
  [data-chat-theme="tealWatercolor"],
  [data-chat-theme="redTech"],
  [data-chat-theme="lavenderFloral"]
) #chatQuickCameraBtn {
  display: none !important;
}

/* Mismos 9 fondos: el círculo del mas+/carita/mic queda teñido del color
   del tema (no gris genérico), y el avatar "YU" del encabezado lleva un
   anillo del mismo color -- tal como en la referencia. */
#messagesView #chatPanel:is(
  [data-chat-theme="purpleSpark"],
  [data-chat-theme="pinkClouds"],
  [data-chat-theme="spaceVortex"],
  [data-chat-theme="blackGold"],
  [data-chat-theme="purpleWave"],
  [data-chat-theme="neonDoodle"],
  [data-chat-theme="tealWatercolor"],
  [data-chat-theme="redTech"],
  [data-chat-theme="lavenderFloral"]
) .mp-chat-input-icon {
  background: color-mix(in srgb, var(--chat-icon-color) 20%, transparent) !important;
}

#messagesView #chatPanel:is(
  [data-chat-theme="purpleSpark"],
  [data-chat-theme="pinkClouds"],
  [data-chat-theme="spaceVortex"],
  [data-chat-theme="blackGold"],
  [data-chat-theme="purpleWave"],
  [data-chat-theme="neonDoodle"],
  [data-chat-theme="tealWatercolor"],
  [data-chat-theme="redTech"],
  [data-chat-theme="lavenderFloral"]
) #chatPeerAvatar {
  display: inline-flex;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--chat-icon-color);
}

/* Antes mostraba un logo grande de "YU" centrado mientras la conversación
   está vacía -- pedido explícito: sacarlo de TODOS los fondos de chat, no
   solo el de Citas. content: none hace que el pseudo-elemento ni se genere
   (nada que tapar/recolorear), así que las reglas de abajo por tema (borde/
   color/filter) quedan sin efecto -- se dejan tal cual para no tocar más de
   la cuenta, pero no se ven. */
#chatMessages:empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatMessages:empty::before {
  content: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46%;
  min-width: 150px;
  max-width: 230px;
  aspect-ratio: 1.75;
  border-radius: 40% 40% 40% 6%;
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: 0.01em;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

#chatPanel[data-chat-theme="purpleSpark"] #chatMessages:empty::before {
  border: 3px solid #a855f7;
  background: linear-gradient(135deg, #f5f3ff, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.55));
}

#chatPanel[data-chat-theme="pinkClouds"] #chatMessages:empty::before {
  border: 3px solid #f472b6;
  color: #ec4899;
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.4));
}

#chatPanel[data-chat-theme="spaceVortex"] #chatMessages:empty::before {
  border: 3px solid #93c5fd;
  background: linear-gradient(135deg, #60a5fa, #a855f7 55%, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(96, 165, 250, 0.55));
}

#chatPanel[data-chat-theme="blackGold"] #chatMessages:empty::before {
  border: 3px solid #d4af37;
  color: #2a2a2a;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

#chatPanel[data-chat-theme="purpleWave"] #chatMessages:empty::before {
  border: 3px solid #ffffff;
  color: #ffffff;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.5));
}

#chatPanel[data-chat-theme="neonDoodle"] #chatMessages:empty::before {
  border: 3px solid #f472b6;
  background: linear-gradient(135deg, #db2777, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(244, 114, 182, 0.75));
}

#chatPanel[data-chat-theme="tealWatercolor"] #chatMessages:empty::before {
  border: 3px solid #14b8a6;
  color: #0f766e;
}

#chatPanel[data-chat-theme="redTech"] #chatMessages:empty::before {
  border: 3px solid #ef4444;
  color: #ef4444;
  filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.7));
}

#chatPanel[data-chat-theme="lavenderFloral"] #chatMessages:empty::before {
  border: 3px solid #a78bfa;
  color: #7c3aed;
}

/* Separador decorativo bajo el encabezado (ver #chatThemeDivider en el
   HTML y applyChatTheme() en client.js) — una línea a cada lado con el
   emoji del tema en el medio. Oculto por completo en el tema clásico
   (sin emoji, ver CHAT_THEME_CONFIG). */
.mp-chat-theme-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.3rem 0 0.7rem;
}

.mp-chat-theme-divider-line {
  flex: 1;
  height: 1px;
  background: var(--chat-divider-color, rgba(255, 255, 255, 0.25));
}

.mp-chat-theme-divider-emoji {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px var(--chat-divider-color, transparent));
}

/* ==========================================================================
   TEMAS DE FONDO DEL CHAT (YU+) — cada uno redefine nada más que estas
   variables; las reglas que las consumen (arriba y en .mp-chat-bubble) ya
   están escritas una sola vez. Agregar un tema nuevo = agregar un bloque
   acá + su fila en CHAT_THEME_CONFIG (client.js).
   ========================================================================== */

/* 💋 Besos — lavanda claro, burbujas moradas con brillo, corazones/labios */
#chatPanel[data-chat-theme="lips"], #chatPeekMessages[data-chat-theme="lips"] {
  --chat-bg: radial-gradient(circle at 20% 15%, rgba(236, 72, 153, 0.12), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(124, 108, 240, 0.14), transparent 45%),
    linear-gradient(180deg, #f4f1fb, #ece6fb);
  --chat-header-color: #241f38;
  --chat-header-status-color: #6f6a85;
  --chat-bubble-mine-bg: linear-gradient(135deg, #8b7cf6, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: transparent;
  --chat-bubble-theirs-bg: #ffffff;
  --chat-bubble-theirs-color: #241f38;
  --chat-bubble-theirs-border: rgba(124, 108, 240, 0.18);
  --chat-divider-color: #a855f7;
}

/* 😢 Lágrimas — blanco/rosado, acento rojo */
#chatPanel[data-chat-theme="crying"], #chatPeekMessages[data-chat-theme="crying"] {
  --chat-bg: linear-gradient(180deg, #fff5f5, #ffe9ec);
  --chat-header-color: #3a1418;
  --chat-header-status-color: #9c5a61;
  --chat-bubble-mine-bg: linear-gradient(135deg, #ef4444, #f43f5e);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: transparent;
  --chat-bubble-theirs-bg: #ffffff;
  --chat-bubble-theirs-color: #3a1418;
  --chat-bubble-theirs-border: rgba(239, 68, 68, 0.22);
  --chat-divider-color: #ef4444;
}

/* 💪 Gym — negro, burbujas gris carbón */
#chatPanel[data-chat-theme="gym"], #chatPeekMessages[data-chat-theme="gym"] {
  --chat-bg: linear-gradient(180deg, #0a0a0a, #161616);
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(255, 255, 255, 0.55);
  --chat-bubble-mine-bg: linear-gradient(135deg, #e5e5e5, #ffffff);
  --chat-bubble-mine-color: #111111;
  --chat-bubble-mine-border: transparent;
  --chat-bubble-theirs-bg: #262626;
  --chat-bubble-theirs-color: #f2f2f2;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.1);
  --chat-divider-color: rgba(255, 255, 255, 0.4);
}

/* ✝️ Gótico — negro con rojo neón */
#chatPanel[data-chat-theme="gothic"], #chatPeekMessages[data-chat-theme="gothic"] {
  --chat-bg: radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.18), transparent 55%), #050505;
  --chat-header-color: #ff3b3b;
  --chat-header-status-color: rgba(255, 59, 59, 0.7);
  --chat-bubble-mine-bg: linear-gradient(135deg, #7f1d1d, #dc2626);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: #ff3b3b;
  --chat-bubble-theirs-bg: #141414;
  --chat-bubble-theirs-color: #f5f5f5;
  --chat-bubble-theirs-border: rgba(255, 59, 59, 0.45);
  --chat-divider-color: #ff3b3b;
}

/* ✨ Galaxia — espacio morado con estrellas */
#chatPanel[data-chat-theme="galaxy"], #chatPeekMessages[data-chat-theme="galaxy"] {
  /* Nebulosa del Cangrejo real (NASA/ESA, Hubble — dominio público con
     condición de crédito, ver el aviso en el selector de temas), no un
     degradado inventado — pedido explícito tras ver que ninguno de los
     temas se parecía a la foto real. */
  --chat-bg: linear-gradient(180deg, rgba(10, 7, 20, 0.55), rgba(10, 7, 20, 0.8)), url("img/chat-themes/galaxy.jpg");
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(216, 200, 255, 0.75);
  --chat-bubble-mine-bg: linear-gradient(135deg, #7c6cf0, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(216, 200, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.08);
  --chat-bubble-theirs-color: #f1edff;
  --chat-bubble-theirs-border: rgba(216, 200, 255, 0.3);
  --chat-divider-color: #c4b5fd;
}

/* 🌙 Luz de luna — cielo azul nocturno con luna real (NASA, dominio
   público) arriba a la derecha, no un círculo inventado con CSS. La foto
   de luna es un disco completo (no un cielo entero), así que en vez de
   estirarla a pantalla completa (--chat-bg + cover, como los demás temas)
   se pone chica y sin repetir sobre el degradado de cielo nocturno —
   selector más específico que el de la regla base para poder fijar su
   propio background-size/position sin que la del temas-cover genérico le
   gane. */
#messagesView #chatPanel[data-chat-theme="moonlight"] {
  background:
    url("img/chat-themes/moonlight.jpg") top 8% right 6% / 110px 110px no-repeat,
    linear-gradient(180deg, #0b1c3d, #16305c 55%, #1c3f74) !important;
}

#chatPanel[data-chat-theme="moonlight"], #chatPeekMessages[data-chat-theme="moonlight"] {
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(191, 219, 254, 0.8);
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #60a5fa);
  --chat-bubble-mine-color: #06213f;
  --chat-bubble-mine-border: rgba(191, 219, 254, 0.6);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12);
  --chat-bubble-theirs-color: #eaf3ff;
  --chat-bubble-theirs-border: rgba(191, 219, 254, 0.35);
  --chat-divider-color: #bfdbfe;
}

/* 🌸 Luna rosa — nebulosa real rosa/azul (NASA/JPL-Caltech, telescopio
   Spitzer), no un degradado inventado. */
#chatPanel[data-chat-theme="pinkmoon"], #chatPeekMessages[data-chat-theme="pinkmoon"] {
  --chat-bg: linear-gradient(180deg, rgba(26, 11, 46, 0.5), rgba(26, 11, 46, 0.78)), url("img/chat-themes/pinkmoon.jpg");
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(251, 207, 232, 0.8);
  --chat-bubble-mine-bg: linear-gradient(135deg, #a855f7, #ec4899);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(251, 207, 232, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.1);
  --chat-bubble-theirs-color: #fdf2fb;
  --chat-bubble-theirs-border: rgba(251, 207, 232, 0.3);
  --chat-divider-color: #f0abfc;
  --chat-font: 'Brush Script MT', cursive;
}

/* 📜 Vintage — textura de papel real, letra manuscrita */
#chatPanel[data-chat-theme="vintage"], #chatPeekMessages[data-chat-theme="vintage"] {
  --chat-bg: url("img/chat-themes/vintage.jpg");
  --chat-header-color: #3d2b1a;
  --chat-header-status-color: #7a6248;
  --chat-bubble-mine-bg: #f3c8d0;
  --chat-bubble-mine-color: #4a2530;
  --chat-bubble-mine-border: rgba(74, 37, 48, 0.15);
  --chat-bubble-theirs-bg: #f1e7d0;
  --chat-bubble-theirs-color: #3d2b1a;
  --chat-bubble-theirs-border: rgba(61, 43, 26, 0.18);
  --chat-divider-color: #8a6d4a;
  --chat-font: 'Segoe Script', 'Bradley Hand', cursive;
}

/* ☁️ Cielo — foto real de cielo azul con nubes */
#chatPanel[data-chat-theme="daysky"], #chatPeekMessages[data-chat-theme="daysky"] {
  --chat-bg: url("img/chat-themes/daysky.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #2f5a86;
  --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.6);
  --chat-bubble-theirs-bg: #ffffff;
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(11, 42, 74, 0.12);
  --chat-divider-color: #ffffff;
}

/* 💜 Chispas moradas */
#chatPanel[data-chat-theme="purpleSpark"], #chatPeekMessages[data-chat-theme="purpleSpark"] {
  --chat-bg:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 1%),
    radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 1.2%),
    radial-gradient(circle at 60% 42%, rgba(216, 180, 254, 0.9) 0%, transparent 1%),
    radial-gradient(circle at 30% 68%, rgba(255, 255, 255, 0.7) 0%, transparent 0.8%),
    radial-gradient(circle at 90% 78%, rgba(216, 180, 254, 0.8) 0%, transparent 1%),
    radial-gradient(circle at 45% 88%, rgba(255, 255, 255, 0.6) 0%, transparent 0.8%),
    radial-gradient(circle at 8% 55%, rgba(216, 180, 254, 0.7) 0%, transparent 0.9%),
    linear-gradient(160deg, #3b0764 0%, #6d28d9 55%, #8b5cf6 100%);
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(233, 213, 255, 0.8);
  --chat-bubble-mine-bg: linear-gradient(135deg, #a855f7, #7c3aed);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(233, 213, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12);
  --chat-bubble-theirs-color: #f5f0ff;
  --chat-bubble-theirs-border: rgba(233, 213, 255, 0.3);
  --chat-divider-color: #d8b4fe;
  --chat-icon-color: #d8b4fe;
}

/* 🩷 Nubes rosa */
#chatPanel[data-chat-theme="pinkClouds"], #chatPeekMessages[data-chat-theme="pinkClouds"] {
  --chat-bg:
    radial-gradient(ellipse 60% 30% at 20% 22%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 50% 25% at 78% 15%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 55% 28% at 60% 58%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 45% 22% at 15% 80%, rgba(255, 255, 255, 0.4), transparent 70%),
    linear-gradient(180deg, #ffd6e8 0%, #ffb3d1 55%, #ff8fc0 100%);
  --chat-header-color: #7a1440;
  --chat-header-status-color: #b23566;
  --chat-bubble-mine-bg: linear-gradient(135deg, #fb7185, #ec4899);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(122, 20, 64, 0.15);
  --chat-bubble-theirs-bg: #ffffff;
  --chat-bubble-theirs-color: #7a1440;
  --chat-bubble-theirs-border: rgba(122, 20, 64, 0.1);
  --chat-divider-color: #ff5c9e;
  --chat-icon-color: #d6336c;
}

/* 🌀 Vórtice espacial */
#chatPanel[data-chat-theme="spaceVortex"], #chatPeekMessages[data-chat-theme="spaceVortex"] {
  --chat-bg:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
    conic-gradient(from 0deg at 50% 45%, #1e1b4b, #4c1d95, #2563eb, #7c3aed, #1e1b4b);
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(196, 181, 253, 0.8);
  --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #7c3aed);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(196, 181, 253, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.1);
  --chat-bubble-theirs-color: #ece9ff;
  --chat-bubble-theirs-border: rgba(196, 181, 253, 0.3);
  --chat-divider-color: #a5b4fc;
  --chat-icon-color: #a5b4fc;
}

/* 🖤 Negro y oro — geométrico */
#chatPanel[data-chat-theme="blackGold"], #chatPeekMessages[data-chat-theme="blackGold"] {
  --chat-bg:
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.12) 0px, rgba(212, 175, 55, 0.12) 1px, transparent 1px, transparent 38px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.12) 0px, rgba(212, 175, 55, 0.12) 1px, transparent 1px, transparent 38px),
    linear-gradient(180deg, #0a0a0a, #161113);
  --chat-header-color: #e4c568;
  --chat-header-status-color: rgba(228, 197, 104, 0.7);
  --chat-bubble-mine-bg: linear-gradient(135deg, #b8862d, #e4c568);
  --chat-bubble-mine-color: #1a1305;
  --chat-bubble-mine-border: rgba(228, 197, 104, 0.6);
  --chat-bubble-theirs-bg: #1c1a16;
  --chat-bubble-theirs-color: #f0e6c8;
  --chat-bubble-theirs-border: rgba(228, 197, 104, 0.35);
  --chat-divider-color: #d4af37;
  --chat-icon-color: #d4af37;
}

/* 🔮 Onda morada */
#chatPanel[data-chat-theme="purpleWave"], #chatPeekMessages[data-chat-theme="purpleWave"] {
  --chat-bg:
    radial-gradient(circle at 15% 15%, rgba(96, 165, 250, 0.35), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.3), transparent 45%),
    radial-gradient(circle at 50% 88%, rgba(168, 85, 247, 0.35), transparent 50%),
    linear-gradient(135deg, #2e1065, #5b21b6 50%, #7c3aed 100%);
  --chat-header-color: #ffffff;
  --chat-header-status-color: rgba(221, 214, 254, 0.8);
  --chat-bubble-mine-bg: linear-gradient(135deg, #ec4899, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(221, 214, 254, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12);
  --chat-bubble-theirs-color: #f4f0ff;
  --chat-bubble-theirs-border: rgba(221, 214, 254, 0.3);
  --chat-divider-color: #ddd6fe;
  --chat-icon-color: #ddd6fe;
}

/* ✏️ Doodle neón */
#chatPanel[data-chat-theme="neonDoodle"], #chatPeekMessages[data-chat-theme="neonDoodle"] {
  --chat-bg:
    radial-gradient(circle at 20% 25%, rgba(244, 114, 182, 0.5) 0%, transparent 2%),
    radial-gradient(circle at 70% 15%, rgba(244, 114, 182, 0.4) 0%, transparent 1.5%),
    radial-gradient(circle at 40% 60%, rgba(232, 121, 249, 0.4) 0%, transparent 1.5%),
    radial-gradient(circle at 85% 70%, rgba(244, 114, 182, 0.45) 0%, transparent 2%),
    radial-gradient(circle at 15% 85%, rgba(232, 121, 249, 0.35) 0%, transparent 1.5%),
    linear-gradient(180deg, #0d0611, #1a0e22);
  --chat-header-color: #f472b6;
  --chat-header-status-color: rgba(244, 114, 182, 0.7);
  --chat-bubble-mine-bg: linear-gradient(135deg, #db2777, #e879f9);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(244, 114, 182, 0.6);
  --chat-bubble-theirs-bg: #1c1520;
  --chat-bubble-theirs-color: #f5e5f0;
  --chat-bubble-theirs-border: rgba(244, 114, 182, 0.35);
  --chat-divider-color: #f472b6;
  --chat-icon-color: #f472b6;
}

/* 🩵 Acuarela turquesa */
#chatPanel[data-chat-theme="tealWatercolor"], #chatPeekMessages[data-chat-theme="tealWatercolor"] {
  --chat-bg:
    radial-gradient(ellipse 55% 30% at 25% 20%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 50% 30% at 75% 50%, rgba(45, 212, 191, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 30% at 35% 82%, rgba(20, 184, 166, 0.3), transparent 70%),
    linear-gradient(180deg, #ccfbf1, #5eead4 60%, #2dd4bf 100%);
  --chat-header-color: #0f766e;
  --chat-header-status-color: #0d9488;
  --chat-bubble-mine-bg: linear-gradient(135deg, #14b8a6, #0d9488);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(15, 118, 110, 0.2);
  --chat-bubble-theirs-bg: #ffffff;
  --chat-bubble-theirs-color: #0f766e;
  --chat-bubble-theirs-border: rgba(15, 118, 110, 0.1);
  --chat-divider-color: #0d9488;
  --chat-icon-color: #0f766e;
}

/* 🔴 Tech rojo */
#chatPanel[data-chat-theme="redTech"], #chatPeekMessages[data-chat-theme="redTech"] {
  --chat-bg:
    repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.08) 0px, rgba(239, 68, 68, 0.08) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0px, rgba(239, 68, 68, 0.08) 1px, transparent 1px, transparent 32px),
    radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.25), transparent 60%),
    #050505;
  --chat-header-color: #ef4444;
  --chat-header-status-color: rgba(239, 68, 68, 0.7);
  --chat-bubble-mine-bg: linear-gradient(135deg, #7f1d1d, #ef4444);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: #ef4444;
  --chat-bubble-theirs-bg: #161616;
  --chat-bubble-theirs-color: #f5f5f5;
  --chat-bubble-theirs-border: rgba(239, 68, 68, 0.4);
  --chat-divider-color: #ef4444;
  --chat-icon-color: #ef4444;
}

/* 🌿 Floral lavanda */
#chatPanel[data-chat-theme="lavenderFloral"], #chatPeekMessages[data-chat-theme="lavenderFloral"] {
  --chat-bg:
    radial-gradient(circle at 20% 20%, rgba(196, 181, 253, 0.5), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(216, 180, 254, 0.45), transparent 45%),
    radial-gradient(circle at 50% 78%, rgba(167, 243, 208, 0.4), transparent 45%),
    linear-gradient(180deg, #f5f3ff, #ede9fe 60%, #e0e7ff 100%);
  --chat-header-color: #5b21b6;
  --chat-header-status-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #a78bfa, #7c3aed);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(91, 33, 182, 0.2);
  --chat-bubble-theirs-bg: #ffffff;
  --chat-bubble-theirs-color: #4c1d95;
  --chat-bubble-theirs-border: rgba(91, 33, 182, 0.12);
  --chat-divider-color: #a78bfa;
  --chat-icon-color: #7c3aed;
}

/* Tarjetas de conversación (lista, panel izquierdo) */
.mp-conversation-list {
  list-style: none;
  margin: 0;
  padding: 0 0.6rem 0.7rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-conversation-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-lg, 14px);
  cursor: pointer;
  border: 1px solid transparent;
  border-left: 3px solid var(--conv-accent, transparent);
  /* Pedido explícito con captura de referencia: cada fila es una tarjeta
     clara propia, no una línea plana -- antes solo tenía fondo al pasar
     el mouse/estar activa. Con el panel ahora blanco (ver .mp-conv-panel),
     un gris clarito en vez de blanco translúcido para que la tarjeta se
     siga notando como tarjeta y no se pierda contra el fondo. */
  background: var(--panel-3);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  /* Mismo motivo que .mp-chat-bubble: mantener presionada la fila (para
     que aparezca la vista previa, ver attachHoldToPeek en client.js) no
     debe disparar A LA VEZ el selector de texto nativo del navegador
     (que pinta todo de celeste, como si se fuera a copiar). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mp-conversation-card:hover {
  background: rgba(79, 168, 240, 0.1);
}

.mp-conversation-card.active {
  background: rgba(79, 168, 240, 0.16);
  border-color: rgba(79, 168, 240, 0.4);
  border-left-color: var(--conv-accent, rgba(79, 168, 240, 0.4));
  box-shadow: 0 0 0 1px rgba(79, 168, 240, 0.12), 0 6px 18px -10px rgba(79, 168, 240, 0.6);
}

/* Anillo de color alrededor del avatar y puntito degradado debajo de la
   tarjeta — mismo --conv-accent que la barrita de la izquierda, puramente
   visual (ver conversationAccentColor() en client.js). */
.mp-conversation-card .mp-conversation-card-avatar-wrap {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--conv-accent, transparent);
}

.mp-conversation-card-accent-dot {
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--conv-accent, transparent);
  transform: translateX(-50%);
  opacity: 0.8;
}

/* Diseños de chat con emoji decorativo entre tarjetas (💗 Rosa, ⚽ Azul
   deportivo, ver CHAT_LIST_THEME_CONFIG) — reemplaza el puntito de color
   liso por el emoji del tema. */
.mp-conversation-card-accent-emoji {
  width: auto;
  height: auto;
  bottom: -0.55rem;
  background: none;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 1;
}

/* Recolorea las pestañas de filtro y la barra/anillo de las tarjetas SOLO
   dentro de la lista de chats — el resto de la app se queda con el color
   de acento que la persona eligió en Configuración → Apariencia.
   --gradient también se redefine acá a propósito, no solo --accent-a/b:
   es una variable calculada ("linear-gradient(... var(--accent-a) ...
   var(--accent-b))") definida en :root — un var() dentro del VALOR de
   otra variable se resuelve donde esa otra variable se declaró, no donde
   se usa, así que sin redeclararla también acá .mp-conv-filter-pill.active
   (que lee var(--gradient)) seguía mostrando el degradado heredado de
   :root sin importar qué --accent-a/b se pusiera aquí abajo. */
.mp-conv-panel[data-chat-list-theme="classic"] {
  --accent-a: #3b82f6;
  --accent-b: #2563eb;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
}

.mp-conv-panel[data-chat-list-theme="compact"] {
  --accent-a: #8b5cf6;
  --accent-b: #7c3aed;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  --panel-solid: #7c3aed;
}

.mp-conv-panel[data-chat-list-theme="cards"] {
  --accent-a: #10b981;
  --accent-b: #059669;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
}

.mp-conv-panel[data-chat-list-theme="bubbles"] {
  --accent-a: #ec4899;
  --accent-b: #db2777;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  --panel-solid: #fce7f3;
}

/* "Oscuro" es el único de los 6 que necesita volver a poner los tokens de
   texto/superficie en su versión oscura — .mp-conv-panel (arriba) los deja
   todos en claro por defecto para los otros 5. */
.mp-conv-panel[data-chat-list-theme="dark"] {
  --accent-a: #8b5cf6;
  --accent-b: #7c3aed;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  --panel-solid: #0f172a;
  --panel-2: #1e293b;
  --panel-3: #273449;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f1f5f9;
  --text-dim: #94a3b8;
  --text-dimmer: #64748b;
}

.mp-conv-panel[data-chat-list-theme="minimal"] {
  --accent-a: #f59e0b;
  --accent-b: #d97706;
  --gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
}

/* Tarjetas "flotando", separadas con sombra, en vez de filas pegadas con
   solo una línea/hover entre ellas — Compacto, Tarjetas, Burbujas y Oscuro
   lo usan (ver .boxed en renderConversationCard(), client.js). */
.mp-conversation-card.boxed {
  background: var(--panel-2);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.18);
  margin-bottom: 0.15rem;
}

.mp-conversation-card-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.mp-conversation-card-avatar-wrap .mp-friend-online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  border: 2px solid var(--panel-solid);
  margin: 0;
}

.mp-online-avatar-img {
  display: block;
  line-height: 0;
  cursor: pointer;
}

.mp-conversation-card-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.mp-conv-card-fav-btn,
.mp-conv-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-dimmer);
  cursor: pointer;
}

.mp-conv-card-fav-btn svg,
.mp-conv-card-menu-btn svg {
  flex-shrink: 0;
}

.mp-conv-card-fav-btn:hover,
.mp-conv-card-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.mp-conv-card-fav-btn.active {
  color: var(--gold);
}


/* --- Perfil de otra persona --- */
.mp-public-profile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0;
}

#publicProfileBackBtn,
.mp-post-detail-menu-wrap {
  flex-shrink: 0;
}

/* Sin fondo propio, un ícono blanco sobre transparente casi no se ve acá
   arriba: el fondo de este topbar no es el panel oscuro sólido de siempre,
   sino el degradé claro de la foto de portada — contra eso, tanto la
   flecha de volver como el "⋮" quedaban prácticamente invisibles (no solo
   difíciles de encontrar: no se distinguían del fondo). Un círculo
   translúcido les da contraste sin delatar si el modo privado está
   activado o no (eso solo se ve adentro del menú). */
#publicProfileBackBtn,
#publicProfileMenuBtn {
  background: rgba(255, 255, 255, 0.1);
}

#publicProfileBackBtn:hover,
#publicProfileMenuBtn:hover {
  background: rgba(255, 255, 255, 0.18);
}

#publicProfileMenu {
  top: calc(100% + 4px);
  bottom: auto;
  right: 0;
}

/* Perfil de otra persona: avatar a la izquierda (no centrado como en "Mi
   perfil") junto al nombre/ubicación, con el puntito de en línea encima
   del avatar — estilo tarjeta de perfil social en vez de layout centrado. */
.mp-public-profile-header-row {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  padding: 0 1.1rem;
  margin-top: -2.6rem;
}

.mp-public-profile-header-row .mp-avatar-wrap {
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.mp-public-profile-online-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 2px solid var(--panel-solid);
}

.mp-public-profile-header-info {
  flex: 1;
  min-width: 0;
  padding-bottom: 0.2rem;
}

.mp-public-profile-header-info h1 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.mp-public-profile-header-info .note {
  margin-top: 0.2rem;
}

.mp-public-profile-actions {
  display: flex;
  justify-content: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0 1.1rem;
  margin-top: 0.9rem;
}

.mp-public-profile-actions button {
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  width: auto;
  background: var(--gradient);
  box-shadow: 0 6px 18px -6px rgba(124, 108, 240, 0.55);
}

.mp-public-profile-actions button:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  box-shadow: none;
}

.mp-friend-request-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.mp-conversation-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mp-conversation-card-top,
.mp-conversation-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mp-conversation-card-name {
  font-weight: 700;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-conversation-card-time {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--text-dimmer);
}

.mp-conversation-card-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mp-conversation-card.unread .mp-conversation-card-preview {
  color: var(--text);
  font-weight: 600;
}

/* Pedido explícito: "Última vez" cuando la persona no está en línea. */
.mp-conversation-card-lastseen {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dimmer);
  margin: -0.05rem 0 0.1rem;
}

/* Pedido explícito: en vez del numerito pelado en un círculo, texto
   "N mensajes" en lila/morado, tamaño chico (no un numerito enorme). */
.mp-conversation-card-unread-badge {
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
  color: white;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatPanel .mp-chat-head strong,
#chatPanel .note {
  color: white;
}

#chatPanel .mp-btn-outline {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

#chatPanel .mp-btn-outline:hover {
  background: rgba(255, 255, 255, 0.24);
}

.mp-chat-bubble p {
  margin: 0;
}

.mp-chat-bubble-media {
  padding: 4px;
}

.mp-chat-bubble-media p {
  padding: 0.4rem 0.4rem 0.1rem;
}

.mp-chat-media {
  display: block;
  max-width: 220px;
  max-height: 280px;
  border-radius: calc(var(--radius-md) - 4px);
  object-fit: cover;
  cursor: pointer;
  /* Dificulta "guardar imagen" desde el menú de mantener presionado en
     celular (no lo puede impedir del todo -- ninguna página web puede). */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#chatMediaViewerContent img, #chatMediaViewerContent video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#chatMediaViewerModal .mp-modal-close {
  position: absolute;
  top: calc(0.8rem + env(safe-area-inset-top));
  left: calc(0.8rem + env(safe-area-inset-left));
  z-index: 6;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

#chatMediaViewerModal .mp-modal-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.mp-chat-media-viewer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.mp-chat-media-viewer-content img,
.mp-chat-media-viewer-content video {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.mp-chat-bubble-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.2rem;
  margin-top: 0.25rem;
}

.mp-chat-reply-btn,
.mp-chat-menu-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.mp-chat-reply-btn:hover,
.mp-chat-menu-btn:hover {
  opacity: 1;
}

/* Menú al mantener presionado un mensaje (Reenviar/Copiar/Eliminar) --
   reemplaza el desplegable chico que vivía acá antes (ver
   openMessageActionSheet en client.js, pedido explícito estilo iPhone). */
/* Sin "inset:0" a propósito -- pedido explícito: el fondo difuminado debe
   quedar DENTRO de la conversación (el panel del chat), no tapar el resto
   de la pantalla (barra superior, barra inferior, lista de chats). El
   tamaño/posición reales los pone openMessageActionSheet() en JS, contra
   el panel del chat que corresponda en cada caso. */
.mp-msg-action-overlay {
  position: fixed;
  /* 300 se quedaba DEBAJO de .mp-chat-open .mp-chat-panel-container (el
     chat a pantalla completa en celular, z-index:500) -- por eso "no
     aparecía dentro de la conversación": estaba ahí, pero tapado por el
     chat, y recién se veía al salir de la conversación (cuando ese
     z-index:500 desaparecía). Con 900 queda por encima del chat siempre,
     sin pisar sidebar/barra inferior/llamada entrante (esos usan 1998+). */
  z-index: 900;
  background: rgba(10, 10, 20, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
}

.mp-msg-action-overlay.hidden {
  display: none;
}

.mp-msg-action-bubble-preview {
  position: fixed;
  transform: scale(1);
  transition: transform 0.18s ease;
  pointer-events: none;
}

/* La burbuja clonada puede ser un <li> (chat personal) fuera de su <ul>
   original -- sin esto le aparecería un punto de lista de la nada. */
.mp-msg-action-bubble-preview li {
  list-style: none;
  display: block;
}

.mp-msg-action-bubble-preview.popped {
  transform: scale(1.04);
}

.mp-msg-action-menu {
  position: fixed;
  min-width: 220px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  background: rgba(40, 40, 52, 0.92);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  animation: mp-msg-action-menu-in 0.16s ease;
}

@keyframes mp-msg-action-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mp-msg-action-menu button {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.mp-msg-action-menu button:last-child {
  border-bottom: none;
}

.mp-msg-action-menu button:active {
  background: rgba(255, 255, 255, 0.1);
}

.mp-msg-action-menu .mp-msg-action-danger {
  color: #ff6b6b;
}

/* Barra de reacciones rápidas, arriba del mensaje "levantado". */
.mp-msg-reaction-bar {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(40, 40, 52, 0.92);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: mp-msg-action-menu-in 0.16s ease;
}

.mp-msg-reaction-opt {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.mp-msg-reaction-opt:active {
  transform: scale(1.15);
}

.mp-msg-reaction-opt.selected::after {
  content: '';
  position: absolute;
  bottom: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #fff;
}

.mp-msg-reaction-more {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
}

/* Insignia con la(s) reacción(es) ya puestas, pegada a la esquina de la
   burbuja -- a lo sumo 2 en un chat 1 a 1 (una por persona). */
.mp-msg-reaction-badge {
  position: absolute;
  bottom: -0.55rem;
  right: 0.4rem;
  background: var(--panel-solid-2, #2a2a38);
  border: 2px solid var(--bg, #14141c);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.3rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

.mp-chat-bubble.mine .mp-msg-reaction-badge,
.mp-biz-chat-bubble.mine .mp-msg-reaction-badge {
  right: auto;
  left: 0.4rem;
}

#customReactionInput {
  width: 100%;
  padding: 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
  margin: 0.6rem 0;
}

/* Pedido explícito: "que se vea en negrilla los mensajes que se
   responden... que resalte un poquito más". */
.mp-chat-reply-quote {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.9;
  border-left: 3px solid currentColor;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.3rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-chat-viewonce {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px dashed currentColor;
  opacity: 0.85;
}

.mp-chat-viewonce-tap {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-family: inherit;
}

.mp-chat-viewonce-tap:hover {
  background: rgba(255, 255, 255, 0.16);
}

.mp-chat-viewonce-consumed {
  opacity: 0.5;
}

.mp-chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: white;
}

.mp-chat-reply-preview.hidden {
  display: none;
}

.mp-chat-reply-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  overflow: hidden;
}

#chatReplyPreviewText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#chatReplyPreviewCancel {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  padding: 0.2rem;
}

#chatPanel .mp-chat-bubble {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.6);
  color: #0f1620;
  border-bottom-left-radius: 4px;
  animation: mpBubbleIn 0.22s var(--ease);
}

#chatPanel .mp-chat-bubble.mine {
  background: linear-gradient(135deg, #1b4f91, #2f6fb8);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: 4px;
}

@keyframes mpBubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mp-chat-date-separator {
  display: flex;
  justify-content: center;
  margin: 0.9rem 0;
}

.mp-chat-date-separator span {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  text-transform: capitalize;
}

.mp-chat-bubble-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.15rem;
}

/* Pedido explícito: la hora va AL LADO del mensaje (pegada al final del
   propio texto, misma línea si entra), no en una fila aparte debajo. */
.mp-chat-bubble-meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  margin-left: 0.4rem;
}

.mp-chat-bubble-time {
  font-size: 0.68rem;
  opacity: 0.6;
}

/* Confirmación de enviado/leído (ticks), en mis propios mensajes */
.mp-chat-ticks {
  display: inline-flex;
  margin-left: 0.3rem;
  vertical-align: -2px;
  opacity: 0.75;
}

.mp-chat-ticks.read {
  color: #5fd0ff;
  opacity: 1;
}

/* Pedido explícito: además de los 2 chulitos celestes, la palabra "Leído"
   visible en el propio mensaje una vez que se vio. */
.mp-chat-read-label {
  font-size: 0.68rem;
  color: #5fd0ff;
  margin-left: 0.15rem;
}

/* Burbuja "está escribiendo..." con puntitos animados */
.mp-chat-typing-bubble {
  display: inline-flex;
  padding: 0.65rem 0.9rem;
}

.mp-chat-typing-dots {
  display: inline-flex;
  gap: 4px;
}

.mp-chat-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation: mpTypingBounce 1.2s infinite ease-in-out;
}

.mp-chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.mp-chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes mpTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Barra para escribir */
.mp-chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}

/* Ancho/alto explícitos (no solo flex-shrink:0): en algunos WebView de
   Android este wrapper heredaba el ancho de #chatEmojiPicker (240px, el
   panel de emojis) aunque estuviera con display:none y position:absolute
   — le comía casi todo el espacio a la barra y dejaba el campo de texto
   colapsado a unos pocos píxeles (el texto se partía letra por letra). */
.mp-chat-input-emoji-wrap {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  /* Refuerzo del ancho/alto explícitos de arriba: aísla por completo el
     layout de adentro (el panel/menú desplegable) para que no pueda
     "filtrarse" hacia afuera y afectar el cálculo de ancho de la fila,
     pase lo que pase con el motor de renderizado. */
  contain: layout;
}

.mp-chat-input-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: background 0.16s var(--ease);
}

.mp-chat-input-icon:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mp-chat-input-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* "1" para marcar el audio grabado como "escuchar una sola vez", pedido
   explícito -- apagado por default en cada grabación nueva (ver
   startRecording en client.js), se prende/apaga tocándolo mientras se
   graba, antes de mandar. */
.mp-chat-viewonce-toggle {
  font-weight: 800;
  font-size: 0.9rem;
}

/* !important: css/global-light-theme.css pinta TODOS los .mp-chat-input-icon
   de un mismo gris claro con !important -- sin igualarlo acá, el "1"
   prendido no se distinguía del resto de los botones apagados. */
.mp-chat-viewonce-toggle.active {
  background: var(--gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(124, 108, 240, 0.55) !important;
}

/* #messagesView #chatPanel .mp-chat-input-icon (más arriba) fuerza el
   color/borde de TODOS los íconos de la barra de escribir al color de
   acento del tema de chat activo con !important -- sin este empate acá,
   el "1" prendido dejaba de verse blanco en varios de esos temas. */
#messagesView #chatPanel .mp-chat-viewonce-toggle.active {
  color: #fff !important;
  border-color: transparent !important;
}

.mp-chat-input-bar textarea#chatInput {
  flex: 1 1 auto;
  /* Piso de seguridad: nunca debe poder colapsar por debajo de esto, pase
     lo que pase con el resto de la fila (ver por qué en el comentario de
     .mp-chat-input-emoji-wrap más arriba). Con el ícono de mic/enviar
     compartiendo un solo lugar (nunca los dos juntos, ver
     updateChatSendMicVisibility en client.js) sobra ancho real de sobra
     incluso en un celular angosto — esto es un piso de más, no lo que
     define el ancho normal. */
  min-width: 100px;
  /* ~44-48px de una línea (pedido explícito) hasta un máximo de ~6 líneas
     — pasado eso, scrollea adentro en vez de seguir creciendo. El alto
     real lo ajusta el JS (autoGrowChatInput) leyendo scrollHeight en cada
     input. */
  min-height: 44px;
  max-height: 132px;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.92);
  color: #000000;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.35;
  resize: none;
  overflow-y: hidden;
}

.mp-chat-input-bar textarea#chatInput:focus {
  outline: none;
  border-color: var(--accent-b);
}

.mp-chat-send-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mp-chat-send-btn svg {
  width: 21px;
  height: 21px;
}

.mp-chat-emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 240px;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
  padding: 0.6rem;
  background: #1c1c28;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

.mp-chat-emoji-picker.hidden {
  display: none;
}

.mp-chat-emoji-picker button {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
}

.mp-chat-emoji-picker button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Menú de "Adjuntar" (Galería/Cámara/Documento): mismo criterio que el
   selector de emojis (abre hacia arriba, left:0 para no salirse de la
   pantalla por izquierda — el botón está cerca del borde). */
#chatAttachMenu {
  bottom: calc(100% + 8px);
  top: auto;
  left: 0;
  right: auto;
  min-width: 190px;
}

.mp-chat-attach-menu button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.mp-chat-attach-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  color: white;
}

.mp-chat-attach-menu-icon svg {
  flex-shrink: 0;
}

.mp-chat-attach-menu-icon-gallery { background: #a855f7; }
.mp-chat-attach-menu-icon-camera { background: #ec4899; }
.mp-chat-attach-menu-icon-document { background: #4fa8e8; }
.mp-chat-attach-menu-icon-contact { background: #f59e0b; }
.mp-chat-attach-menu-icon-location { background: #10b981; font-size: 0.85rem; }

/* Barra de grabación de audio (reemplaza la barra de escribir mientras se graba) */
.mp-chat-recording-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.mp-chat-recording-bar.hidden {
  display: none;
}

.mp-chat-recording-indicator {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.85rem;
}

#chatRecordingTimer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.mp-chat-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5b5b;
  animation: mpRecordPulse 1.2s infinite ease-in-out;
}

@keyframes mpRecordPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Burbuja de audio */
.mp-chat-audio {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 40px;
}

.mp-chat-document {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 220px;
  max-width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: calc(var(--radius-md) - 4px);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  text-decoration: none;
}

.mp-chat-document-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #4fa8e8;
  color: white;
  flex-shrink: 0;
}

.mp-chat-document-icon svg {
  flex-shrink: 0;
}

.mp-chat-document-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.mp-friend-online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dimmer);
  display: inline-block;
  margin-right: 0.5rem;
}

.mp-friend-online-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(53, 214, 142, 0.18);
}

/* ===== Crear: menú de opciones ===== */
.mp-create-subtitle {
  margin: 0.2rem 0 0;
}

.mp-create-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.mp-create-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease);
}

.mp-create-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.mp-create-option strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}

.mp-create-option.disabled,
.mp-create-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mp-create-option-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: white;
}

.mp-create-option-icon-video { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.mp-create-option-icon-photo { background: linear-gradient(135deg, #4fa8f0, #2f6fd9); }
.mp-create-option-icon-live { background: linear-gradient(135deg, #f0507c, #d92b4f); }

.mp-create-option-chevron {
  display: none;
  flex-shrink: 0;
  color: var(--text-dimmer);
}

@media (max-width: 720px) {
  .mp-create-menu {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Sin borde ni fondo de tarjeta acá: el título grande "Crear" y las
     filas de opciones quedan directo sobre el fondo de la app, como la
     referencia — no como un panel flotando en medio de la pantalla. */
  #createMenuView.mp-card {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 1.5rem 1.1rem;
  }

  #createMenuView .mp-panel-head h3 {
    font-size: 1.6rem;
    font-weight: 800;
  }

  .mp-create-option {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
  }

  .mp-create-option-chevron {
    display: block;
    margin-left: auto;
  }
}

#createVideoInput {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

@media (max-width: 960px) {
  .mp-stats-row, .mp-two-col, .mp-achv-grid, .mp-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mp-balance-row {
    grid-template-columns: 1fr;
  }
}

/* Barra superior móvil estilo Facebook: hamburguesa + "Yu" (texto, sin
   logo) a la izquierda, accesos rápidos a la derecha. Reemplaza la
   hamburguesa suelta que quedaba flotando sola arriba a la izquierda. */
.mp-mobile-topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mobile-topbar-h);
  padding: 0 1rem;
  padding-top: env(safe-area-inset-top);
  background: rgba(10, 8, 18, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232, 177, 61, 0.14);
  z-index: 2001;
}

.mp-mobile-topbar-brand {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  background: linear-gradient(135deg, #fff2cf 0%, var(--gold) 55%, #c98a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(232, 177, 61, 0.35));
}

.mp-mobile-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.mp-mobile-topbar-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.mp-mobile-topbar-icon:active {
  transform: scale(0.92);
  border-color: rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
}

.mp-mobile-topbar-icon .mp-nav-badge {
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
}

.mp-search-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
}

.mp-mobile-topbar-icon:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.6);
}

.mp-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(232, 177, 61, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.mp-menu-toggle:hover {
  background: rgba(232, 177, 61, 0.14);
  border-color: rgba(232, 177, 61, 0.6);
}

.mp-menu-toggle:active {
  transform: scale(0.92);
  box-shadow: 0 0 12px rgba(232, 177, 61, 0.4);
}

.mp-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1999;
}

/* ===== Barra inferior + FAB (móvil) ===== */
.mp-bottomnav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1998;
  justify-content: space-around;
  align-items: center;
  padding: 0.55rem 0.25rem calc(0.55rem + env(safe-area-inset-bottom));
  /* Sólido del todo (opacity: 1), no transparente de verdad: con opacidad
     real, como estaba antes, se veían nombres y botones de las
     publicaciones mezclados debajo cuando el feed llegaba justo hasta el
     borde — mismo problema que se corrigió antes en el menú lateral. El
     look "glass" acá viene del degradado y el borde superior luminoso, no
     de dejar ver el contenido de atrás. */
  background: linear-gradient(180deg, #120e1e 0%, #0a0714 100%);
  border-top: 1px solid rgba(232, 177, 61, 0.18);
  box-shadow: 0 -8px 24px -12px rgba(139, 92, 246, 0.25);
}

.mp-bottomnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-dimmer);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  position: relative;
  padding: 0.2rem 0.6rem;
}

.mp-bottomnav-item::after {
  content: '';
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 22px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--yu-purple);
  box-shadow: 0 0 8px var(--yu-purple);
  transition: transform 0.18s var(--ease);
}

.mp-bottomnav-item.active {
  background: var(--gradient-yu);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-bottomnav-item.active::after {
  transform: translateX(-50%) scaleX(1);
}

#bottomNavInicio.active {
  background: linear-gradient(135deg, #fff2cf 0%, var(--gold) 60%, #c98a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#bottomNavInicio.active::after {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

#bottomNavInicio.active svg {
  stroke: var(--gold) !important;
}

.mp-bottomnav-item.active svg {
  stroke: var(--yu-purple);
}

.mp-bottomnav-item .mp-nav-badge {
  position: absolute;
  top: -0.1rem;
  right: 0.1rem;
}

/* Pedido explícito: dio marcha atrás a todo el experimento de arriba
   (varios intentos de que la barra de VYNKO y la de Inicio compartieran
   el lila/celeste de la lista) -- mejor blanco, simple, igual al resto de
   la app. Con esto quitado, las dos vuelven de lleno al blanco que ya les
   pone css/global-light-theme.css (el mismo de siempre en toda la app),
   sin ningún override propio acá -- de paso, la franja que se veía antes
   (fondo de <body> asomando por un desajuste de altura) deja de notarse
   sola, porque ahora es blanco sobre blanco en vez de blanco sobre lila. */

.mp-fab {
  display: none;
  position: fixed;
  right: 1.1rem;
  bottom: calc(4.4rem + env(safe-area-inset-bottom));
  z-index: 1998;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient);
  color: white;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
  border: none;
  cursor: pointer;
}

/* El botón base (button:hover en style.css) tiene más especificidad que
   estas clases y, en dispositivos con mouse real, pintaría de azul encima
   de los degradados nuevos al pasar el cursor — se restaura el fondo
   propio de cada uno explícitamente, igual que se hizo para el bug del
   "azul pegado" en historias/Más. */
@media (hover: hover) {
  .mp-home-card:hover { background: var(--panel-solid); }
  .mp-home-wallet:hover { background: var(--panel-3); }
  .mp-home-icon-btn:hover { background: var(--panel-3); }
}

.mp-location-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.mp-location-form .field-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  gap: 0.3rem;
}

.mp-location-form input {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
  font-size: 16px;
}

.mp-location-form #locationMessage {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 640px) {
  .mp-location-form {
    grid-template-columns: 1fr;
  }
}

.mp-settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}

.mp-settings-toggle-row strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}

.mp-settings-toggle-row .note {
  margin: 0;
}

.mp-settings-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.16s var(--ease);
}

.mp-settings-toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 0.16s var(--ease);
}

.mp-settings-toggle-row input[type="checkbox"]:checked {
  background: var(--gradient);
  border-color: transparent;
}

.mp-settings-toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

.mp-settings-subhead {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.95rem;
  color: var(--text);
}

.mp-settings-subhead:first-of-type {
  margin-top: 0.2rem;
}

.mp-settings-subhead-danger {
  color: #ff6b6b;
}

/* ===== Configuración: acordeón (pedido explícito: cada tema en su propio
   contenedor, se despliega al tocarlo, en vez de todo junto en un solo
   panel largo) ===== */
.mp-settings-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-settings-accordion-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mp-settings-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}

.mp-settings-accordion-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-settings-accordion-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mp-settings-accordion-title strong {
  font-size: 0.92rem;
}

.mp-settings-accordion-title .note {
  font-size: 0.76rem;
}

.mp-settings-accordion-chevron {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}

.mp-settings-accordion-item.open .mp-settings-accordion-chevron {
  transform: rotate(90deg);
}

.mp-settings-accordion-body {
  padding: 0.2rem 1rem 1.1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.mp-settings-accordion-item-danger .mp-settings-accordion-title strong {
  color: #ff6b6b;
}

.mp-settings-legal-links {
  text-align: center;
  margin-top: 0.2rem;
}

.mp-settings-plus-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-yu);
  color: white;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.mp-chat-customize-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-chat-customize-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.mp-chat-customize-row:hover {
  background: var(--panel-3);
  border-color: var(--border-strong);
}

.mp-chat-customize-row-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
}

.mp-chat-customize-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mp-chat-customize-row-text strong {
  font-size: 0.9rem;
}

.mp-chat-customize-row svg {
  flex-shrink: 0;
  color: var(--text-dim);
}

/* Modal selector de temas de chat */
.mp-chat-theme-picker-box {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.3rem;
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  margin: auto;
}

.mp-chat-theme-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.mp-chat-theme-picker-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.mp-chat-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.mp-chat-theme-credits {
  margin-top: 1.1rem;
  font-size: 0.68rem;
  line-height: 1.4;
  opacity: 0.7;
}

/* Compartir contacto (respaldo manual) */
.mp-contact-fallback-box {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.3rem;
  width: min(360px, 92vw);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-contact-fallback-box input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.95rem;
}

/* Burbuja de ubicación (actual o en vivo) dentro del chat */
.mp-chat-location {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem;
  min-width: 220px;
}

.mp-chat-location-map {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.5), rgba(37, 99, 235, 0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.mp-chat-location.is-live .mp-chat-location-map {
  background: radial-gradient(circle at 30% 30%, rgba(239, 68, 68, 0.55), rgba(220, 38, 38, 0.25));
}

.mp-chat-location-live-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--panel-solid, #fff);
  animation: mpLocationPulse 1.4s ease-in-out infinite;
}

@keyframes mpLocationPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

.mp-chat-location-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mp-chat-location-info strong {
  font-size: 0.85rem;
}

.mp-chat-location-coords {
  font-size: 0.72rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.mp-chat-location-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.mp-chat-location-open-btn,
.mp-chat-location-stop-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mp-chat-location-stop-btn {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

/* Burbuja de contacto compartido */
.mp-chat-contact {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.7rem;
  min-width: 200px;
}

.mp-chat-contact-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.mp-chat-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mp-chat-contact-info strong {
  font-size: 0.85rem;
}

.mp-chat-contact-phone {
  font-size: 0.75rem;
  opacity: 0.75;
}

.mp-chat-contact-call-btn {
  margin-left: auto;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Barra fija de "compartiendo ubicación en vivo" mientras está activa */
.mp-chat-live-location-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  background: rgba(239, 68, 68, 0.14);
  border-top: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 0.8rem;
  color: #fca5a5;
}

.mp-chat-live-location-bar .mp-chat-live-location-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: mpLocationPulse 1.4s ease-in-out infinite;
}

.mp-chat-live-location-bar span.mp-chat-live-location-label {
  flex: 1;
}

.mp-chat-live-location-bar button {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  cursor: pointer;
}

.mp-chat-theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text);
}

.mp-chat-theme-swatch-preview {
  height: 90px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--chat-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.mp-chat-theme-swatch.active .mp-chat-theme-swatch-preview {
  border-color: var(--accent-a);
  transform: scale(1.03);
}

.mp-chat-theme-swatch-bubble {
  height: 14px;
  border-radius: 7px;
  width: 65%;
}

.mp-chat-theme-swatch-bubble.theirs {
  align-self: flex-start;
  background: var(--chat-bubble-theirs-bg, rgba(255, 255, 255, 0.4));
}

.mp-chat-theme-swatch-bubble.mine {
  align-self: flex-end;
  background: var(--chat-bubble-mine-bg, rgba(124, 108, 240, 0.6));
}

.mp-chat-theme-swatch-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

/* Miniatura del selector de "Diseños de chat" (lista) — filitas con
   avatar+nombre+mensaje de ejemplo (Sergio/Andrés/Camilo, ver
   CHAT_LIST_PREVIEW_SAMPLES en client.js) para que se sienta como una
   lista real aplicada, no solo barritas abstractas — pedido explícito. */
.mp-chat-list-theme-swatch-preview {
  min-height: 108px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem;
  position: relative;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.mp-chat-theme-swatch.active .mp-chat-list-theme-swatch-preview {
  border-color: var(--accent-a);
  transform: scale(1.03);
}

.mp-chat-list-theme-swatch-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-left: 2.5px solid var(--conv-accent, transparent);
  padding-left: 0.3rem;
}

.mp-chat-list-theme-swatch-row .avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--conv-accent, var(--border-strong));
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-chat-list-theme-swatch-row .text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-align: left;
}

.mp-chat-list-theme-swatch-row .name {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-chat-list-theme-swatch-row .msg {
  font-size: 0.52rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-chat-list-theme-swatch-row.boxed {
  background: #ffffff;
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.3);
}

.mp-chat-list-theme-swatch-row.boxed.dark {
  background: #1e293b;
}

.mp-chat-list-theme-swatch-row.boxed.dark .name {
  color: #f1f5f9;
}

.mp-chat-list-theme-swatch-row.boxed.dark .msg {
  color: #94a3b8;
}

.mp-chat-list-theme-swatch-preview .emoji {
  position: absolute;
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
}

/* Cada preview necesita el mismo set de variables que #chatPanel real, ver
   el bloque grande de temas más arriba — se repite el selector acá con
   .mp-chat-theme-swatch-preview en vez de #chatPanel para que el mismo
   valor sirva tanto para el chat real como para la miniatura del selector. */
.mp-chat-theme-swatch-preview[data-chat-theme="classic"] { --chat-bg: linear-gradient(180deg, rgba(4, 4, 12, 0.5), rgba(4, 4, 12, 0.72)), url("img/fondo-chat.jpg"); --chat-bubble-mine-bg: var(--gradient-soft); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12); }
.mp-chat-theme-swatch-preview[data-chat-theme="lips"] { --chat-bg: radial-gradient(circle at 20% 15%, rgba(236, 72, 153, 0.12), transparent 40%), radial-gradient(circle at 85% 75%, rgba(124, 108, 240, 0.14), transparent 45%), linear-gradient(180deg, #f4f1fb, #ece6fb); --chat-bubble-mine-bg: linear-gradient(135deg, #8b7cf6, #a855f7); --chat-bubble-theirs-bg: #ffffff; }
.mp-chat-theme-swatch-preview[data-chat-theme="crying"] { --chat-bg: linear-gradient(180deg, #fff5f5, #ffe9ec); --chat-bubble-mine-bg: linear-gradient(135deg, #ef4444, #f43f5e); --chat-bubble-theirs-bg: #ffffff; }
.mp-chat-theme-swatch-preview[data-chat-theme="gym"] { --chat-bg: linear-gradient(180deg, #0a0a0a, #161616); --chat-bubble-mine-bg: linear-gradient(135deg, #e5e5e5, #ffffff); --chat-bubble-theirs-bg: #262626; }
.mp-chat-theme-swatch-preview[data-chat-theme="gothic"] { --chat-bg: radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.18), transparent 55%), #050505; --chat-bubble-mine-bg: linear-gradient(135deg, #7f1d1d, #dc2626); --chat-bubble-theirs-bg: #141414; }
.mp-chat-theme-swatch-preview[data-chat-theme="galaxy"] { --chat-bg: linear-gradient(180deg, rgba(10, 7, 20, 0.55), rgba(10, 7, 20, 0.8)), url("img/chat-themes/galaxy.jpg"); --chat-bubble-mine-bg: linear-gradient(135deg, #7c6cf0, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.08); }
.mp-chat-theme-swatch-preview[data-chat-theme="moonlight"] { --chat-bg: linear-gradient(180deg, #0b1c3d, #16305c 55%, #1c3f74), url("img/chat-themes/moonlight.jpg") top right / 45% no-repeat; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #60a5fa); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12); }
.mp-chat-theme-swatch-preview[data-chat-theme="pinkmoon"] { --chat-bg: linear-gradient(180deg, rgba(26, 11, 46, 0.5), rgba(26, 11, 46, 0.78)), url("img/chat-themes/pinkmoon.jpg"); --chat-bubble-mine-bg: linear-gradient(135deg, #a855f7, #ec4899); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.1); }
.mp-chat-theme-swatch-preview[data-chat-theme="vintage"] { --chat-bg: url("img/chat-themes/vintage.jpg"); --chat-bubble-mine-bg: #f3c8d0; --chat-bubble-theirs-bg: #f1e7d0; }
.mp-chat-theme-swatch-preview[data-chat-theme="daysky"] { --chat-bg: url("img/chat-themes/daysky.jpg"); --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #3b82f6); --chat-bubble-theirs-bg: #ffffff; }
.mp-chat-theme-swatch-preview[data-chat-theme="purpleSpark"] { --chat-bg: radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.85) 0%, transparent 1.5%), radial-gradient(circle at 70% 20%, rgba(216, 180, 254, 0.85) 0%, transparent 1.5%), radial-gradient(circle at 45% 70%, rgba(255, 255, 255, 0.7) 0%, transparent 1.2%), linear-gradient(160deg, #3b0764, #6d28d9 55%, #8b5cf6); --chat-bubble-mine-bg: linear-gradient(135deg, #a855f7, #7c3aed); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12); }
.mp-chat-theme-swatch-preview[data-chat-theme="pinkClouds"] { --chat-bg: radial-gradient(ellipse 60% 30% at 25% 25%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(ellipse 55% 28% at 65% 65%, rgba(255, 255, 255, 0.4), transparent 70%), linear-gradient(180deg, #ffd6e8, #ffb3d1 55%, #ff8fc0); --chat-bubble-mine-bg: linear-gradient(135deg, #fb7185, #ec4899); --chat-bubble-theirs-bg: #ffffff; }
.mp-chat-theme-swatch-preview[data-chat-theme="spaceVortex"] { --chat-bg: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), conic-gradient(from 0deg at 50% 45%, #1e1b4b, #4c1d95, #2563eb, #7c3aed, #1e1b4b); --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #7c3aed); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.1); }
.mp-chat-theme-swatch-preview[data-chat-theme="blackGold"] { --chat-bg: repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.14) 0px, rgba(212, 175, 55, 0.14) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.14) 0px, rgba(212, 175, 55, 0.14) 1px, transparent 1px, transparent 20px), linear-gradient(180deg, #0a0a0a, #161113); --chat-bubble-mine-bg: linear-gradient(135deg, #b8862d, #e4c568); --chat-bubble-theirs-bg: #1c1a16; }
.mp-chat-theme-swatch-preview[data-chat-theme="purpleWave"] { --chat-bg: radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.35), transparent 45%), radial-gradient(circle at 80% 35%, rgba(236, 72, 153, 0.3), transparent 45%), linear-gradient(135deg, #2e1065, #5b21b6 50%, #7c3aed); --chat-bubble-mine-bg: linear-gradient(135deg, #ec4899, #8b5cf6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.12); }
.mp-chat-theme-swatch-preview[data-chat-theme="neonDoodle"] { --chat-bg: radial-gradient(circle at 25% 30%, rgba(244, 114, 182, 0.5) 0%, transparent 2.5%), radial-gradient(circle at 65% 20%, rgba(232, 121, 249, 0.4) 0%, transparent 2%), radial-gradient(circle at 45% 70%, rgba(244, 114, 182, 0.45) 0%, transparent 2%), linear-gradient(180deg, #0d0611, #1a0e22); --chat-bubble-mine-bg: linear-gradient(135deg, #db2777, #e879f9); --chat-bubble-theirs-bg: #1c1520; }
.mp-chat-theme-swatch-preview[data-chat-theme="tealWatercolor"] { --chat-bg: radial-gradient(ellipse 55% 30% at 25% 25%, rgba(255, 255, 255, 0.35), transparent 70%), radial-gradient(ellipse 50% 30% at 70% 55%, rgba(45, 212, 191, 0.35), transparent 70%), linear-gradient(180deg, #ccfbf1, #5eead4 60%, #2dd4bf); --chat-bubble-mine-bg: linear-gradient(135deg, #14b8a6, #0d9488); --chat-bubble-theirs-bg: #ffffff; }
.mp-chat-theme-swatch-preview[data-chat-theme="redTech"] { --chat-bg: repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.1) 0px, rgba(239, 68, 68, 0.1) 1px, transparent 1px, transparent 18px), repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0px, rgba(239, 68, 68, 0.1) 1px, transparent 1px, transparent 18px), radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.25), transparent 60%), #050505; --chat-bubble-mine-bg: linear-gradient(135deg, #7f1d1d, #ef4444); --chat-bubble-theirs-bg: #161616; }
.mp-chat-theme-swatch-preview[data-chat-theme="lavenderFloral"] { --chat-bg: radial-gradient(circle at 25% 25%, rgba(196, 181, 253, 0.5), transparent 40%), radial-gradient(circle at 75% 35%, rgba(216, 180, 254, 0.45), transparent 45%), linear-gradient(180deg, #f5f3ff, #ede9fe 60%, #e0e7ff); --chat-bubble-mine-bg: linear-gradient(135deg, #a78bfa, #7c3aed); --chat-bubble-theirs-bg: #ffffff; }

.mp-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 107, 107, 0.45);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.05rem;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease);
}

.mp-btn-danger:hover {
  background: rgba(255, 107, 107, 0.2);
  transform: translateY(-1px);
}

.mp-btn-danger:active {
  transform: translateY(0);
}

.mp-settings-field-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.mp-settings-field-form .field-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  gap: 0.3rem;
}

.mp-settings-field-form input,
.mp-settings-field-form textarea,
.mp-settings-field-form select {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
}

.mp-settings-field-form .mp-btn-outline {
  align-self: flex-start;
}

.mp-settings-field-form .note,
.mp-settings-field-form .form-error {
  margin: 0;
}

.mp-theme-swatches {
  display: flex;
  gap: 0.8rem;
  margin: 0.7rem 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.mp-theme-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.16s var(--ease);
}

.mp-theme-swatch[data-theme="violet"] { background: linear-gradient(135deg, #7c6cf0, #4fa8f0); }
.mp-theme-swatch[data-theme="blue"]   { background: linear-gradient(135deg, #4f8ff0, #4fd1f0); }
.mp-theme-swatch[data-theme="pink"]   { background: linear-gradient(135deg, #e94f97, #f07c6c); }
.mp-theme-swatch[data-theme="green"]  { background: linear-gradient(135deg, #4fbf7c, #4fe0a8); }
.mp-theme-swatch[data-theme="gold"]   { background: linear-gradient(135deg, #e0a84f, #f0d16c); }

.mp-theme-swatch:hover {
  transform: scale(1.08);
}

.mp-theme-swatch.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

.mp-tone-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.7rem 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.mp-tone-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-3);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.mp-tone-row.active {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-tone-row-name {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
}

.mp-tone-play-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.mp-tone-play-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.mp-tone-play-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mp-tone-row-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.mp-tone-row.active .mp-tone-row-check {
  border-color: var(--accent-a);
  background: var(--accent-a);
}

.mp-tone-row-upload {
  border-style: dashed;
  background: transparent;
}

.mp-tone-row-upload .mp-tone-row-name {
  color: var(--text-dim);
}

.mp-gender-filter {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.mp-gender-filter-opt {
  flex: 1;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease);
}

/* Mismo criterio que .mp-conv-filter-pill.active: tinte suave en vez de
   relleno sólido, para que no se sienta "más grande" que las demás. */
.mp-gender-filter-opt.active {
  border-color: rgba(124, 108, 240, 0.4);
  background: var(--gradient-soft);
  color: var(--accent-a);
}

.mp-vc-more-menu .mp-gender-filter-opt {
  width: auto;
  padding: 0.6rem 0.4rem;
  font-size: 0.8rem;
}

/* Mismo celeste que "Siguiente" (.mp-vc-menu-btn-skip) para esta tarjeta en
   particular -- el ".active" genérico de arriba (violeta) sigue igual en
   Vynko Citas y cualquier otro lado que use esta misma clase. Mismo
   criterio de tinte suave que el resto (ver .mp-conv-filter-pill.active). */
.mp-vc-more-menu .mp-gender-filter-opt.active {
  background: rgba(79, 168, 240, 0.14);
  border-color: rgba(79, 168, 240, 0.4);
  color: #2f7fc9;
}

.mp-vc-gender-label {
  margin: 0.3rem 0 0;
}

.mp-create-group-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-create-group-form input:not([type="file"]),
.mp-create-group-form select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}

.mp-create-group-form input:not([type="file"]):focus,
.mp-create-group-form select:focus {
  outline: none;
  border-color: var(--accent-a);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .mp-mobile-topbar {
    display: flex;
  }
  .mp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* 100vh a secas queda "congelado" al tamaño de viewport que había en
       el momento en que Safari/iOS calculó la barra de direcciones (mostrada
       u oculta) — si cambia después (por ej. se ocultó al hacer scroll antes
       de abrir el menú), el menú queda más bajo que la pantalla real y se ve
       una franja blanca del fondo de la página por debajo. 100dvh sigue el
       tamaño visible real en todo momento (mismo arreglo que ya se hizo en
       .mp-messages-view). */
    height: 100dvh;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease);
    /* Suma al padding-top de siempre (no lo reemplaza) para que el logo
       no quede pegado contra el notch/la barra de estado del teléfono. */
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    /* Con todos los ítems de hoy (Inicio, Buscar, Notificaciones... hasta
       Cerrar sesión) el menú no entra en 100vh en la mayoría de celulares
       — sin esto, "Cerrar sesión" quedaba cortado y no había forma de
       llegar a él. Ahora el menú se desplaza solo, de arriba a abajo, sin
       mover nada del resto de la pantalla (que sigue fija detrás). */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mp-sidebar.open {
    transform: translateX(0);
  }
  .mp-sidebar-backdrop.open {
    display: block;
  }
  .mp-main {
    padding-top: var(--mobile-topbar-h);
    /* Mismo motivo que en .mp-messages-view más abajo: la barra inferior
       real ocupa 5.5rem + su propio safe-area-inset-bottom en celulares
       sin botón físico — sin sumarlo acá también, lo último del feed/
       perfil/lo que sea quedaba tapado por esa franja extra. */
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    /* La regla base (pensada para escritorio) dejaba 2rem sueltos a los
       costados en celular, que nunca se había angostado: eso empujaba la
       tarjeta entera (no solo la foto) hacia adentro de la pantalla. */
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  /* Inicio va de orilla a orilla (a pedido explícito: "que se vea tal cual
     TikTok o Facebook") en vez de heredar el margen lateral de .mp-main,
     que sí se necesita en el resto de las vistas (ajustes, perfil...) para
     que el texto no quede pegado al borde. Cada tarjeta del feed
     (.mp-home-card, .mp-post-card, el compositor) ya trae su propio
     padding interno, así que no quedan pegadas de verdad al borde.
     Width en "auto" es clave: .mp-feed trae "width: min(560px, 100%)" fijo,
     y con ancho Y los dos márgenes fijos a la vez el navegador queda
     "sobre-restringido" y descarta el margen derecho (por eso antes el
     lado izquierdo quedaba pegado y el derecho no) — con auto, el ancho se
     recalcula para respetar los dos márgenes por igual. */
  #feedView {
    width: auto;
    margin-left: -0.85rem;
    margin-right: -0.85rem;
  }
  /* El logo "Yū" y los botones de notificación/monedas son las únicas
     piezas del encabezado sin tarjeta propia detrás — sin este padding
     quedarían pegados literalmente al borde de la pantalla. */
  .mp-home-header {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .mp-messages-view {
    /* La barra inferior real mide más que estos 5.5rem en celulares con
       "home indicator" (sin botón físico) — le suma su propio
       env(safe-area-inset-bottom) de padding (mp-bottomnav). Sin
       descontarlo acá también, el final de la lista de chats quedaba
       tapado por esa franja extra — se veía "cortado", sin más para
       bajar aunque el scroll ya había llegado al final de verdad. */
    height: calc(100vh - var(--mobile-topbar-h) - 5.5rem - env(safe-area-inset-bottom));
    height: calc(100dvh - var(--mobile-topbar-h) - 5.5rem - env(safe-area-inset-bottom));
  }
  /* El chat abierto debe verse a pantalla completa en celular (sin el
     padding lateral del contenido normal ni el FAB de "crear" tapándolo). */
  .mp-messages-view.mp-chat-open {
    margin: calc(var(--mobile-topbar-h) * -1) -0.85rem -5.5rem;
    height: 100vh;
    height: 100dvh;
  }
  /* position:fixed;inset:0 (no solo el margen negativo de arriba) es lo que
     hace que interactive-widget=resizes-content (<meta viewport>) achique
     esto solo cuando aparece el teclado, sin ayuda de JS -- antes había un
     syncChatToKeyboard() reacomodando esto a mano contra el visualViewport,
     pero en los navegadores actuales duplicaba el ajuste que el navegador
     ya hacía solo (se sacó por eso, ver comentario grande más abajo en este
     archivo, junto al chatInput). */
  .mp-messages-view.mp-chat-open .mp-chat-panel-container {
    position: fixed;
    inset: 0;
    z-index: 500;
    border-radius: 0;
    border: none;
  }
  /* El chat a pantalla completa deja al encabezado (flecha de volver +
     botones de llamada) como lo más arriba de todo en la pantalla — sin
     esto quedaba pegado contra la barra de estado del sistema, igual que
     le pasaba antes a la barra superior general (.mp-mobile-topbar).
     #chatPanel ya pone 1.1rem de padding-top propio; esto solo suma lo que
     falta para no quedar debajo de la barra de estado. */
  .mp-messages-view.mp-chat-open .mp-chat-head {
    padding-top: env(safe-area-inset-top);
  }
  /* En celular, con el chat abierto a pantalla completa, no debe quedar
     nada más encima: ni la barra "En línea" genérica (se solapa con el
     botón de menú lateral), ni el FAB ni la barra inferior. */
  .mp-messages-view.mp-chat-open .mp-messages-topbar {
    display: none;
  }
  /* :has() no anda en versiones viejas de WebView de Android — con eso sin
     aplicar, la barra superior fija quedaba tapando el encabezado del chat
     (con la flecha de volver adentro) cuando el chat estaba abierto, así
     que esto se controla con una clase que pone/saca openChat()/
     lockActiveChat() en <body> en vez de depender de ese selector. */
  body.body-chat-open .mp-fab,
  body.body-chat-open .mp-bottomnav,
  body.body-chat-open .mp-mobile-topbar {
    display: none;
  }
  /* El FAB "Crear" es del feed de Inicio -- switchView() pone esta clase en
     <body> en cualquier otra pantalla (Configuración, Perfil, Llamadas...)
     para que no quede flotando encima de contenido que no tiene nada que
     ver con crear una publicación. */
  body.body-hide-fab .mp-fab {
    display: none;
  }
  .mp-bottomnav {
    display: flex;
  }
  .mp-fab {
    display: flex;
  }
  .mp-stats-row, .mp-achv-grid, .mp-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Lista de Chats a pantalla completa: antes solo el chat abierto
     (.mp-chat-open) sangraba fuera del padding de .mp-main; la lista de
     conversaciones se quedaba angosta dentro de ese padding, con el fondo
     de la app asomando por los costados y look de "tarjeta". Ahora la vista
     entera sangra siempre (se ve igual con o sin chat abierto) y el panel
     de la lista pierde el borde/radio que la hacía lucir como tarjeta. */
  .mp-messages-view {
    margin-left: -0.85rem;
    margin-right: -0.85rem;
  }
  .mp-conv-panel {
    border-radius: 0;
    border: none;
  }
}

/* ===== YU Surprise: feed de publicaciones pagas ===== */
.mp-ys-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mp-ys-topbar-inline {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}

.mp-ys-review-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.mp-ys-review-badge.pending {
  background: rgba(240, 180, 41, 0.16);
  color: var(--gold, #e8b13d);
}

.mp-ys-review-badge.rejected {
  background: rgba(240, 84, 107, 0.16);
  color: var(--red, #f0546b);
  cursor: help;
}

.mp-ys-topbar h3 {
  margin: 0;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--gold) 0%, #fff2cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-ys-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--gold) 0%, #c98a1f 100%);
  color: #1a1206;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(232, 177, 61, 0.55);
  transition: transform 0.16s var(--ease);
}

.mp-ys-create-btn:hover {
  transform: translateY(-1px) scale(1.04);
}

.mp-ys-earnings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  background: linear-gradient(135deg, rgba(232, 177, 61, 0.14), rgba(232, 177, 61, 0.04));
  border: 1px solid rgba(232, 177, 61, 0.35);
  backdrop-filter: var(--blur);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 0.88rem;
}

.mp-ys-earnings.hidden {
  display: none;
}

.mp-ys-earnings strong {
  color: var(--gold);
  font-size: 1.05rem;
}

.mp-ys-earnings .mp-btn-outline {
  margin-left: auto;
}

.mp-ys-feed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mp-ys-post {
  background: var(--panel-solid);
  border: 1px solid rgba(232, 177, 61, 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: mpFadeIn 0.3s var(--ease);
}

.mp-ys-post-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
}

.mp-ys-post-name {
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
}

.mp-ys-post-verified {
  color: #4fa8f0;
  flex-shrink: 0;
}

.mp-ys-post-time {
  margin-left: auto;
  color: var(--text-dimmer);
  font-size: 0.78rem;
}

.mp-ys-post-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dimmer);
  cursor: pointer;
  flex-shrink: 0;
}

.mp-ys-post-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.mp-ys-post-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #0a0a0a;
  overflow: hidden;
}

.mp-ys-post-media img,
.mp-ys-post-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-ys-post-media.locked img,
.mp-ys-post-media.locked video {
  filter: blur(22px) brightness(0.55) saturate(1.1);
  transform: scale(1.08);
}

.mp-ys-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1rem;
  color: #fff;
}

.mp-ys-lock-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(232, 177, 61, 0.6);
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.mp-ys-lock-overlay strong {
  font-size: 1rem;
}

.mp-ys-lock-overlay span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.mp-ys-play-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mp-ys-post-footer {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mp-ys-post-title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}

.mp-ys-post-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: -0.3rem 0 0;
}

.mp-ys-post-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-ys-coin {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mp-ys-view-count {
  color: var(--text-dimmer);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mp-ys-view-count.clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.mp-ys-viewers-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mp-ys-viewer-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  color: var(--text);
  font-size: 0.88rem;
}

.mp-ys-viewer-row .note {
  margin-left: auto;
  font-size: 0.75rem;
}

.mp-ys-unlock-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(232, 177, 61, 0.55);
  background: rgba(232, 177, 61, 0.12);
  color: var(--gold);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}

.mp-ys-unlock-btn:hover {
  background: rgba(232, 177, 61, 0.22);
  transform: translateY(-1px);
}

.mp-ys-unlock-btn.unlocked {
  background: rgba(53, 214, 142, 0.14);
  border-color: rgba(53, 214, 142, 0.5);
  color: var(--green);
  cursor: default;
}

.mp-ys-unlock-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.mp-ys-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}

.mp-ys-input:focus {
  outline: none;
  border-color: var(--accent-a);
  background: rgba(255, 255, 255, 0.06);
}

.mp-ys-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.mp-ys-create-card .field-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mp-ys-char-count {
  align-self: flex-end;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-ys-price-input {
  position: relative;
  display: flex;
  align-items: center;
}

.mp-ys-price-coin {
  position: absolute;
  left: 0.85rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #c98a1f 100%);
  pointer-events: none;
}

.mp-ys-price-input input {
  padding-left: 2.4rem;
  width: 100%;
}

.mp-ys-field-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mp-ys-dropzone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.6rem 1rem;
  border-radius: var(--radius-lg);
  border: 1.5px dashed rgba(232, 177, 61, 0.45);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.mp-ys-dropzone:hover {
  border-color: var(--gold);
  background: rgba(232, 177, 61, 0.06);
}

.mp-ys-dropzone.hidden {
  display: none;
}

.mp-ys-dropzone svg {
  color: var(--gold);
}

.mp-ys-dropzone span {
  font-size: 0.85rem;
}

.mp-ys-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.5rem;
}

.mp-ys-preview-grid.hidden {
  display: none;
}

.mp-ys-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(232, 177, 61, 0.25);
}

.mp-ys-preview-item img,
.mp-ys-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-ys-preview-item-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-ys-preview-item-remove:hover {
  background: #ef4444;
}

.mp-ys-publish-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, #c98a1f 100%);
  color: #1a1206;
  box-shadow: 0 6px 16px -6px rgba(232, 177, 61, 0.55);
}

/* La grilla "por álbum" (explorar a todo el mundo) y el header de "dentro
   de una carpeta" (con botón de volver) se borraron junto con esa pantalla
   aparte -- el contenido exclusivo ahora vive en el perfil de cada
   persona, ver #myLockedSection/#publicProfileLockedSection en index.html.
   Los filtros Todos/Fotos/Videos de abajo SÍ se siguen usando ahí. */
.mp-ys-host-filter-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mp-ys-host-filter-tab {
  border: 1px solid rgba(232, 177, 61, 0.3);
  background: none;
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-ys-host-filter-tab.active {
  background: rgba(232, 177, 61, 0.16);
  border-color: var(--gold);
  color: var(--gold);
}

.mp-pay-quick-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.28), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(79, 168, 240, 0.22), transparent 55%),
    var(--panel-solid);
  border: 1px solid rgba(139, 92, 246, 0.32);
  cursor: pointer;
}

.mp-pay-quick-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: var(--yu-purple);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

.mp-pay-quick-text {
  flex: 1;
  min-width: 0;
}

.mp-pay-quick-text strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.mp-pay-quick-text span {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mp-pay-quick-cta {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--yu-purple);
  white-space: nowrap;
}

.mp-invite-quick-card {
  margin-top: 0.9rem;
  width: 100%;
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.28), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(56, 189, 248, 0.2), transparent 55%),
    var(--panel-solid);
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.mp-invite-quick-icon {
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(14, 165, 233, 0.5);
  color: #0ea5e9;
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.35);
}

.mp-invite-quick-card .mp-pay-quick-cta { color: #0ea5e9; }

/* ===== Perfil premium: cofre de saldo, ver videos, anfitrionas ===== */
.mp-balance-card-treasure {
  background:
    radial-gradient(circle at 100% 10%, rgba(232, 177, 61, 0.28), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.3), transparent 55%),
    linear-gradient(160deg, #1c1530 0%, #100b1c 100%);
  border: 1px solid rgba(232, 177, 61, 0.28);
  padding-right: 6.5rem;
}

.mp-balance-card-treasure .mp-balance-top {
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: rgba(232, 177, 61, 0.85);
}

.mp-balance-card-treasure .mp-balance-amount {
  background: linear-gradient(135deg, #fff2cf 0%, var(--gold) 60%, #c98a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-balance-card-treasure .mp-balance-amount .mp-currency {
  -webkit-text-fill-color: rgba(255, 244, 214, 0.75);
  color: rgba(255, 244, 214, 0.75);
}

.mp-balance-chest {
  position: absolute;
  right: -0.6rem;
  bottom: -0.4rem;
  width: 108px;
  height: 108px;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

@media (max-width: 480px) {
  .mp-balance-card-treasure {
    padding-right: 1.5rem;
    padding-bottom: 6.5rem;
  }
  .mp-balance-chest {
    right: 0.5rem;
    bottom: 0.2rem;
  }
}

.mp-video-earn-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.28), transparent 55%),
    var(--panel-solid);
  border: 1px solid rgba(139, 92, 246, 0.28);
}

.mp-video-earn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: var(--yu-purple);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
  margin-bottom: 0.7rem;
}

.mp-video-earn-card .mp-panel-head {
  margin-bottom: 0.3rem;
}

.mp-video-earn-card .mp-panel-head h3 {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.mp-video-earn-coin {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0.65;
  filter: drop-shadow(0 0 6px rgba(232, 177, 61, 0.5));
}

.mp-video-earn-coin-1 {
  top: 0.9rem;
  right: 1.2rem;
}

.mp-video-earn-coin-2 {
  bottom: 3.2rem;
  right: 2.6rem;
  font-size: 0.9rem;
  opacity: 0.45;
}

.mp-hosts-card .mp-panel-head h3 {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.mp-hosts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.6rem 1rem;
}

.mp-hosts-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: var(--yu-purple);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}

.mp-hosts-empty p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  max-width: 22em;
}

/* ===== YU Pay: saldo interno, cuentas bancarias, envíos ===== */
.mp-pay-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mp-pay-topbar h3 {
  margin: 0;
  font-size: 1.15rem;
}

.mp-pay-balance-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 108, 240, 0.4), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(79, 168, 240, 0.35), transparent 55%),
    linear-gradient(160deg, #1a1530 0%, #0d0a1a 70%);
  border: 1px solid rgba(124, 108, 240, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
}

.mp-pay-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  font-size: 0.85rem;
}

.mp-pay-eye-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
}

.mp-pay-balance-amount {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0.4rem 0 1.1rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff 0%, #cfc6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-pay-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.mp-pay-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
}

.mp-pay-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  box-shadow: var(--shadow-glow);
}

.mp-pay-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.mp-pay-banner strong {
  display: block;
  font-size: 0.95rem;
}

.mp-pay-banner p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.mp-pay-banner-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.mp-pay-banner-gold {
  background: linear-gradient(135deg, var(--gold) 0%, #c98a1f 100%);
}

.mp-pay-banner-gold strong,
.mp-pay-banner-gold p {
  color: #1a1206;
}

.mp-pay-banner-gold p {
  color: rgba(26, 18, 6, 0.75);
}

.mp-bank-list-head {
  margin: 0 0 0.75rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
}

.mp-bank-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mp-bank-card {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}

.mp-bank-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mp-bank-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.mp-bank-card-info {
  flex: 1;
  min-width: 0;
}

.mp-bank-card-info strong {
  display: block;
  font-size: 0.95rem;
}

.mp-bank-card-info span {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.mp-bank-card-primary-pill {
  background: rgba(53, 214, 142, 0.16);
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.mp-bank-card-actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.mp-bank-card-actions button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
}

.mp-bank-card-actions button.danger {
  color: var(--red, #f0546b);
  margin-left: auto;
}

.mp-bank-card-actions button:hover {
  color: var(--text);
}


.mp-pay-security-note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-top: 1.2rem;
}

.mp-pay-security-icon {
  font-size: 1.3rem;
}

.mp-pay-security-note strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

.mp-pay-security-note p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.mp-pay-steps {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0.5rem 0 1.3rem;
}

.mp-pay-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-pay-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-3);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.mp-pay-step.active {
  color: var(--text);
}

.mp-pay-step.active .mp-pay-step-dot {
  background: var(--gradient);
  border-color: transparent;
  color: white;
}

.mp-pay-success {
  text-align: center;
  padding: 1.5rem 1rem;
}

.mp-pay-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(53, 214, 142, 0.16);
  color: var(--green);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.mp-pay-success h4 {
  margin: 0 0 0.4rem;
}

.mp-pay-success button {
  margin-top: 1.2rem;
  width: 100%;
}

.mp-pay-recipient-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel-3);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.mp-pay-recipient-preview strong {
  display: block;
  font-size: 0.92rem;
}

.mp-pay-tx-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.mp-pay-tx-row:last-child {
  border-bottom: none;
}

.mp-pay-tx-info {
  flex: 1;
  min-width: 0;
}

.mp-pay-tx-info strong {
  display: block;
  font-size: 0.9rem;
}

.mp-pay-tx-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.mp-pay-tx-amount.positive {
  color: var(--green);
}

.mp-pay-tx-amount.negative {
  color: var(--text);
}

.mp-pay-verify-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.mp-pay-verify-row:last-of-type {
  border-bottom: none;
}

.mp-pay-verify-row span {
  color: var(--text-dim);
}

/* ===== Novedades: noticias + publicidad ===== */
.yu-novedades-view {
  animation: mpFadeIn 0.3s var(--ease);
}

.yu-novedades-wrap {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.yu-novedades-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.2rem 0.1rem 0.4rem;
  scrollbar-width: none;
}

.yu-novedades-chips::-webkit-scrollbar {
  display: none;
}

.yu-novedades-chip {
  flex-shrink: 0;
  background: var(--panel-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

/* Mismo criterio que .mp-conv-filter-pill.active: tinte suave en vez de
   relleno sólido, para que no se sienta "más grande" que las demás. */
.yu-novedades-chip.active {
  background: var(--gradient-soft);
  border-color: rgba(124, 108, 240, 0.4);
  color: var(--accent-a);
}

.yu-novedades-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Estilo "publicación de Facebook": medio arriba (ícono + nombre + hace
   cuánto), texto corto con "Ver más", y la foto GRANDE debajo — no una
   miniatura chica. Ver renderNewsCard() en client.js. */
.yu-news-card {
  background: var(--panel);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  animation: mpFadeIn 0.3s var(--ease);
}

.yu-news-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0;
}

.yu-news-source-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-yu);
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
}

.yu-news-card-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.yu-news-card-source {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yu-news-card-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}

.yu-news-card-preview {
  margin: 0.6rem 0 0;
  padding: 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}

.yu-news-card-readmore {
  color: var(--text-dim);
  font-weight: 700;
  margin-left: 0.2rem;
  white-space: nowrap;
}

.yu-news-card-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  background: var(--panel-3);
  margin-top: 0.8rem;
}

/* Widget "Lo más importante de hoy" en Inicio: fila horizontal de
   tarjetas compactas (mismo .yu-news-card de Novedades, solo más angostas
   acá) — así no compite en alto con el feed de publicaciones de abajo. */
.mp-home-news {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Antes era una fila horizontal de tarjetas angostas; con la foto grande
   estilo Facebook eso las dejaba recortadas — ahora es una columna normal,
   igual que en Novedades. */
.mp-home-news-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* "Gente para conocer" (pedido explícito): fila horizontal de tarjetas,
   scrollea con el dedo -- para que alguien nueva vea de una que hay
   gente real usando la app, sin ocupar todo el alto de la pantalla. */
.mp-home-suggested-people {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.mp-home-suggested-people-list {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}

.mp-home-suggested-people-list::-webkit-scrollbar {
  display: none;
}

.mp-suggested-person-card {
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.mp-suggested-person-card .mp-avatar-round {
  width: 60px;
  height: 60px;
  font-size: 1.1rem;
}

.mp-suggested-person-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mp-suggested-person-card button {
  width: 100%;
  font-size: 0.72rem;
  padding: 0.35rem 0.4rem;
}

/* Tarjeta de publicidad: mismo lenguaje visual que .yu-news-card pero con un
   borde/etiqueta que la distingue de una noticia real a simple vista — pedido
   explícito: la publicidad nunca debe confundirse con contenido editorial. */
.yu-ad-card {
  background: var(--panel);
  border: 1.5px solid rgba(14, 165, 233, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: mpFadeIn 0.3s var(--ease);
}

.yu-ad-card-label {
  align-self: flex-start;
  margin: 0.8rem 0 0 1rem;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
}

.yu-ad-card-media {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  background: var(--panel-3);
  margin-top: 0.6rem;
}

.yu-ad-card-body {
  padding: 0.8rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.yu-ad-card-advertiser {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}

.yu-ad-card-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.yu-ad-card-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.yu-ad-card-cta {
  align-self: flex-start;
  margin-top: 0.3rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.yu-news-reader-box {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  animation: mpFadeIn 0.2s var(--ease);
}

.yu-news-reader-box .mp-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.yu-news-reader-img-wrap.hidden {
  display: none;
}

.yu-news-reader-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--panel-3);
  display: block;
}

.yu-news-reader-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.yu-news-reader-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 600;
}

.yu-news-reader-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}

.yu-news-reader-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.yu-news-reader-fulltext {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.yu-news-reader-fulltext p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.yu-news-reader-source-btn {
  align-self: flex-start;
  margin-top: 0.4rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* ===================================================================
   EDITOR DE FOTOS CON IA (public/index.html #photoEditorView)
   =================================================================== */
.mp-photo-editor-preview {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel-solid);
  border: 1px solid var(--border);
}

.mp-photo-editor-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  background: repeating-conic-gradient(#2a2833 0% 25%, #201f28 0% 50%) 50% / 20px 20px;
}

.mp-photo-editor-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.mp-photo-editor-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mp-photo-editor-tool:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.mp-photo-editor-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mp-photo-editor-tool.active {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-photo-editor-tool-cost {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
}

.mp-photo-editor-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.mp-photo-editor-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.mp-photo-editor-swatch img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
}

.mp-photo-editor-swatch.selected {
  border-color: var(--accent-a);
  color: var(--text);
}

.mp-photo-editor-swatch-label {
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.mp-photo-editor-swatch.selected .mp-photo-editor-swatch-label {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-photo-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mp-photo-editor-actions .mp-btn-outline {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
}

/* ===================================================================
   EDITOR DE FOTOS CON IA v2 — rediseño completo (barra superior, overlay
   de controles sobre la foto, pestañas, grilla de IA, filtros con
   miniatura real, recorte y máscara a mano)
   =================================================================== */
.mp-photo-editor {
  display: flex;
  flex-direction: column;
}

/* Sin esto, mantener/tocar estos botones en el celular dispara la
   selección de texto nativa (resaltado azul + menú de copiar) en vez de
   la acción del botón -- mismo problema ya resuelto antes en
   .mp-post-card-action y .mp-post-media, acá pasa en toda la grilla de
   herramientas porque cada una tiene texto adentro (título + costo). */
.mp-photo-editor-tab,
.mp-photo-editor-ai-tool,
.mp-photo-editor-chip,
.mp-photo-editor-overlay-btn,
.mp-photo-editor-overlay-pill,
.mp-photo-editor-swatch,
.mp-photo-editor-filter-swatch,
.mp-photo-editor-crop-handle,
.mp-photo-editor-crop-rect,
.mp-photo-editor-mask-canvas,
#peUploadBtn,
#peSaveAvatarBtn,
#peSaveCoverBtn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mp-photo-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}

.mp-photo-editor-topbar h3 {
  margin: 0;
  font-size: 1rem;
}

.mp-photo-editor-topbar-text {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.3rem;
}

.mp-photo-editor-topbar-done {
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.mp-photo-editor-preview-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 0.6rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel-solid);
  border: 1px solid var(--border);
}

.mp-photo-editor-preview-wrap img#peCurrentImage {
  display: block;
  width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  background: repeating-conic-gradient(#2a2833 0% 25%, #201f28 0% 50%) 50% / 20px 20px;
}

.mp-photo-editor-overlay-topleft,
.mp-photo-editor-overlay-topright {
  position: absolute;
  top: 0.5rem;
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.mp-photo-editor-overlay-topleft { left: 0.5rem; }
.mp-photo-editor-overlay-topright { right: 0.5rem; }

.mp-photo-editor-overlay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background: rgba(10, 8, 18, 0.62);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  font-size: 0.56rem;
  font-weight: 600;
}

.mp-photo-editor-overlay-btn.with-label {
  border-radius: 14px;
  width: auto;
  padding: 0.4rem 0.5rem;
}

.mp-photo-editor-overlay-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mp-photo-editor-overlay-pill {
  position: absolute;
  bottom: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(10, 8, 18, 0.62);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-photo-editor-overlay-bottomleft { left: 0.5rem; }
.mp-photo-editor-overlay-bottomright { right: 0.5rem; }

/* --- Recorte --- */
.mp-photo-editor-crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.45);
}

.mp-photo-editor-crop-rect {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.45);
  touch-action: none;
}

.mp-photo-editor-crop-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  touch-action: none;
}

.mp-photo-editor-crop-handle[data-corner="nw"] { left: -10px; top: -10px; cursor: nwse-resize; }
.mp-photo-editor-crop-handle[data-corner="ne"] { right: -10px; top: -10px; cursor: nesw-resize; }
.mp-photo-editor-crop-handle[data-corner="sw"] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.mp-photo-editor-crop-handle[data-corner="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }

/* --- Máscara para "Borrar objeto" --- */
.mp-photo-editor-mask-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.mp-photo-editor-mask-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  opacity: 0.55;
}

/* --- Controles en línea (recorte / máscara / expandir) --- */
.mp-photo-editor-inline-controls {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem;
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mp-photo-editor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mp-photo-editor-chip {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-photo-editor-chip.active {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-photo-editor-inline-actions {
  display: flex;
  gap: 0.5rem;
}

.mp-photo-editor-inline-actions .mp-btn-outline,
.mp-photo-editor-inline-actions .mp-btn-gradient {
  flex: 1 1 auto;
}

.mp-photo-editor-mask-brush {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.mp-photo-editor-mask-brush input[type="range"] {
  flex: 1 1 auto;
}

.mp-photo-editor-text-input {
  width: 100%;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
}

/* --- Fila de herramientas extra dentro de "Filtros" (Texto, y a futuro
   Collage/Música) -- separadas de las miniaturas de filtro de abajo --- */
.mp-photo-editor-extra-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.mp-photo-editor-extra-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* --- Agente de IA (pestaña "IA", reemplaza la grilla fija de botones) --- */
.mp-photo-editor-agent-log {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 0.7rem;
  padding-right: 0.2rem;
}

.mp-photo-editor-agent-bubble {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.35;
}

.mp-photo-editor-agent-bubble.user {
  align-self: flex-end;
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mp-photo-editor-agent-bubble.agent {
  align-self: flex-start;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.mp-photo-editor-agent-bubble.agent.error {
  border-color: #ef4444;
  color: #ef4444;
}

.mp-photo-editor-agent-bubble.agent.pending {
  color: var(--text-dimmer);
  font-style: italic;
}

.mp-photo-editor-agent-form {
  display: flex;
  gap: 0.5rem;
}

.mp-photo-editor-agent-form .mp-photo-editor-text-input {
  flex: 1 1 auto;
}

.mp-photo-editor-agent-form .mp-btn-gradient {
  width: auto;
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
}

/* --- Catálogo de música propia (dentro de "Música de fondo") --- */
.mp-photo-editor-music-catalog {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}

.mp-photo-editor-music-track {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.7rem;
}

.mp-photo-editor-music-track.selected {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-photo-editor-music-track-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-photo-editor-music-track-info strong {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-photo-editor-music-track-use {
  flex: 0 0 auto;
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* Escuchar un adelanto de la canción antes de elegirla -- separado de
   "Usar" a propósito: previsualizar y elegir son dos acciones distintas. */
.mp-photo-editor-music-track-preview {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-solid-2, rgba(255, 255, 255, 0.06));
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-photo-editor-music-track-preview.playing {
  background: var(--accent-a);
  color: #fff;
  border-color: var(--accent-a);
}

/* --- Collage (grilla con la foto actual + fotos adicionales) --- */
.mp-photo-editor-collage-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.mp-photo-editor-collage-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px dashed var(--border);
  background: var(--panel-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmer);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.mp-photo-editor-collage-slot.filled {
  border-style: solid;
  border-color: var(--accent-a);
}

.mp-photo-editor-collage-slot.locked {
  cursor: default;
  border-color: var(--border);
}

.mp-photo-editor-collage-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-photo-editor-collage-slot-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10, 8, 18, 0.7);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mp-photo-editor-collage-slot-label {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: rgba(10, 8, 18, 0.55);
}

.mp-photo-editor-collage-recent-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  margin-bottom: 0.6rem;
}

/* --- Agregar texto (capas arrastrables sobre la foto) --- */
.mp-photo-editor-text-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.mp-photo-editor-text-layer {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 90%;
  font-weight: 700;
  font-family: Arial, sans-serif;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
  cursor: move;
  touch-action: none;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px dashed transparent;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.mp-photo-editor-text-layer.selected {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.15);
}

.mp-photo-editor-text-font-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.mp-photo-editor-text-font-chip {
  flex: 0 0 auto;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}

.mp-photo-editor-text-font-chip.active {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-photo-editor-text-color-row {
  display: flex;
  gap: 0.5rem;
}

.mp-photo-editor-text-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}

.mp-photo-editor-text-color-swatch.active {
  border-color: var(--accent-a);
  box-shadow: 0 0 0 2px var(--accent-a);
}

/* --- Barra de pestañas (mismo lenguaje visual que .mp-bottomnav-item) --- */
.mp-photo-editor-tabbar {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.mp-photo-editor-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 52px;
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.3rem;
  cursor: pointer;
}

.mp-photo-editor-tab.active {
  color: var(--accent-a);
}

/* --- Grilla de herramientas de IA --- */
.mp-photo-editor-ia-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.7rem;
}

.mp-photo-editor-coin-balance {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
}

.mp-photo-editor-ai-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

@media (max-width: 520px) {
  .mp-photo-editor-ai-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mp-photo-editor-ai-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.4rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mp-photo-editor-ai-tool:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.mp-photo-editor-ai-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mp-photo-editor-ai-tool-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mp-photo-editor-ai-tool-thumb.thumb-gold { background: var(--gradient-yu-gold); }
.mp-photo-editor-ai-tool-thumb.thumb-blue { background: var(--gradient-yu-blue); }
.mp-photo-editor-ai-tool-thumb.thumb-mint { background: var(--gradient-yu-green); }
.mp-photo-editor-ai-tool-thumb.thumb-pink { background: linear-gradient(135deg, #ec4899, #be185d); }
.mp-photo-editor-ai-tool-thumb.thumb-violet { background: var(--gradient-yu-violet); }

.mp-photo-editor-ai-tool-label {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
}

.mp-photo-editor-ai-tool-cost {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* --- Pestaña Ajustar (sliders manuales) --- */
.mp-photo-editor-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 0.7rem;
}

.mp-photo-editor-slider-row input[type="range"] {
  flex: 1 1 auto;
}

/* --- Fila de filtros con miniatura real de la foto --- */
.mp-photo-editor-filter-row {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.mp-photo-editor-filter-swatch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.68rem;
}

.mp-photo-editor-filter-swatch img {
  width: 62px;
  height: 62px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 2px solid transparent;
}

.mp-photo-editor-filter-swatch.selected img {
  border-color: var(--accent-a);
}

.mp-photo-editor-filter-swatch.selected {
  color: var(--text);
  font-weight: 700;
}

/* Solo la miniatura tocada muestra que está aplicando -- el resto de las
   opciones se queda como estaba, para que no se sienta como si "se
   seleccionara todo" de golpe. */
.mp-photo-editor-swatch.applying img,
.mp-photo-editor-filter-swatch.applying img,
.mp-photo-editor-ai-tool.applying .mp-photo-editor-ai-tool-thumb {
  animation: pe-applying-pulse 0.9s ease-in-out infinite;
}

.mp-photo-editor-ai-tool.applying {
  border-color: var(--accent-a);
}

@keyframes pe-applying-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.mp-photo-editor-tabpanel {
  margin-bottom: 0.8rem;
}

/* ===================================================================
   EDITOR DE FOTOS — pantalla de subida (arrastrar/seleccionar, fotos
   recientes ya subidas a VYNKO, consejo, continuar)
   =================================================================== */
.mp-photo-editor-dropzone {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1rem;
  text-align: center;
  margin-bottom: 0.9rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.mp-photo-editor-dropzone.dragover {
  border-color: var(--accent-a);
  background: var(--gradient-soft);
}

.mp-photo-editor-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-dim);
}

.mp-photo-editor-dropzone-empty svg {
  color: var(--accent-a);
  margin-bottom: 0.3rem;
}

.mp-photo-editor-dropzone-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

.mp-photo-editor-dropzone-sub {
  font-size: 0.78rem;
}

.mp-photo-editor-dropzone-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.mp-photo-editor-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.mp-photo-editor-picker-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.mp-photo-editor-picker-chip {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 0.6rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mp-photo-editor-formats-note {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-dimmer);
  margin: 0 0 0.9rem;
}

.mp-photo-editor-recent-section {
  margin-bottom: 0.9rem;
}

.mp-photo-editor-recent-head {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.mp-photo-editor-recent-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.mp-photo-editor-recent-item {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mp-photo-editor-recent-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-photo-editor-recent-item.selected {
  border-color: var(--accent-a);
}

.mp-photo-editor-recent-item-check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-a);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

.mp-photo-editor-recent-item.selected .mp-photo-editor-recent-item-check {
  display: flex;
}

.mp-photo-editor-tip {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  background: var(--gradient-soft);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

.mp-photo-editor-continue-btn {
  width: 100%;
}

.mp-photo-editor-continue-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   VYNKO PLAY -- videos públicos estilo Reels (public/index.html
   #vynkoPlayView). Reusa TAL CUAL el mismo componente de publicación que
   el feed normal (renderPostElement() en client.js: mismo like/comentar/
   compartir/guardar, mismo feedVideoObserver para autoplay al hacer
   scroll) -- acá abajo solo se reposiciona todo como overlays de pantalla
   completa, sin tocar ni un poco la lógica de esas interacciones.
   ============================================================ */
.mp-vynko-play-view {
  /* Pantalla completa de verdad -- antes era una tarjeta más dentro de
     Inicio (con esquinas redondeadas, la barra VYNKO de arriba y la nav de
     abajo todavía visibles alrededor), mismo problema que tenía el visor de
     video antes de arreglarlo. Mismo patrón que .mp-live-full (En vivo):
     position:fixed + inset:0 la saca del flujo normal de la página y tapa
     todo lo demás, sin depender de medir en JS el alto de la barra
     superior/inferior (ya no están alrededor, así que no hay que
     descontarlas). */
  position: fixed;
  inset: 0;
  z-index: 2200;
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #000;
  border-radius: 0;
}

.mp-vynko-play-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.7rem + env(safe-area-inset-top)) 0.9rem 0.7rem;
  background: #000;
  z-index: 4;
}

.mp-vynko-play-title {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.mp-vynko-play-icon-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-vynko-play-feed {
  flex: 1 1 auto;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  /* OJO: nada de padding acá -- un padding-bottom en el contenedor que
     scrollea le agrega espacio extra DESPUÉS del último hijo, pero cada
     tarjeta sigue siendo height:100% de esta caja, así que ese espacio de
     más rompía el encastre del scroll-snap y dejaba asomar una tira del
     video SIGUIENTE por abajo. La barra de gestos/home indicator se
     descuenta adentro de cada tarjeta (ver más abajo), no acá. */
}

.mp-vynko-play-feed::-webkit-scrollbar {
  display: none;
}

.mp-vynko-play-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.7);
}

.mp-vynko-play-empty.hidden {
  display: none;
}

#vynkoPlaySentinel {
  height: 1px;
}

/* --- El post card de siempre, reciclado a pantalla completa --- */
#vynkoPlayFeed .mp-post-card {
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  background: #000;
  border: none;
  border-radius: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  animation: none;
}

#vynkoPlayFeed .mp-post-media-wrap,
#vynkoPlayFeed video.mp-post-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

#vynkoPlayFeed video.mp-post-media {
  object-fit: cover;
}

/* Encabezado (avatar/nombre/seguir/menú) flotando arriba, con degradé para
   que el texto blanco se lea encima de cualquier video. */
#vynkoPlayFeed .mp-post-card-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0.8rem 3.2rem 2.2rem 0.8rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
  cursor: default;
}

#vynkoPlayFeed .mp-post-card-header strong,
#vynkoPlayFeed .mp-post-card-header .note {
  color: #fff;
}

#vynkoPlayFeed .mp-post-card-header .note {
  opacity: 0.85;
}

/* Conteos (likes/comentarios/compartidos) flotando justo arriba de la
   descripción -- mismos elementos que ya actualiza solo el resto del
   código (like/comentar suman en vivo, mp-post-card-like-summary abre el
   modal de reacciones) sin tocar nada de esa lógica, solo reacomodados acá. */
#vynkoPlayFeed .mp-post-card-counts-facebook {
  position: absolute;
  left: 0;
  right: 4.4rem;
  bottom: calc(3.2rem + env(safe-area-inset-bottom));
  z-index: 3;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #fff;
  font-size: 0.72rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

#vynkoPlayFeed .mp-post-card-counts-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

#vynkoPlayFeed .mp-post-card-counts-left.hidden {
  display: none;
}

/* El "X comentarios / X compartidas" flotante sobre el video sobraba (se
   metía en el medio del video). El número ahora va bajo cada ícono de la
   barra derecha (mp-act-count). La suma de reacciones (izquierda) sí queda. */
#vynkoPlayFeed .mp-post-card-counts-right {
  display: none;
}
#vynkoPlayFeed .mp-post-card-action .mp-act-count {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
#vynkoPlayFeed .mp-post-card-action .mp-act-label { white-space: nowrap; }
/* Todos los botones con la misma altura (ícono + palabra + número), aunque
   el número sea 0 -- así el espacio entre iconos queda parejo. */
#vynkoPlayFeed .mp-post-card-action {
  min-height: 62px;
  justify-content: flex-start;
}

/* Descripción flotando abajo a la izquierda, dejando lugar a la derecha
   para la columna de Me gusta/Comentar/Compartir/Guardar. Se recorta a 2
   líneas -- una descripción muy larga no debe empujar/tapar los conteos
   de arriba. */
#vynkoPlayFeed .mp-post-card-caption {
  position: absolute;
  left: 0;
  right: 4.4rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 3;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  padding: 0 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Columna vertical de acciones a la derecha (como Reels/TikTok) en vez de
   la fila horizontal del feed normal -- mismos botones, mismos manejadores
   de clic, solo reacomodados. */
#vynkoPlayFeed .mp-post-card-actions {
  position: absolute;
  right: 0.3rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  top: auto;
  left: auto;
  z-index: 3;
  flex-direction: column;
  align-items: center;
  border-top: none;
  padding: 0;
  gap: 1rem;
  width: auto;
}

#vynkoPlayFeed .mp-post-card-action {
  flex-direction: column;
  gap: 0.2rem;
  flex: 0 0 auto;
  color: #fff;
  font-size: 0.68rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  padding: 0.2rem 0.4rem;
}

#vynkoPlayFeed .mp-post-card-action:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#vynkoPlayFeed .mp-post-card-action svg {
  width: 31px;
  height: 31px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

#vynkoPlayFeed .mp-feed-mute-btn {
  z-index: 3;
}

/* ===== Perfil de empresa (Etapa 1) ===== */
.mp-biz-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.mp-biz-header-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.mp-biz-header-info h2 {
  margin: 0;
  font-size: 1.1rem;
}

.mp-biz-category {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold);
  background: rgba(232, 177, 61, 0.14);
  border: 1px solid rgba(232, 177, 61, 0.3);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
}

.mp-biz-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.mp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}

/* Mismo minmax(0, 1fr) que el resto de las grillas de esta app (no "1fr" a
   secas): sin esto el contenido de adentro (nombre largo, descripción)
   puede empujar una columna mucho más ancha que la otra. */
.mp-biz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.mp-biz-album-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--panel-solid);
  border: 1px solid rgba(232, 177, 61, 0.18);
  border-radius: var(--radius-md);
  padding: 1rem 0.9rem;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  min-width: 0;
}

/* ===== Empresas: encabezado grande + pestañas de filtro + tarjetas con
   portada (pedido explícito con una captura de referencia) ===== */
.mp-biz-discovery-hero {
  text-align: center;
  padding: 0.4rem 0.5rem 1rem;
}

.mp-biz-discovery-hero h2 {
  margin: 0 0 0.2rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.mp-biz-discovery-toolbar {
  flex-wrap: wrap;
}

.mp-biz-discovery-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-biz-filter-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
}

/* Mismo criterio que .mp-conv-filter-pill.active: tinte suave en vez de
   relleno sólido, para que no se sienta "más grande" que las demás. */
.mp-biz-filter-pill.active {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.4);
  color: #0ea5e9;
}

.mp-biz-mybiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1.5px solid var(--biz-blue, #1791d0);
  color: var(--biz-blue, #1791d0);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.mp-biz-discovery-card {
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  color: var(--text);
  min-width: 0;
}

.mp-biz-discovery-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--panel-2);
}

.mp-biz-discovery-cover-fallback {
  background-image: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(20, 184, 166, 0.18));
}

.mp-biz-discovery-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.6rem 0.85rem 0.9rem;
}

.mp-biz-discovery-logo {
  position: absolute;
  top: -22px;
  left: 0.7rem;
  border-radius: 50%;
  border: 3px solid var(--panel-solid);
  background: var(--panel-solid);
  line-height: 0;
}

.mp-biz-discovery-body strong {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mp-biz-discovery-category {
  font-size: 0.76rem;
  color: var(--text-dim);
}

.mp-biz-discovery-desc {
  font-size: 0.76rem;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.1rem 0 0.5rem;
}

.mp-biz-discovery-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(23, 145, 208, 0.12);
  color: var(--biz-blue, #1791d0);
  font-size: 0.78rem;
  font-weight: 700;
}

.mp-biz-album-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 0.2rem;
}

.mp-biz-album-card strong {
  font-size: 0.88rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-biz-item-card {
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  border: 1px solid rgba(232, 177, 61, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
  position: relative;
}

.mp-biz-item-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.mp-biz-item-card-body {
  padding: 0.7rem 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mp-biz-item-card-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.mp-biz-item-card-desc {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 0;
}

.mp-biz-item-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.mp-biz-item-card-price {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.85rem;
}

.mp-biz-item-card-delivery {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.mp-biz-item-card-delete {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-biz-video-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0a0a0a;
  aspect-ratio: 9 / 16;
  cursor: pointer;
}

.mp-biz-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.mp-biz-highlight {
  outline: 3px solid var(--biz-blue, #1791d0);
  outline-offset: 2px;
}

.mp-biz-video-duration {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

/* --- Ficha de la empresa (diseño de referencia): portada arriba, logo
   superpuesto con punto de "en línea", nombre + verificado, categoría y
   ciudad, calificación + Seguir, descripción, 3 datos (horario / ubicación /
   experiencia), botones, beneficio VYNKO y pestañas. Todo dentro de
   #businessProfileView (ahí viven las variables --biz-*). --- */
#businessProfileView {
  --bz-blue: #2563eb;
  --bz-blue-soft: #e8f0fe;
  --bz-green: #16a34a;
  --bz-red: #dc2626;
}

.mp-biz-header-card {
  position: relative;
  padding: 0 0 1.1rem;
  overflow: hidden;
  border-radius: 20px;
}

.mp-biz-cover {
  width: 100%;
  aspect-ratio: 16 / 6;
  max-height: 11rem;
  background: var(--gradient);
  background-size: cover;
  background-position: center;
}

/* Con imagen: alto según la propia imagen, completa (sin recortar). Si es
   muy alta se limita y se ve entera (contain) sobre el fondo de color. */
.mp-biz-cover.has-image {
  aspect-ratio: auto;
  max-height: none;
  line-height: 0;
}

.mp-biz-cover.has-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 16rem;
  object-fit: contain;
}

.mp-biz-card-body {
  padding: 0 1.1rem;
}

.mp-biz-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: -2.6rem;
}

/* Logo más grande que el avatar de 56px de siempre, como en el diseño. */
.mp-biz-logo-wrap .mp-avatar-round-56 {
  width: 78px;
  height: 78px;
  font-size: 1.5rem;
}

.mp-biz-logo-holder {
  position: relative;
  flex-shrink: 0;
  display: block;
}

.mp-biz-logo-wrap {
  display: block;
  border-radius: 50%;
  border: 4px solid var(--panel-solid);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--panel-solid);
}

.mp-biz-online-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
}

/* El nombre va DEBAJO de la portada (el logo es el que la pisa): sin este
   padding, un nombre largo de dos líneas se montaba sobre la imagen. */
.mp-biz-header-main {
  min-width: 0;
  padding-top: 2.8rem;
}

.mp-biz-name {
  display: block;
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.22;
  font-weight: 800;
  color: var(--biz-text);
}

.mp-biz-verified {
  display: inline-block;
  vertical-align: -4px;
  margin-left: 0.15rem;
}

.mp-biz-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-top: 0.45rem;
}

.mp-biz-category {
  align-self: center;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.22rem 0.85rem;
}

.mp-biz-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.92rem;
  color: var(--biz-text);
}

.mp-biz-location-chip svg {
  flex-shrink: 0;
  color: var(--biz-text-dim);
}

.mp-biz-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.mp-biz-meta-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--biz-text);
}

.mp-biz-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--biz-text);
  white-space: nowrap;
}

.mp-biz-followers {
  white-space: nowrap;
}

.mp-biz-rating-stars {
  color: var(--biz-amber);
  font-size: 0.95rem;
  letter-spacing: 0;
}

.mp-biz-rating:not(.hidden)::after {
  content: '·';
  margin-left: 0.25rem;
}

.mp-biz-follow-btn {
  font-family: inherit;
  flex-shrink: 0;
  background: #fff;
  color: var(--bz-blue);
  border: 1.5px solid var(--bz-blue);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.mp-biz-follow-btn.following {
  background: var(--bz-blue-soft);
}

.mp-biz-description {
  margin: 0.8rem 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--biz-text-dim);
}

.mp-biz-info-row {
  display: flex;
  align-items: stretch;
  margin-top: 1rem;
}

.mp-biz-info-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  font-size: 0.76rem;
  line-height: 1.25;
}

.mp-biz-info-cell:first-child {
  padding-left: 0;
}

.mp-biz-info-cell:not(.hidden) ~ .mp-biz-info-cell:not(.hidden) {
  border-left: 1px solid var(--biz-border);
}

.mp-biz-info-cell > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mp-biz-info-cell strong {
  font-weight: 600;
  color: var(--biz-text);
}

.mp-biz-info-cell strong.open {
  color: var(--bz-green);
  font-weight: 700;
}

.mp-biz-info-cell strong.closed {
  color: var(--bz-red);
  font-weight: 700;
}

.mp-biz-info-cell span,
.mp-biz-info-cell a {
  color: var(--biz-text-dim);
  text-decoration: none;
}

.mp-biz-info-cell a {
  color: var(--bz-blue);
}

.mp-biz-info-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.mp-biz-info-icon.green {
  color: var(--bz-green);
}

.mp-biz-info-icon.blue {
  color: var(--bz-blue);
}

.mp-biz-actions-row {
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  margin-top: 1rem;
}

.mp-biz-actions-row.secondary {
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

.mp-biz-btn-primary,
.mp-biz-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.mp-biz-btn-primary {
  flex: 1.6 1 0;
  background: var(--bz-blue);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
}

.mp-biz-btn-soft {
  flex: 1 1 0;
  background: #f4f6fa;
  color: var(--biz-text);
  border: 1px solid var(--biz-border);
}

.mp-biz-btn-soft.saved {
  color: var(--bz-blue);
  background: var(--bz-blue-soft);
}

.mp-biz-call-wrap {
  flex: 1 1 0;
  display: flex;
}

.mp-biz-call-wrap .mp-biz-btn-soft {
  width: 100%;
}

.mp-biz-actions-row.secondary > .mp-biz-btn-soft {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.4rem;
  font-size: 0.88rem;
}

.mp-biz-actions-row.secondary > .mp-biz-btn-soft svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* "Ver planes" (extra, no está en el diseño) va en su propia fila. */
.mp-biz-actions-row.secondary > #businessPlansBtn {
  flex: 1 1 100%;
}

.mp-biz-edit-btn {
  display: flex;
  width: 100%;
  margin-top: 0.8rem;
}

.mp-biz-benefit {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  color: #1e3a8a;
}

.mp-biz-benefit svg {
  flex-shrink: 0;
}

.mp-biz-benefit div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mp-biz-benefit strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.mp-biz-benefit span {
  font-size: 0.92rem;
}

.mp-biz-tabs {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  background: var(--biz-card);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--biz-border);
  padding: 0 0.6rem;
  scrollbar-width: none;
}

.mp-biz-tabs::-webkit-scrollbar {
  display: none;
}

.mp-biz-tab {
  flex: 1 0 auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 3px solid transparent;
  color: var(--biz-text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.9rem 0.45rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.mp-biz-tab.active {
  color: var(--bz-blue);
  border-bottom-color: var(--bz-blue);
  font-weight: 700;
}

.mp-biz-tab-panel {
  margin-bottom: 1rem;
}

.mp-biz-featured {
  background: var(--biz-card);
  border-radius: 0 0 14px 14px;
  padding: 1rem 1rem 1.1rem;
}

.mp-biz-featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.mp-biz-featured-head h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--biz-text);
}

.mp-biz-see-all {
  font-family: inherit;
  background: none;
  border: none;
  color: var(--bz-blue);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0;
}

.mp-biz-featured-grid {
  display: grid;
  grid-auto-flow: column;
  /* 3 tarjetas iguales que llenan el ancho (2 separaciones de 0.6rem). */
  grid-auto-columns: calc((100% - 1.2rem) / 3);
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.15rem 0.1rem 0.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mp-biz-featured-grid::-webkit-scrollbar {
  display: none;
}

.mp-biz-featured-card {
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}

.mp-biz-featured-photo {
  flex-shrink: 0;
  aspect-ratio: 5 / 3;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}

.mp-biz-featured-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El cuerpo ocupa todo el alto que sobre y el botón queda siempre abajo:
   así las tarjetas miden lo mismo aunque una descripción sea más corta. */
.mp-biz-featured-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.5rem 0.5rem 0.55rem;
}

.mp-biz-featured-body strong {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--biz-text);
}

.mp-biz-featured-body p {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--biz-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

.mp-biz-featured-price {
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--biz-text);
  margin-top: 0.1rem;
}

.mp-biz-featured-btn {
  font-family: inherit;
  margin-top: auto;
  background: #fff;
  color: var(--bz-blue);
  border: 1.5px solid var(--bz-blue);
  border-radius: 999px;
  padding: 0.32rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.mp-biz-featured-body .mp-biz-featured-price + .mp-biz-featured-btn {
  margin-top: auto;
}

.mp-biz-form-row {
  display: flex;
  gap: 0.7rem;
}

.mp-biz-form-row > * {
  flex: 1 1 0;
  min-width: 0;
}

.mp-biz-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-biz-info-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--biz-border);
  font-size: 0.92rem;
}

.mp-biz-info-list li:last-child {
  border-bottom: none;
}

.mp-biz-info-list li span {
  color: var(--biz-text-dim);
  flex-shrink: 0;
}

.mp-biz-info-list li strong,
.mp-biz-info-list li a {
  text-align: right;
  color: var(--biz-text);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mp-biz-info-list li a {
  color: var(--bz-blue);
}

.mp-biz-info-list li.wide {
  flex-direction: column;
  gap: 0.3rem;
}

.mp-biz-info-list li.wide p {
  margin: 0;
  color: var(--biz-text);
  line-height: 1.4;
}

/* Detalle de un servicio: tarjeta blanca propia (el .modal-box de la app es
   translúcido y dejaba el texto ilegible sobre la pantalla de atrás). */
.mp-biz-item-modal {
  position: relative;
  max-width: 24rem;
  width: calc(100% - 2rem);
  padding: 0 0 1.1rem;
  overflow: hidden;
  background: #fff;
  color: var(--biz-text);
  border-radius: 18px;
}

.mp-biz-item-modal > h3,
.mp-biz-item-modal > p,
.mp-biz-item-modal > .mp-biz-item-modal-price-row {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}

.mp-biz-item-modal .mp-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: #101828;
}

.mp-biz-item-modal-photo {
  aspect-ratio: 16 / 10;
  max-height: 14rem;
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}

.mp-biz-item-modal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-biz-item-modal > h3 {
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  color: #101828;
}

.mp-biz-item-modal-photo:not(.hidden) + h3 {
  margin-top: 0;
}

.mp-biz-item-modal > p {
  color: #667085;
}

.mp-biz-item-modal-price-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.mp-biz-item-modal .mp-biz-btn-primary {
  background: var(--bz-blue);
  width: calc(100% - 2.2rem);
  margin: 0 1.1rem;
}

/* Ficha de la empresa BORDE A BORDE en celular (el diseño ocupa todo el
   ancho): se quita el margen lateral de .mp-main solo mientras esta vista
   está abierta (clase body-in-business, la pone switchView -- sin :has(),
   que el WebView viejo de Android no entiende) y los bloques dejan de ser
   tarjetas flotantes. Lo que no es parte de la ficha (grilla de Empresas,
   crear/editar perfil, beneficio) conserva su margen propio. */
@media (max-width: 900px) {
  body.body-in-business .mp-main {
    padding-left: 0;
    padding-right: 0;
  }

  body.body-in-business #businessProfileView {
    background: #fff;
  }

  /* Cada bloque de la ficha: sin margen lateral (el de arriba, .mp-card
     dentro de #businessProfileView, es de 1rem), sin esquinas ni sombra. */
  body.body-in-business #businessProfileView .mp-card,
  body.body-in-business #businessProfileView .mp-biz-featured {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
  }

  /* La portada arranca justo debajo de la barra "Empresa". */
  body.body-in-business #businessProfileView #businessHeaderCard {
    margin-top: 0;
  }

  body.body-in-business #businessProfileView .mp-pay-topbar,
  body.body-in-business #businessProfileView .mp-biz-tabs {
    border-radius: 0;
  }

  /* Lo que NO es parte de la ficha conserva su margen y sus esquinas. */
  body.body-in-business #businessProfileView #businessEditSection {
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--biz-border);
  }

  body.body-in-business #businessCreditCard,
  body.body-in-business #businessCreditManage,
  body.body-in-business #businessProfileView .mp-biz-benefit {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  body.body-in-business #businessProfileView .mp-biz-featured {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --- Carruseles horizontales (productos, videos) --- */
.mp-biz-carousel {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scroll-snap-type: x proximity;
}

.mp-biz-carousel > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.mp-biz-carousel .mp-biz-album-card,
.mp-biz-carousel .mp-biz-discovery-card {
  width: 148px;
}

.mp-biz-carousel .mp-biz-item-card {
  width: 160px;
}

.mp-biz-carousel .mp-biz-video-card {
  width: 120px;
  aspect-ratio: 9 / 16;
}

/* --- Reseñas --- */
.mp-biz-stars-input {
  display: flex;
  gap: 0.3rem;
}

.mp-biz-star-btn {
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--border-strong);
  cursor: pointer;
  padding: 0;
}

.mp-biz-star-btn.active {
  color: var(--gold);
}

.mp-biz-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mp-biz-review-row {
  display: flex;
  gap: 0.7rem;
}

.mp-biz-review-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mp-biz-review-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-biz-review-stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.mp-biz-review-comment {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0.15rem 0 0;
}

.mp-biz-inbox-row {
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 0.4rem;
  margin: -0.4rem;
}

.mp-biz-inbox-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mp-biz-inbox-unread {
  background: var(--red, #e5484d);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.4rem;
  min-width: 1.2rem;
  text-align: center;
}

/* Pestañas Mensajes/Pedidos dentro de la bandeja del negocio. */
.mp-biz-inbox-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
}

.mp-biz-inbox-tab {
  background: none;
  border: none;
  padding: 0.5rem 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.mp-biz-inbox-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent, #1791d0);
}

/* Hilo de chat propio de "Mi negocio" -- pedido explícito: responder acá NO
   debe abrir el chat personal, así que no reusa #chatPanel/#messagesView
   para nada, tiene su propia burbuja/estilos, más simple a propósito
   (texto solamente por ahora). */
.mp-biz-chat-thread-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
}

.mp-biz-chat-thread-head strong {
  font-size: 0.95rem;
}

.mp-biz-chat-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.2rem 0.1rem;
}

.mp-biz-chat-bubble {
  position: relative;
  max-width: 78%;
  align-self: flex-start;
  background: var(--panel-solid);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0.2rem;
  padding: 0.45rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Mismo motivo que .mp-chat-bubble: evita que el navegador seleccione
     el texto en celular al mantener presionado. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mp-biz-chat-bubble.mine {
  align-self: flex-end;
  background: var(--accent, #1791d0);
  color: #fff;
  border-radius: var(--radius-md) var(--radius-md) 0.2rem var(--radius-md);
}

.mp-biz-chat-bubble-text {
  font-size: 0.85rem;
  word-break: break-word;
  white-space: pre-wrap;
}

.mp-biz-chat-bubble-time {
  font-size: 0.65rem;
  opacity: 0.7;
  align-self: flex-end;
}

.mp-biz-chat-thread-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mp-biz-chat-thread-form input {
  flex: 1;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.15));
  background: var(--panel-solid);
  color: inherit;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

/* Antes de escribir: micrófono, neutro (no compite con el de enviar). */
.mp-biz-chat-thread-icon-btn {
  background: var(--panel-solid);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.15));
  color: inherit;
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Enviar -- pedido explícito: "que se vea un poquito más grande y que se
   identifique que es un botón para enviar, porque aparece como un punto".
   Ícono SÓLIDO (no un contorno fino) + más grande + circulo de acento bien
   sólido, para que se lea como botón a simple vista, no como un punto. */
.mp-biz-chat-thread-send-btn {
  background: var(--accent, #1791d0);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.mp-biz-chat-thread-recording-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.mp-biz-chat-thread-recording-bar #businessChatThreadRecordingTimer {
  flex: 1;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.mp-biz-chat-thread-recording-bar > button:first-child {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  padding: 0.3rem;
}

.mp-biz-chat-thread-recording-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--red, #e5484d);
  animation: mp-biz-recording-pulse 1s infinite;
}

@keyframes mp-biz-recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.mp-biz-item-card-order-btn {
  align-self: flex-start;
  background: var(--accent, #1791d0);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.2rem;
}

/* Topbar de "Mi negocio": título + subtítulo apilados, engranaje a la
   derecha (visibility, no display -- para que el back-button y el
   engranaje sigan pesando lo mismo y el título quede centrado en
   TODOS los modos, no solo en éste). */
.mp-biz-topbar-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.mp-biz-topbar-titles .note {
  font-size: 0.75rem;
}

/* Tarjeta resumen del negocio arriba de la bandeja (pedido explícito, con
   una captura de referencia). */
.mp-biz-inbox-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  background: var(--panel-solid);
  border-radius: var(--radius-md);
  margin-bottom: 0.8rem;
}

.mp-biz-inbox-summary-logo {
  flex-shrink: 0;
}

.mp-biz-inbox-summary-body {
  flex: 1;
  min-width: 0;
}

.mp-biz-inbox-summary-name-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mp-biz-inbox-summary-name-row strong {
  font-size: 1rem;
}

.mp-biz-inbox-summary-check {
  flex-shrink: 0;
}

.mp-biz-inbox-summary .note {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
}

.mp-biz-inbox-summary-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--accent, #1791d0);
  color: var(--accent, #1791d0);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* Contadores en las pestañas Mensajes/Pedidos. */
.mp-biz-inbox-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.mp-biz-inbox-badge {
  background: var(--panel-solid-2, rgba(255, 255, 255, 0.12));
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.4rem;
  min-width: 1.1rem;
  text-align: center;
}

.mp-biz-inbox-badge-red {
  background: var(--red, #e5484d);
  color: #fff;
}

/* Buscador de conversaciones. */
.mp-biz-inbox-search-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 0;
}

.mp-biz-inbox-search-row input {
  flex: 1;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.15));
  background: var(--panel-solid);
  color: inherit;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

#businessInboxFilterBtn.active {
  background: var(--accent, #1791d0);
  color: #fff;
  border-color: var(--accent, #1791d0);
}

/* Panel de Filtros del embudo -- exclusivamente organizar la lista de
   conversaciones (Todas/No leídos/Pendientes/Pedidos/orden), separado a
   propósito del buscador de arriba (nombre/contenido). */
.mp-biz-inbox-filter-wrap {
  position: relative;
}

.mp-biz-inbox-filter-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  background: var(--panel-solid);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
}

.mp-biz-inbox-filter-opt {
  background: none;
  border: none;
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: inherit;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}

.mp-biz-inbox-filter-opt:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mp-biz-inbox-filter-opt.active {
  background: var(--accent, #1791d0);
  color: #fff;
  font-weight: 600;
}

/* Punto de estado de la conversación (🟢 respondido / 🟡 esperando el
   negocio / 🔴 sin leer) -- ver businessConversationStatus() en client.js. */
.mp-biz-inbox-row2-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mp-biz-inbox-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-biz-inbox-status-dot.green { background: #34c759; }
.mp-biz-inbox-status-dot.yellow { background: #f5a623; }
.mp-biz-inbox-status-dot.red { background: #e5484d; }

/* Filas de conversación (avatar+punto en línea, nombre/preview, hora +
   contador, chevron) -- reemplaza el layout genérico de mp-biz-review-row
   para esta lista puntual. */
.mp-biz-inbox-row2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
}

.mp-biz-inbox-row2:last-child {
  border-bottom: none;
}

.mp-biz-inbox-row2:hover {
  background: rgba(255, 255, 255, 0.04);
}

.mp-biz-inbox-row2-avatar {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}

.mp-biz-inbox-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #34c759;
  border: 2px solid var(--panel-solid);
}

.mp-biz-inbox-row2-body {
  flex: 1;
  min-width: 0;
}

.mp-biz-inbox-row2-body strong {
  display: block;
  font-size: 0.9rem;
}

.mp-biz-inbox-row2-body p {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-biz-inbox-row2-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.mp-biz-inbox-row2-time {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.mp-biz-inbox-chevron {
  flex-shrink: 0;
  color: var(--text-dim);
}

/* Tarjeta promo del futuro bot de respuestas automáticas (fuera de esta
   ronda a propósito -- solo un adelanto). */
.mp-biz-inbox-promo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  background: var(--panel-solid);
  border-radius: var(--radius-md);
  margin-top: 0.8rem;
}

.mp-biz-inbox-promo-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.mp-biz-inbox-promo-body {
  flex: 1;
  min-width: 0;
}

.mp-biz-inbox-promo-body strong {
  font-size: 0.85rem;
}

.mp-biz-inbox-promo-body .note {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
}

.mp-biz-order-status {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
}

.mp-biz-order-status-pending {
  background: rgba(245, 166, 35, 0.18);
  color: #f5a623;
}

.mp-biz-order-status-confirmed {
  background: rgba(52, 199, 89, 0.18);
  color: #34c759;
}

.mp-biz-order-status-cancelled {
  background: rgba(229, 72, 77, 0.18);
  color: #e5484d;
}

.mp-biz-order-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.mp-biz-order-actions .mp-btn-outline {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

/* ===== Perfil de empresa: tema propio (fondo claro + azul), pedido
   explícito con una captura de referencia -- "así debe quedar tal cual".
   El resto de la app se queda en el tema oscuro de siempre; esto se
   scopea a propósito bajo #businessProfileView (nunca al :root) para no
   re-temizar toda la app, solo esta vista. Reusa las mismas clases
   compartidas (.mp-card, .mp-btn-outline, .mp-ys-input, etc.) pero
   sobreescribe sus colores acá adentro -- el selector con #id le gana en
   especificidad a la regla original sin tocarla para el resto de la app. */
#businessProfileView {
  --biz-bg: #eef2f7;
  --biz-card: #ffffff;
  --biz-text: #101828;
  --biz-text-dim: #667085;
  --biz-border: #e4e7ec;
  --biz-blue: #1791d0;
  --biz-blue-dark: #0f6fa8;
  --biz-amber: #f5a623;
  --biz-amber-bg: #fdf1dc;
  --biz-amber-text: #b9770e;
  background: var(--biz-bg);
  min-height: 100%;
  color: var(--biz-text);
}

#businessProfileView .mp-pay-topbar {
  background: var(--biz-card);
  padding: 0.9rem 1rem;
  margin: 0;
  border-bottom: 1px solid var(--biz-border);
}

#businessProfileView .mp-pay-topbar h3 {
  color: var(--biz-text);
}

#businessProfileView .mp-vc-icon-btn {
  background: var(--biz-bg);
  border: 1px solid var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView .mp-card {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  margin: 0.9rem 1rem 0;
}

#businessProfileView h2,
#businessProfileView strong,
#businessProfileView .mp-panel-head h3 {
  color: var(--biz-text);
}

#businessProfileView .note,
#businessProfileView .field-label,
#businessProfileView .mp-ys-field-hint,
#businessProfileView .mp-ys-char-count {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-ys-field-hint a {
  color: var(--biz-blue);
}

#businessProfileView .mp-btn-gradient {
  background: var(--biz-blue);
  box-shadow: none;
}

#businessProfileView .mp-btn-gradient:hover {
  background: var(--biz-blue-dark);
  box-shadow: none;
}

#businessProfileView .mp-btn-outline {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView .mp-btn-outline:hover {
  background: #f5f7fa;
}

#businessProfileView .mp-ys-input,
#businessProfileView .mp-textarea {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView .mp-ys-dropzone {
  border-color: var(--biz-border);
  color: var(--biz-text-dim);
  background: #f9fafb;
}

#businessProfileView .mp-ys-create-btn {
  color: #1a1206;
}

#businessProfileView .mp-biz-category {
  color: var(--biz-amber-text);
  background: var(--biz-amber-bg);
  border-color: rgba(245, 166, 35, 0.35);
}

#businessProfileView .mp-biz-rating {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-rating-stars,
#businessProfileView .mp-biz-review-stars {
  color: var(--biz-amber);
}

#businessProfileView .mp-biz-review-comment {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-inbox-row:hover {
  background: #f5f7fa;
}

#businessProfileView .mp-biz-album-card,
#businessProfileView .mp-biz-item-card,
#businessProfileView .mp-biz-discovery-card,
#businessProfileView .mp-biz-video-card {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView .mp-biz-item-card-price {
  color: var(--biz-blue-dark);
}

#businessProfileView .mp-biz-item-card-desc {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-logo-wrap {
  border-color: var(--biz-card);
  background: var(--biz-card);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.15);
}

#businessProfileView .mp-biz-item-card-delivery {
  background: var(--biz-amber-bg);
  color: var(--biz-amber-text);
}

#businessProfileView .mp-biz-star-btn {
  color: var(--biz-border);
}

#businessProfileView .mp-biz-star-btn.active {
  color: var(--biz-amber);
}

#businessProfileView .mp-checkbox-label {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-inbox-tabs {
  border-bottom-color: var(--biz-border);
}

#businessProfileView .mp-biz-inbox-tab {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-inbox-tab.active {
  color: var(--biz-text);
  border-bottom-color: var(--biz-blue);
}

#businessProfileView .mp-biz-item-card-order-btn {
  background: var(--biz-blue);
}

#businessProfileView .mp-biz-order-row .note {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-chat-thread-head {
  border-bottom-color: var(--biz-border);
}

#businessProfileView .mp-biz-chat-bubble {
  background: var(--biz-bg);
  color: var(--biz-text);
}

#businessProfileView .mp-biz-chat-bubble.mine {
  background: var(--biz-blue);
}

#businessProfileView .mp-biz-chat-thread-form input {
  background: var(--biz-bg);
  border-color: var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView .mp-biz-chat-thread-send-btn {
  background: var(--biz-blue);
}

#businessProfileView .mp-biz-chat-thread-icon-btn {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView .mp-biz-inbox-summary,
#businessProfileView .mp-biz-inbox-promo {
  background: var(--biz-card);
  border: 1px solid var(--biz-border);
}

#businessProfileView .mp-biz-inbox-summary-name-row strong,
#businessProfileView .mp-biz-inbox-promo-body strong {
  color: var(--biz-text);
}

#businessProfileView .mp-biz-inbox-summary .note,
#businessProfileView .mp-biz-inbox-promo-body .note {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-inbox-summary-btn {
  border-color: var(--biz-blue);
  color: var(--biz-blue);
}

#businessProfileView .mp-biz-inbox-badge {
  background: var(--biz-bg);
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-inbox-search-row input {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
}

#businessProfileView #businessInboxFilterBtn.active {
  background: var(--biz-blue);
  border-color: var(--biz-blue);
  color: #fff;
}

#businessProfileView .mp-biz-inbox-filter-menu {
  background: var(--biz-card);
  border-color: var(--biz-border);
  color: var(--biz-text);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.15);
}

#businessProfileView .mp-biz-inbox-filter-opt:hover {
  background: #f5f7fa;
}

#businessProfileView .mp-biz-inbox-filter-opt.active {
  background: var(--biz-blue);
}

#businessProfileView .mp-biz-inbox-row2 {
  border-bottom-color: var(--biz-border);
}

#businessProfileView .mp-biz-inbox-row2:hover {
  background: #f5f7fa;
}

#businessProfileView .mp-biz-inbox-row2-body strong {
  color: var(--biz-text);
}

#businessProfileView .mp-biz-inbox-row2-body p,
#businessProfileView .mp-biz-inbox-row2-time,
#businessProfileView .mp-biz-inbox-chevron {
  color: var(--biz-text-dim);
}

#businessProfileView .mp-biz-inbox-online-dot {
  border-color: var(--biz-card);
}

/* ===== Vynko Citas -- mismo criterio que #businessProfileView: tema claro
   propio (blanco + rosa/morado, pedido explícito con captura de
   referencia), scopeado bajo #datingView para no re-temizar el resto de
   la app. Reusa .mp-pay-topbar/.mp-vc-icon-btn/.mp-ys-input/.field-label/
   .mp-btn-gradient/.mp-btn-outline/.checkbox-row/.note de siempre. ===== */
#datingView {
  --dt-bg: #eaf5ff;
  --dt-card: #ffffff;
  --dt-text: #0b2c4d;
  --dt-text-dim: #4c86b8;
  --dt-border: #cfe8fb;
  --dt-pink: #38bdf8;
  --dt-purple: #0ea5e9;
  --dt-gradient: linear-gradient(135deg, var(--dt-pink) 0%, var(--dt-purple) 100%);
  background: var(--dt-bg);
  color: var(--dt-text);
  /* Columna que llena el alto libre debajo del header -- ni un min-height
     inventado (100vh-3.5rem) que dejaba franjas vacías, ni alturas fijas:
     el panel visible es flex:1 y ocupa lo que sobra. */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* En celular: pantalla propia de borde a borde, sin los márgenes gruesos
   de .mp-main, y con el alto EXACTO debajo del header (nada de franjas). */
@media (max-width: 900px) {
  body.body-in-citas .mp-main {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  #datingView {
    min-height: calc(100vh - var(--mobile-topbar-h));
    min-height: calc(100dvh - var(--mobile-topbar-h));
  }
}

/* Pedido explícito: toda la sección de Citas pasa a blanco/azul cielo --
   Explorar/Matches/Chats/Perfil de un match ya no usan fondo oscuro, así
   que body-dt-dark no tiene que oscurecer #datingView (queda la clase
   puesta igual, la usa body-dt-fullscreen/otras reglas, pero esta ya no
   pisa el fondo claro de #datingView). */

/* El header y el panel visible: header fijo arriba, panel llena el resto. */
#datingView > .mp-pay-topbar { flex: 0 0 auto; }
#datingView > #datingWelcome,
#datingView > #datingWizard,
#datingView > #datingSuccess,
#datingView > #datingForm,
#datingView > #datingExplore {
  flex: 1 1 auto;
  min-height: 0;
}

/* Toda la sección de Vynko Citas trae su propia barra inferior -- la del
   app sobra ahí (si no, quedaban dos barras encimadas y la de Citas
   quedaba tapada por la del app, que tiene z-index mucho mayor: en el
   teléfono de Dayanis se veía la barra del app en vez de la de Citas).
   Clase JS (body-in-citas, ver switchView en client.js) -- NADA de :has(),
   que en WebView viejo de Android tira abajo toda la regla. */
body.body-in-citas .mp-bottomnav,
body.body-in-citas .mp-fab {
  display: none !important;
}

#datingView .mp-pay-topbar {
  background: var(--dt-card);
  padding: 0.9rem 1rem;
  margin: 0;
  border-bottom: 1px solid var(--dt-border);
}

#datingView .mp-pay-topbar h3 { color: var(--dt-text); }

#datingView .mp-vc-icon-btn {
  background: var(--dt-bg);
  border: 1px solid var(--dt-border);
  color: var(--dt-text);
}

#datingView .note { color: var(--dt-text-dim); }
#datingView .field-label { color: var(--dt-text-dim); font-weight: 600; font-size: 0.85rem; }

#datingView .mp-ys-input {
  background: var(--dt-card);
  border-color: var(--dt-border);
  color: var(--dt-text);
}

#datingView .mp-btn-gradient {
  background: var(--dt-gradient);
  box-shadow: 0 8px 20px -8px rgba(14, 165, 233, 0.5);
}

/* iOS Safari estira un <button display:flex> a lo alto en varios de estos
   contextos -- el botón "Continuar"/"Guardar" se convertía en un círculo
   gigante rosa ("se despliega al dar clic", bug reportado). Todos los
   botones de Citas son de solo texto: se fuerzan a bloque simple con alto
   acotado, así no hay flex que se pueda estirar. */
#datingView .mp-btn-gradient,
#datingView .mp-btn-outline,
#datingView .mp-ys-publish-btn,
#datingView .mp-dt-continue,
#datingView #datingWizardFinish {
  display: block !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: 3.4rem !important;
  aspect-ratio: auto !important;
  flex: none !important;
  align-self: auto !important;
  padding: 0.85rem 1.1rem !important;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
}

/* Mismo blindaje para las opciones tipo tarjeta (género / qué buscas). */
#datingView .mp-dt-choice {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 5rem !important;
  aspect-ratio: auto !important;
  flex: none !important;
  align-self: auto !important;
}

#datingView .mp-btn-outline {
  background: var(--dt-card);
  border-color: var(--dt-pink);
  color: var(--dt-pink);
}

#datingView .mp-btn-outline:hover { background: #eaf5ff; }

#datingView .checkbox-row { color: var(--dt-text); }

/* Bienvenida -- pedido explícito con captura de referencia: la foto de la
   pareja llena la pantalla, con el corazón + "VYNKO Citas" arriba sobre el
   cielo claro y "Comenzar" abajo sobre un degradado oscuro para que se lea
   sobre la foto. */
.mp-dating-welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 2.2rem 1.4rem 1.6rem;
  background-image:
    linear-gradient(to bottom,
      rgba(234, 245, 255, 0.94) 0%,
      rgba(234, 245, 255, 0.55) 20%,
      rgba(234, 245, 255, 0) 38%,
      rgba(6, 20, 33, 0) 55%,
      rgba(6, 20, 33, 0.35) 78%,
      rgba(6, 20, 33, 0.72) 100%),
    url("img/dating-welcome.jpg");
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}

.mp-dating-welcome-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.mp-dating-welcome-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 420px;
}

.mp-dating-welcome-heart {
  filter: drop-shadow(0 8px 20px rgba(14, 165, 233, 0.45));
  margin-bottom: 0.2rem;
  line-height: 0;
}

.mp-dating-welcome h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1c1730;
  margin: 0;
}

.mp-dating-welcome-tag {
  color: #4a4458;
  font-weight: 600;
  margin: 0.2rem 0 0;
}

.mp-dating-welcome-pillars {
  display: flex;
  gap: 2rem;
}

.mp-dating-welcome-pillars div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.mp-dating-welcome-pillars span { font-size: 1.5rem; }

.mp-dating-welcome .mp-btn-gradient {
  width: 100%;
  text-align: center;
}

.mp-dating-welcome-note {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Formulario "en modo lista" -- todo en una sola pantalla scrolleable. */
.mp-dating-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.2rem 1.1rem 2.5rem;
}

.mp-dating-section {
  background: var(--dt-card);
  border: 1px solid var(--dt-border);
  border-radius: var(--radius-lg, 14px);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-dating-section h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--dt-text);
}

.mp-dating-account-summary {
  font-size: 0.82rem;
  color: var(--dt-text-dim);
  background: var(--dt-bg);
  border-radius: var(--radius-md, 10px);
  padding: 0.5rem 0.7rem;
}

#datingEditAccountLink { color: var(--dt-pink); }

.mp-dating-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

@media (max-width: 480px) {
  .mp-dating-row3 { grid-template-columns: 1fr; }
}

.mp-dating-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.mp-dating-photo-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--dt-bg);
  border: 1.5px dashed var(--dt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-dating-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-dating-photo-slot.filled {
  border-style: solid;
  cursor: default;
}

.mp-dating-photo-add {
  font-size: 1.8rem;
  color: var(--dt-pink);
}

.mp-dating-photo-principal-tag {
  position: absolute;
  bottom: 0.3rem;
  left: 0.3rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-pill);
}

.mp-dating-photo-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

/* Chips de intereses -- multi-selección. */
.mp-dating-chip-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.mp-dating-chip {
  border: 1.5px solid var(--dt-border);
  background: var(--dt-card);
  color: var(--dt-text);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

/* Mismo criterio que .mp-conv-filter-pill.active: tinte suave en vez de
   relleno sólido, para que no se sienta "más grande" que las demás.
   --dt-pink/--dt-purple son celestes en la práctica (nombres viejos, el
   color se cambió después) -- por eso el tinte de acá es celeste. */
.mp-dating-chip.active {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.4);
  color: #0284c7;
}

/* Pills de "qué buscas" -- selección única. */
.mp-dating-pill-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-dating-pill {
  border: 1.5px solid var(--dt-border);
  background: var(--dt-card);
  color: var(--dt-text);
  border-radius: var(--radius-md, 10px);
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* Mismo criterio que .mp-dating-chip.active. */
.mp-dating-pill.active {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.4);
  color: #0284c7;
}

.mp-dating-range-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.mp-dating-range-row input[type="range"] {
  width: 100%;
  accent-color: var(--dt-pink);
}

.mp-dating-active-note {
  text-align: center;
  color: #16a34a;
  font-weight: 600;
}

/* ===== Asistente paso a paso (Vynko Citas) -- pedido explícito, "hacer
   todo lo que está en la imagen". Cada paso ocupa la pantalla, con la
   barra de progreso arriba y "Continuar" abajo. ===== */
.mp-dt-wizard {
  display: flex;
  flex-direction: column;
}

.mp-dt-wizard-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem 0.4rem;
}

.mp-dt-progress {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--dt-border);
  overflow: hidden;
}

#datingWizardProgressFill {
  display: block;
  height: 100%;
  width: 12.5%;
  border-radius: 3px;
  background: var(--dt-gradient);
  transition: width 0.28s var(--ease, ease);
}

.mp-dt-step-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dt-text-dim);
  flex-shrink: 0;
}

.mp-dt-steps {
  flex: 1;
}

/* display:block a propósito (no flex): con flex + margin-top:auto en
   "Continuar", al marcar una opción la tarjeta elegida se estiraba hasta
   ocupar toda la pantalla ("se desplegaba", bug reportado). En bloque
   normal cada opción mide lo que mide su contenido y punto. */
.mp-dt-step {
  display: block;
  padding: 1.2rem 1.2rem 2.4rem;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.mp-dt-step > * { margin-bottom: 0.7rem; }
.mp-dt-step > *:last-child { margin-bottom: 0; }

/* El atributo [hidden] por sí solo no gana contra el display:flex de
   arriba -- hay que decirlo explícito. */
.mp-dt-step[hidden] { display: none; }

.mp-dt-step h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--dt-text);
  margin: 0.4rem 0 0;
  letter-spacing: -0.01em;
}

.mp-dt-sub {
  color: var(--dt-text-dim);
  margin: 0 0 0.5rem;
}

.mp-dt-hint {
  color: var(--dt-text-dim);
  font-size: 0.82rem;
  text-align: center;
  margin: 0.3rem 0 0;
}

.mp-dt-err {
  color: #dc2626;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

.mp-dt-continue {
  width: 100%;
  text-align: center;
  margin-top: 1.4rem;
  flex: none;
}

.mp-dt-step .field-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Opciones tipo "tarjeta" (género, qué buscas) -- selección única, con el
   check a la derecha del elegido, como la referencia.
   display:block (no flex) en la lista + height/min-height/flex forzados en
   cada opción: la tarjeta elegida se estiraba a toda la pantalla al
   marcarla (bug reportado, causa nunca clara) -- así queda imposible. */
.mp-dt-choice-list {
  display: block;
}
.mp-dt-choice-list > * { margin-bottom: 0.7rem; }
.mp-dt-choice-list > *:last-child { margin-bottom: 0; }

/* TODO el aspecto (borde, fondo, alto) va en el <span> interno, NO en el
   <button> -- pase lo que pase con la caja del botón, la "tarjeta" visible
   es este span de alto acotado y no se puede estirar. */
.mp-dt-choice {
  display: block;
  padding: 0;
  border: none;
  background: none;
  color: var(--dt-text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 5rem;
}

.mp-dt-choice-in {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md, 12px);
  border: 1.5px solid var(--dt-border);
  background: var(--dt-card);
  min-height: 1.5rem;
  max-height: 5rem;
  box-sizing: border-box;
}

.mp-dt-choice .mp-dt-choice-ico {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.mp-dt-choice .mp-dt-choice-txt { flex: 1; }

.mp-dt-choice .mp-dt-choice-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--dt-border);
  flex-shrink: 0;
}

.mp-dt-choice.active .mp-dt-choice-in {
  border-color: var(--dt-pink);
  background: #eaf5ff;
}

.mp-dt-choice.active .mp-dt-choice-check {
  border-color: var(--dt-pink);
  background: var(--dt-pink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.mp-dt-date-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 0.6rem;
}

/* "Busco: Mujer / Hombre / Ambos" -- segmentado. */
.mp-dt-seg {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.mp-dt-seg button {
  flex: 1 1 0 !important;
  padding: 0.6rem 0.4rem;
  border-radius: var(--radius-md, 10px);
  border: 1.5px solid var(--dt-border);
  background: var(--dt-card);
  color: var(--dt-text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
}

/* Mismo criterio que .mp-dating-chip.active. */
.mp-dt-seg button.active {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.4);
  color: #0284c7;
}

/* Tarjeta de "Revisa tu perfil" (paso 8). */
.mp-dt-review-card {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--dt-border);
  background: var(--dt-card);
}

.mp-dt-review-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--dt-bg);
}

.mp-dt-review-body {
  padding: 0.9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-dt-review-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dt-text);
}

.mp-dt-review-meta {
  font-size: 0.85rem;
  color: var(--dt-text-dim);
}

.mp-dt-review-looking {
  font-weight: 700;
  color: var(--dt-pink);
  font-size: 0.9rem;
}

.mp-dt-review-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mp-dt-review-chips span {
  background: #eaf5ff;
  color: var(--dt-purple);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.mp-dt-terms {
  font-size: 0.72rem;
  color: var(--dt-text-dim);
  text-align: center;
  margin: 0.2rem 0 0;
}

/* "¡Todo listo!" -- pedido explícito con captura, tema OSCURO propio
   (distinto al resto de Citas, que es claro). */
.mp-dt-success {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  padding: 2.4rem 1.4rem 2rem;
  max-width: 460px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.22), transparent 45%),
    linear-gradient(180deg, #140f28 0%, #0c091c 100%);
  color: #ece8f5;
  overflow: hidden;
}

.mp-dt-success-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #f472b6 40%, transparent 45%),
    radial-gradient(circle, #a855f7 40%, transparent 45%),
    radial-gradient(circle, #fbbf24 40%, transparent 45%),
    radial-gradient(circle, #38bdf8 40%, transparent 45%),
    radial-gradient(circle, #34d399 40%, transparent 45%),
    radial-gradient(circle, #fb7185 40%, transparent 45%);
  background-size: 9px 9px, 7px 7px, 8px 8px, 6px 12px, 10px 6px, 7px 7px;
  background-position: 8% 18%, 24% 42%, 40% 8%, 62% 30%, 78% 14%, 92% 40%;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.mp-dt-success-heart {
  filter: drop-shadow(0 12px 30px rgba(236, 72, 153, 0.5));
  line-height: 0;
  margin-top: 0.6rem;
  z-index: 1;
}

.mp-dt-success h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.3rem 0 0;
  letter-spacing: -0.01em;
}

.mp-dt-success h2 #dtSuccessName {
  background: linear-gradient(135deg, #fb7185, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-dt-success-sub {
  color: rgba(236, 232, 245, 0.7);
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.mp-dt-success-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 0.4rem 0 0.2rem;
}

.mp-dt-success-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  background: #221a3a;
  box-shadow: 0 20px 50px -18px rgba(168, 85, 247, 0.55);
}

.mp-dt-success-badge {
  position: absolute;
  top: 14px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.7);
}

.mp-dt-success-badge svg { color: #7c3aed; }

.mp-dt-success-dots {
  display: flex;
  gap: 0.4rem;
  margin: 0.5rem 0 0.3rem;
}

.mp-dt-success-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.mp-dt-success-dots button.active {
  background: #ec4899;
  width: 18px;
  border-radius: 4px;
}

.mp-dt-success-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin: 0.8rem 0 0.2rem;
  color: rgba(236, 232, 245, 0.55);
  font-size: 0.88rem;
  font-weight: 600;
}

.mp-dt-success-divider::before,
.mp-dt-success-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.mp-dt-success-cards {
  display: flex;
  gap: 0.7rem;
  width: 100%;
  align-items: stretch;
}

.mp-dt-success-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1rem 0.7rem 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: rgba(168, 85, 247, 0.07);
  color: #ece8f5;
  text-align: center;
  cursor: pointer;
}

.mp-dt-success-card strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
}

.mp-dt-sc-desc {
  font-size: 0.72rem;
  color: rgba(236, 232, 245, 0.6);
  line-height: 1.3;
}

.mp-dt-sc-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-dt-sc-ico-explore { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.mp-dt-sc-ico-target { background: rgba(251, 191, 36, 0.16); color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, 0.35); }
.mp-dt-sc-ico-me { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }

.mp-dt-sc-arrow {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  color: #c084fc;
  line-height: 1;
}

.mp-dt-sc-premium {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.1), rgba(20, 15, 40, 0.4));
}

.mp-dt-sc-premium .mp-dt-sc-arrow { color: #fbbf24; }

.mp-dt-sc-crown {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
}

.mp-dt-sc-lock {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.85rem;
}

.mp-dt-sc-premium-badge {
  background: #fbbf24;
  color: #3a2a00;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
}

.mp-dt-success .mp-btn-gradient {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%) !important;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.mp-dt-success-foot {
  color: rgba(236, 232, 245, 0.45);
  font-size: 0.76rem;
  margin: 0.7rem 0 0;
}

@media (max-width: 420px) {
  .mp-dt-success-card { padding: 0.85rem 0.5rem 1.5rem; }
  .mp-dt-success-card strong { font-size: 0.82rem; }
  .mp-dt-sc-desc { font-size: 0.66rem; }
}

/* ===== EXPLORAR PERFILES -- pedido explícito: blanco + azul cielo (antes
   morado/rosa sobre fondo oscuro). Ocupa toda la pantalla del contenedor
   #datingView. body.body-dt-dark ya no oscurece nada acá (ver esa regla,
   más arriba) -- el fondo queda siempre en este tema claro. ===== */

.mp-dx {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #eaf5ff 0%, #f3f7ff 45%, #eef2ff 100%);
  color: #0b2c4d;
  padding-bottom: 4.6rem; /* deja lugar a la barra propia */
}

.mp-dx-icon-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: rgba(56, 189, 248, 0.12);
  color: #0ea5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mp-dx-topbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem 0.5rem;
}

.mp-dx-title {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b2c4d;
}
.mp-dx-title span { color: #0ea5e9; }

.mp-dx-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem 0.6rem;
}

.mp-dx-tabs button {
  flex: 1;
  padding: 0.55rem 0.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: #ffffff;
  color: #4c86b8;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* Mismo criterio que .mp-conv-filter-pill.active: tinte suave en vez de
   relleno sólido. El color (celeste acá, morado en PREMIUM más abajo)
   sigue siendo el mismo -- solo cambia de relleno sólido a tinte. */
.mp-dx-tabs button.active {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.4);
  color: #0284c7;
}

/* PREMIUM (antes "Tendencias"): morado en vez de azul cielo, a propósito --
   mismo lenguaje visual que el corazón de Inicio (ver .mp-home-card-match),
   "azul = Citas normal, morado = premium". */
.mp-dx-tabs button.mp-dx-tab-premium {
  border-color: rgba(168, 85, 247, 0.35);
  color: #7c3aed;
}
.mp-dx-tabs button.mp-dx-tab-premium.active {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.4);
  color: #7c3aed;
}

/* ---------- Pestaña PREMIUM: buscador por criterios ---------- */
.mp-dx-premium {
  padding: 0.4rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mp-dx-premium-banner {
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(124, 58, 237, 0.08));
  border: 1px solid rgba(168, 85, 247, 0.25);
  text-align: center;
}

.mp-dx-premium-banner-badge {
  display: inline-block;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.5rem;
}

.mp-dx-premium-banner p {
  margin: 0;
  color: #5b3a8a;
  font-size: 0.88rem;
  line-height: 1.4;
}

.mp-dx-premium-form .mp-btn-gradient {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
}

/* Estatura mín./máx.: una sola fila de 2, a propósito SIN el colapso a 1
   columna que trae .mp-dating-row3 en celular angosto -- pedido explícito
   ("más largo", en una sola fila en vez de apiladas). */
.mp-dx-premium-row2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

.mp-dx-premium-scope {
  text-align: center;
  color: #4c86b8;
}

.mp-dx-premium-results {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-dx-premium-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 2px 10px rgba(19, 62, 106, 0.06);
}

.mp-dx-premium-card-photo {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #dceefb center / cover no-repeat;
}

.mp-dx-premium-card-photo .mp-dx-online {
  position: absolute;
  bottom: -0.3rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.mp-dx-premium-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mp-dx-premium-card-info b {
  color: #0b2c4d;
  font-size: 0.92rem;
}

.mp-dx-premium-card-loc,
.mp-dx-premium-card-traits {
  color: #4c86b8;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-dx-premium-like-btn {
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}

.mp-dx-premium-like-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mp-dx-body {
  flex: 1;
  padding: 0.4rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* --- Tarjeta de perfil --- */
.mp-dx-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: #ffffff;
  box-shadow: 0 24px 60px -24px rgba(14, 165, 233, 0.35);
}

/* Deslizar tipo Tinder: derecha = me gusta, izquierda = no.
   touch-action pan-y deja el scroll vertical y nos reserva el gesto horizontal. */
.mp-dx-card.mp-dx-swipeable {
  touch-action: pan-y;
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.mp-dx-card.mp-dx-dragging { cursor: grabbing; }
.mp-dx-card.mp-dx-animate { transition: transform 0.28s ease, opacity 0.28s ease; }

.mp-dx-stamp {
  position: absolute;
  top: 1.4rem;
  z-index: 3;
  padding: 0.3rem 0.9rem;
  border: 4px solid;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.mp-dx-stamp.like { left: 1.2rem; transform: rotate(-16deg); color: #ef4444; border-color: #ef4444; }
.mp-dx-stamp.nope { right: 1.2rem; transform: rotate(16deg); color: #94a3b8; border-color: #94a3b8; }
/* el emoji de fuego, tirado a rojo */
.mp-dx-fire {
  font-style: normal;
  filter: saturate(1.5) hue-rotate(-14deg);
  -webkit-filter: saturate(1.5) hue-rotate(-14deg);
}

.mp-dx-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: #dceefb;
}

.mp-dx-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 7, 20, 0) 42%, rgba(10, 7, 20, 0.55) 68%, rgba(10, 7, 20, 0.95) 100%);
}

.mp-dx-online {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}
.mp-dx-online::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

.mp-dx-photocount {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
}

.mp-dx-photo-next {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.mp-dx-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mp-dx-card-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.mp-dx-card-name svg { color: #3b82f6; flex-shrink: 0; }

.mp-dx-card-loc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-dx-card-bio {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  margin: 0.1rem 0;
  line-height: 1.35;
}

.mp-dx-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mp-dx-card-chips span {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
}
.mp-dx-card-chips span.more { background: rgba(124, 58, 237, 0.55); }

.mp-dx-compat {
  position: absolute;
  right: 0;
  top: -0.6rem;
  transform: translateY(-100%);
  text-align: center;
  padding: 0.45rem 0.75rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #0ea5e9;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.2);
  line-height: 1.1;
}
.mp-dx-compat b { display: block; font-size: 1.35rem; font-weight: 800; color: #0b2c4d; }
.mp-dx-compat span { font-size: 0.68rem; color: #4c86b8; }

/* --- ¿Por qué te apareció? --- */
.mp-dx-why {
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.08);
  padding: 0.9rem 1rem;
}
.mp-dx-why h4 {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0b2c4d;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mp-dx-why ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.7rem;
}
.mp-dx-why li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #4c86b8;
}
.mp-dx-why li::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #0ea5e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* --- Acciones --- */
.mp-dx-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.4rem 0.2rem 0;
}

.mp-dx-act {
  position: relative;
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: #4c86b8;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0;
}

.mp-dx-act-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(19, 62, 106, 0.1);
  color: #4c86b8;
}

.mp-dx-act-rewind .mp-dx-act-circle { border-color: rgba(56, 189, 248, 0.4); color: #7dabc9; }
.mp-dx-star { border-color: #facc15 !important; color: #eab308 !important; }
.mp-dx-heart { border-color: #0ea5e9 !important; color: #0ea5e9 !important; box-shadow: 0 0 20px rgba(14, 165, 233, 0.35); }
.mp-dx-ice { border-color: #38bdf8 !important; color: #38bdf8 !important; }

.mp-dx-act:active .mp-dx-act-circle { transform: scale(0.9); }

.mp-dx-act-tag {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #facc15;
  color: #3a2a00;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2;
}

.mp-dx-empty {
  text-align: center;
  color: #4c86b8;
  padding: 3rem 1.2rem;
  font-size: 0.95rem;
}
.mp-dx-empty p { margin: 0 0 1rem; }
.mp-dx-empty .mp-btn-gradient {
  display: inline-block;
  width: auto;
  padding: 0.7rem 1.4rem;
  background: linear-gradient(135deg, #7dd3fc, #0ea5e9) !important;
  color: #fff;
  border: none;
}

/* --- Barra inferior propia --- */
.mp-dx-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem 0.3rem calc(0.5rem + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid rgba(56, 189, 248, 0.18);
}

.mp-dx-bottomnav button {
  position: relative;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: #4c86b8;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.mp-dx-bottomnav button.active { color: #0ea5e9; }

.mp-dx-nav-badge {
  position: absolute;
  top: -0.2rem;
  right: 0.1rem;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 8px;
  padding: 0 0.2rem;
}

/* --- Bandeja de mensajes de los matches --- */
.mp-dx-chats { padding: 0.4rem 0.9rem 1rem; }
.mp-dx-chats h3 { color: #0b2c4d; margin: 0.4rem 0 0.8rem; font-size: 1.1rem; }
.mp-dx-chats-list { display: flex; flex-direction: column; gap: 0.2rem; }
.mp-dx-chat-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.5rem;
  border-radius: 14px;
  cursor: pointer;
}
.mp-dx-chat-row:hover { background: rgba(56, 189, 248, 0.1); }
.mp-dx-chat-av {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #dceefb center / cover no-repeat;
  border: 2px solid rgba(56, 189, 248, 0.5);
}
.mp-dx-chat-av .on {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #ffffff;
}

/* Pedido explícito: el punto se ve SIEMPRE (antes solo existía en línea) --
   gris cuando no está en línea, en vez de no mostrar nada. */
.mp-dx-chat-av .on.off {
  background: #9ca3af;
}

.mp-dx-chat-lastseen {
  font-size: 0.72rem;
  color: #7ba7c9;
  margin-top: -0.05rem;
}
.mp-dx-chat-mid { flex: 1; min-width: 0; }
.mp-dx-chat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.mp-dx-chat-top b { color: #0b2c4d; font-size: 0.95rem; }
.mp-dx-chat-top span { color: #7ba7c9; font-size: 0.72rem; flex-shrink: 0; }
.mp-dx-chat-prev {
  color: #4c86b8;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}
.mp-dx-chat-badge {
  flex-shrink: 0;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  padding: 0 0.35rem;
}

/* --- Perfil completo de un match --- */
.mp-dx-mprofile { padding: 0.4rem 0.9rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.mp-dx-mprofile-back {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: #0ea5e9;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.3rem 0;
  cursor: pointer;
}
.mp-dx-mprofile-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  background: #dceefb center / cover no-repeat;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.mp-dx-mprofile-photo .mp-dx-photo-next {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.mp-dx-mprofile-info h2 { color: #0b2c4d; margin: 0; font-size: 1.5rem; font-weight: 800; }
.mp-dx-mprofile-loc { color: #4c86b8; font-size: 0.9rem; margin: 0.3rem 0 0; }
.mp-dx-mprofile-bio { color: #0b2c4d; opacity: 0.85; font-style: italic; margin: 0.6rem 0; line-height: 1.4; }
.mp-dx-mprofile-info .mp-dx-card-chips { margin-top: 0.5rem; }
/* Los chips (.mp-dx-card-chips span) se pensaron translúcidos blancos sobre
   la foto con degradado oscuro de la tarjeta de Explorar -- acá, en el
   perfil completo, van DEBAJO de la foto sobre fondo claro, así que
   necesitan su propia versión (celeste sobre azul, no blanco sobre blanco). */
.mp-dx-mprofile-info .mp-dx-card-chips span {
  background: rgba(56, 189, 248, 0.12);
  color: #0b2c4d;
}

/* --- "¡Es un match!" --- */
.mp-dx-match-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 7, 20, 0.85);
  backdrop-filter: blur(8px);
}
.mp-dx-match-box {
  text-align: center;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.mp-dx-match-box h2 {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #7dd3fc, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.mp-dx-match-box p { color: rgba(236, 232, 245, 0.85); margin: 0; line-height: 1.4; }
.mp-dx-match-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
}
.mp-dx-match-photo {
  width: 118px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid #38bdf8;
  background: #dceefb;
  box-shadow: 0 16px 40px -12px rgba(14, 165, 233, 0.6);
}
.mp-dx-match-photo:first-child { transform: rotate(-7deg); }
.mp-dx-match-photo#dxMatchPhoto { transform: rotate(7deg); margin-left: -22px; }
.mp-dx-match-photos.solo .mp-dx-match-heart { display: none; }
.mp-dx-match-photos.solo .mp-dx-match-photo#dxMatchPhoto { transform: none; margin-left: 0; }
.mp-dx-match-heart {
  font-size: 2rem;
  z-index: 2;
  margin: 0 -14px;
  filter: drop-shadow(0 4px 10px rgba(56, 189, 248, 0.7));
}
.mp-dx-match-box .mp-btn-gradient { width: 100%; background: linear-gradient(135deg, #7dd3fc, #0ea5e9) !important; }
.mp-dx-match-later {
  background: transparent;
  border: none;
  color: rgba(236, 232, 245, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.4rem;
  cursor: pointer;
}

/* Aviso de suscripción de PREMIUM (al tocar "Buscar") -- a diferencia de
   .mp-dx-match-box (texto flotando directo sobre el fondo oscuro del
   modal), acá es una tarjeta blanca propia para que el precio/beneficios
   se lean bien. */
/* Pedido explícito: "de un borde al otro de la pantalla, respetando un
   pequeño espacio" -- max-width grande (prácticamente nunca se topa en un
   celular) + el padding del overlay (#dxPremiumPaywallModal más abajo)
   angosto es lo que deja ese margen chico parejo a los dos lados. */
.mp-dx-premium-paywall-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.8rem 1.6rem 1.5rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 24px 60px -20px rgba(124, 58, 237, 0.5);
}

#dxPremiumPaywallModal {
  padding: 0.8rem;
}

.mp-dx-premium-paywall-crown {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(168, 85, 247, 0.5));
}

.mp-dx-premium-paywall-box h2 {
  margin: 0.2rem 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-dx-premium-paywall-price {
  margin: 0.2rem 0 0.6rem;
  font-size: 2rem;
  font-weight: 800;
  color: #0b2c4d;
}

.mp-dx-premium-paywall-price span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4c86b8;
}

.mp-dx-premium-paywall-benefits {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
}

.mp-dx-premium-paywall-benefits li {
  font-size: 0.85rem;
  color: #2a1b30;
  line-height: 1.35;
  background: rgba(168, 85, 247, 0.08);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

.mp-dx-premium-paywall-box .mp-btn-gradient {
  width: 100%;
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
}

.mp-dx-premium-paywall-box .mp-dx-match-later {
  color: #8a7690;
}

/* ===== Invitá y ganá (referidos) ===== */
#referralView .mp-referral-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mp-referral-code-card {
  border-radius: 20px;
  padding: 1.3rem 1.1rem;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #ffffff;
  box-shadow: 0 16px 34px -14px rgba(14, 165, 233, 0.55);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mp-referral-code-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.mp-referral-code-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.16);
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
}

.mp-referral-code-pill span {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.mp-referral-code-pill button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  color: #0ea5e9;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.mp-referral-share-row {
  display: flex;
  gap: 0.6rem;
}

.mp-referral-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.6rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.mp-referral-how {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: rgba(56, 189, 248, 0.09);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
}

.mp-referral-how svg { flex-shrink: 0; margin-top: 1px; }
.mp-referral-how p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); }

.mp-referral-coins-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 18px;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, rgba(232, 177, 61, 0.18), rgba(201, 138, 31, 0.1));
  border: 1px solid rgba(232, 177, 61, 0.4);
}
.mp-referral-coins-icon { font-size: 1.9rem; line-height: 1; }
.mp-referral-coins-num { font-size: 1.3rem; font-weight: 800; color: #c98a1f; }
.mp-referral-coins-lbl { font-size: 0.75rem; color: var(--text-dim); }

.mp-referral-stats-row {
  display: flex;
  gap: 0.7rem;
}

.mp-referral-stat-card {
  flex: 1;
  background: var(--panel-solid);
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 0.85rem 0.85rem 0.7rem;
  text-align: center;
}

.mp-referral-stat-num { font-size: 1.4rem; font-weight: 800; }
.mp-referral-stat-lbl { font-size: 0.7rem; font-weight: 600; color: var(--text-dim); }

.mp-referral-section-head h4 { margin: 0.2rem 0 0; font-size: 0.9rem; }

.mp-referral-list {
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  overflow: hidden;
}

.mp-referral-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
}
.mp-referral-row:last-child { border-bottom: none; }

.mp-referral-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mp-referral-row-mid b { font-size: 0.85rem; }
.mp-referral-row-mid span { font-size: 0.72rem; color: var(--text-dim); }

.mp-referral-status-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.mp-referral-status-pill.active { background: rgba(16, 185, 129, 0.14); color: #059669; }
.mp-referral-status-pill.inactive { background: rgba(148, 163, 184, 0.2); color: #64748b; }

/* ===== Tu plan exequial (dentro del perfil de un negocio) ===== */
.mp-biz-credit-card {
  border-radius: 18px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  background: var(--panel-solid);
  box-shadow: 0 10px 26px -18px rgba(16, 185, 129, 0.4);
  padding: 1rem 1.1rem 0.9rem;
  text-align: center;
  margin: 0.9rem 0;
}
.mp-biz-credit-card .lbl { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.mp-biz-credit-card .amount { font-size: 1.9rem; font-weight: 800; color: #059669; }
.mp-biz-credit-card .sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; }

.mp-biz-credit-manage {
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: var(--panel-solid);
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mp-biz-credit-manage .mp-panel-head h3 { font-size: 0.92rem; }
.mp-biz-credit-search-row { display: flex; gap: 0.5rem; }
.mp-biz-credit-search-row input {
  flex: 1;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 0.5rem 0.7rem;
  background: var(--input-bg, transparent);
  color: inherit;
}
.mp-biz-credit-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mp-biz-credit-search-row-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;
}
.mp-biz-credit-search-row-item:hover { background: rgba(14, 165, 233, 0.1); }
.mp-biz-credit-search-row-item span { font-size: 0.82rem; }

.mp-biz-credit-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.mp-biz-credit-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mp-biz-credit-row-mid b { font-size: 0.84rem; }
.mp-biz-credit-row-mid span { font-size: 0.7rem; color: var(--text-dim); }
.mp-biz-credit-row input[type="number"] {
  width: 92px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 0.35rem 0.4rem;
  background: var(--input-bg, transparent);
  color: inherit;
}
.mp-biz-credit-row button {
  flex-shrink: 0;
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.mp-biz-credit-row button.danger { background: #ef4444; }

/* Aviso que se puede tocar (ej. "te llegó una solicitud de amistad"): el
   toast base es pointer-events:none para no tapar nada, pero uno con acción
   tiene que poder recibir el toque. */
.mp-toast-notification.show.mp-toast-action {
  pointer-events: auto;
  cursor: pointer;
}

/* La barra superior pasó de 4 a 5 íconos (botón directo de "Solicitudes de
   amistad"). Con el tamaño de siempre (36px + 0.55rem entre cada uno) ya no
   entran en un celular de ~390px sin apretar la marca "VYNKO", así que en
   pantallas angostas se achican los botones y el espacio entre ellos. */
@media (max-width: 430px) {
  .mp-mobile-topbar { gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .mp-mobile-topbar-actions { gap: 0.3rem; }
  .mp-mobile-topbar-icon { width: 32px; height: 32px; }
}
@media (max-width: 375px) {
  .mp-mobile-topbar-brand { font-size: 1.35rem; }
  .mp-mobile-topbar-icon { width: 30px; height: 30px; }
}

/* Google Play: YU Pay (billetera) no se ofrece dentro de la app de Android en
   esta primera versión -- ver showPayView en client.js. Las tarjetas "Pay" del
   perfil son la única entrada visible. */
body.native-app #hostGoToPayBtn,
body.native-app #buyerGoToPayBtn {
  display: none !important;
}

/* Texto que cambia entre la web y la app empaquetada (Play Store). */
.only-native { display: none; }
.only-native-row { display: none; }
body.native-app .only-native-row { display: flex; }
body.native-app .only-native { display: inline; }
body.native-app .only-web { display: none; }

/* La hoja de "Reportar" también se abre encima de la transmisión en vivo
   (.mp-live-full, z-index 2200) -- sin esto quedaba detrás. */
#reportPostModal { z-index: 2300; }

/* ===== Empresas (grilla de negocios) -- diseño de referencia ===== */
#businessProfileView {
  --bz-navy: #17307a;
}

.mp-biz-disc-hero {
  margin: 0.9rem 1rem 0;
  padding: 1.1rem 0.8rem 1rem;
  text-align: center;
  background: linear-gradient(180deg, #e3edfd 0%, #eef4fe 100%);
  border-radius: 22px;
}

.mp-biz-disc-hero h2 {
  margin: 0 0 0.3rem;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--bz-navy);
}

.mp-biz-disc-sub {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e3a8a;
}

.mp-biz-disc-sub2 {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #4b5b85;
}

.mp-biz-disc {
  padding: 0 0 1.5rem;
}

.mp-biz-disc-search-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 1rem 0;
}

.mp-biz-disc-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  padding: 0 1rem;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
  color: #667085;
}

.mp-biz-disc-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--biz-text);
}

.mp-biz-disc-search input::placeholder {
  color: #8a94a8;
}

.mp-biz-disc-sort-wrap {
  position: relative;
  flex-shrink: 0;
}

.mp-biz-disc-sort-btn {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
  color: var(--biz-text);
  cursor: pointer;
}

.mp-biz-disc-sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.18);
}

.mp-biz-disc-sort-menu button {
  text-align: left;
  padding: 0.65rem 0.8rem;
  background: none;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--biz-text);
  cursor: pointer;
}

.mp-biz-disc-sort-menu button.active {
  background: #e8f0fe;
  color: #2563eb;
  font-weight: 700;
}

.mp-biz-disc-pills {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 1rem 1rem 0.2rem;
  scrollbar-width: none;
}

.mp-biz-disc-pills::-webkit-scrollbar {
  display: none;
}

.mp-biz-disc-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.7rem;
  padding: 0 1rem;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--biz-text);
  cursor: pointer;
}

.mp-biz-disc-pill.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.7);
}

.mp-biz-disc-register {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 1rem 0;
  padding: 0.8rem;
  background: #e2edfd;
  border: 1px solid #cfe1fb;
  border-radius: 18px;
}

.mp-biz-disc-register-icon,
.mp-biz-disc-mybiz-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d3e4fb;
  border-radius: 50%;
}

.mp-biz-disc-register-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mp-biz-disc-register-text strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--bz-navy);
}

.mp-biz-disc-register-text span {
  font-size: 0.78rem;
  color: #475785;
}

.mp-biz-disc-register-btn {
  flex-shrink: 0;
  padding: 0.6rem 0.75rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.mp-biz-disc-mybiz {
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.8rem 1rem 0;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
  text-align: left;
  font-family: inherit;
  color: #2563eb;
  cursor: pointer;
}

.mp-biz-disc-mybiz-icon {
  background: #eaf1fe;
}

.mp-biz-disc-mybiz-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mp-biz-disc-mybiz-text strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bz-navy);
}

.mp-biz-disc-mybiz-text span {
  font-size: 0.85rem;
  color: #667085;
}

.mp-biz-disc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 1.3rem 1rem 0.7rem;
}

.mp-biz-disc-list-head h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bz-navy);
}

.mp-biz-disc-see-all {
  background: none;
  border: none;
  padding: 0.3rem 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
}

.mp-biz-disc-cards {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding: 0.2rem 1rem 1rem;
  scroll-padding-left: 1rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mp-biz-disc-cards::-webkit-scrollbar {
  display: none;
}

/* "Ver todas": lista vertical de tarjetas a lo ancho. */
.mp-biz-disc-cards.expanded {
  flex-direction: column;
  overflow-x: visible;
}

.mp-biz-disc-card {
  flex: 0 0 78%;
  max-width: 19rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--biz-border);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  cursor: pointer;
}

.mp-biz-disc-cards.expanded .mp-biz-disc-card {
  flex: 0 0 auto;
  max-width: none;
}

.mp-biz-disc-cover {
  position: relative;
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.mp-biz-disc-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-biz-disc-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.22rem 0.7rem;
  background: #16a34a;
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.mp-biz-disc-heart {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  color: #2563eb;
  cursor: pointer;
}

.mp-biz-disc-heart svg {
  fill: none;
}

.mp-biz-disc-heart.saved {
  color: #e11d48;
}

.mp-biz-disc-heart.saved svg {
  fill: currentColor;
}

.mp-biz-disc-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0 0.9rem;
}

.mp-biz-disc-logo {
  flex-shrink: 0;
  display: block;
  margin-top: -1.7rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.15);
  overflow: hidden;
}

.mp-biz-disc-logo .mp-avatar-round-50 {
  width: 3.6rem;
  height: 3.6rem;
}

.mp-biz-disc-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.5rem;
}

.mp-biz-disc-titles strong {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--biz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-biz-disc-cat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #667085;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-biz-disc-cat svg,
.mp-biz-disc-line svg {
  flex-shrink: 0;
}

.mp-biz-disc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.9rem 0;
}

.mp-biz-disc-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--biz-text);
}

.mp-biz-disc-line span {
  color: #667085;
}

.mp-biz-disc-line.dim svg {
  color: #667085;
}

.mp-biz-disc-line.dim span {
  font-size: 0.85rem;
}

.mp-biz-disc-desc {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.mp-biz-disc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.8rem 0.9rem 0.9rem;
  padding: 0.75rem 1rem;
  background: #d9e8fd;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
}

/* ===== Video chat aleatorio -- diseño de referencia (oscuro, panel de
   cristal, aro que gira mientras se busca). Todo bajo
   #videochatView:not(.friend-call-mode): las llamadas a una amiga (y de
   audio) conservan su pantalla de siempre. ===== */
#videochatView:not(.friend-call-mode) {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(59, 90, 200, 0.28) 0%, rgba(7, 10, 28, 0) 60%),
    #070a1c;
}

/* --- Cabecera: atrás | marca + lema | Filtros --- */
#videochatView:not(.friend-call-mode) .mp-vc-topbar {
  align-items: flex-start;
  padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.2rem;
}

#videochatView:not(.friend-call-mode) .mp-vc-topbar > .mp-vc-icon-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(147, 170, 255, 0.35);
  box-shadow: 0 0 14px rgba(80, 110, 255, 0.25);
}

#videochatView:not(.friend-call-mode) #videochatTitle {
  display: none;
}

#videochatView:not(.friend-call-mode) #vcMessagesToggleBtn {
  display: none;
}

.mp-vc-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.mp-vc-brand {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 18px rgba(96, 130, 255, 0.55);
}

.mp-vc-brand-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-left: 0.05rem;
  border-radius: 50%;
  border: 3px solid #3b82f6;
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8), inset 0 0 8px rgba(59, 130, 246, 0.5);
}

.mp-vc-tagline {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: #c9d3ff;
}

/* Ya conectado el lema deja su lugar al cronómetro. */
#videochatView:not(.friend-call-mode) .mp-vc-timer {
  display: none;
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
}

#videochatView:not(.friend-call-mode).vc-connected .mp-vc-timer {
  display: flex;
}

#videochatView:not(.friend-call-mode).vc-connected .mp-vc-tagline {
  display: none;
}

.mp-vc-filters-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  color: #dbe4ff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
}

.mp-vc-filters-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(147, 170, 255, 0.35);
  box-shadow: 0 0 14px rgba(80, 110, 255, 0.25);
  color: #fff;
}

/* --- Título grande --- */
.mp-vc-random-title {
  flex-shrink: 0;
  text-align: center;
  padding: 0.5rem 1rem 0.9rem;
}

.mp-vc-random-title h2 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.mp-vc-random-title h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #4f8cff 0%, #a463f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mp-vc-random-title p {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  color: #a9b6f0;
}

/* Ya conectado el video necesita el espacio. */
#videochatView.vc-connected .mp-vc-random-title {
  display: none;
}

@media (max-height: 700px) {
  .mp-vc-random-title {
    display: none;
  }
}

/* El texto de estado se ve en el aro, no arriba (los errores sí). */
#videochatView:not(.friend-call-mode).vc-searching #status,
#videochatView:not(.friend-call-mode).vc-connected #status {
  display: none;
}

/* --- Escenario: panel de cristal --- */
#videochatView:not(.friend-call-mode) .mp-vc-stage {
  flex: 1;
  margin: 0 1rem;
  border-radius: 26px;
  border: 1px solid rgba(139, 148, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 34px rgba(99, 102, 241, 0.25);
  background:
    radial-gradient(circle at 18% 22%, rgba(214, 150, 130, 0.32) 0%, transparent 34%),
    radial-gradient(circle at 78% 34%, rgba(120, 140, 210, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 26% 76%, rgba(120, 80, 150, 0.42) 0%, transparent 40%),
    radial-gradient(circle at 82% 82%, rgba(60, 100, 190, 0.4) 0%, transparent 40%),
    #0d1330;
}

#videochatView:not(.friend-call-mode) .mp-vc-remote-wrap video {
  background: transparent;
}

/* Sin video de la otra persona todavía: el WebView de Android dibuja por su
   cuenta un "play" gris sobre un <video> vacío (se veía como un círculo negro
   con un triángulo detrás del aro). Se oculta hasta que hay conexión. */
#videochatView:not(.friend-call-mode).vc-searching .mp-vc-remote-wrap video {
  visibility: hidden;
}

/* PiP de mi cámara: esquina arriba a la derecha, borde blanco. */
#videochatView:not(.friend-call-mode) .mp-vc-pip {
  top: 0.8rem;
  right: 0.8rem;
  gap: 0.4rem;
}

#videochatView:not(.friend-call-mode) .mp-vc-pip-card {
  width: 96px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

/* Voltear / Efectos / Regalo / Dado: cuatro cajitas de cristal iguales. */
#videochatView:not(.friend-call-mode) .mp-vc-pip-flip,
#videochatView:not(.friend-call-mode) .mp-vc-fun-btn {
  width: 50px;
  height: 54px;
  padding: 0;
  border-radius: 16px;
  background: rgba(10, 14, 38, 0.62);
  border: 1px solid rgba(147, 170, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: #fff;
  font-family: inherit;
}

#videochatView:not(.friend-call-mode) .mp-vc-pip-flip svg {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
}

#videochatView:not(.friend-call-mode) .mp-vc-pip-flip span,
#videochatView:not(.friend-call-mode) .mp-vc-fun-btn span {
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1;
}

#videochatView:not(.friend-call-mode) .mp-vc-fun-actions {
  /* Debajo de la miniatura (96 x 128) y de "Voltear" (54), en la misma columna. */
  top: calc(0.8rem + 128px + 0.4rem + 54px + 0.4rem);
  right: 0.8rem;
  gap: 0.4rem;
}

/* --- Buscando a alguien: aro que gira + puntitos --- */
.mp-vc-searching {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mp-vc-search-hint {
  max-width: 15rem;
  margin: 0.9rem 0 0;
  font-size: 0.74rem;
  line-height: 1.3;
  text-align: center;
  color: #ffd27a;
}

#videochatView:not(.friend-call-mode).vc-searching .mp-vc-searching {
  display: flex;
}

.mp-vc-search-ring {
  position: relative;
  width: 178px;
  height: 178px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  margin-top: 1.2rem;
}

/* Aro tenue de fondo; los dos arcos de color (SVG) giran encima. */
.mp-vc-search-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(160, 175, 255, 0.14);
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.22);
}

/* El giro lo mueve JS (ver syncSearchSpinner en client.js): un @keyframes en
   CSS se quedaba quieto en algunos celulares. */
.mp-vc-search-spinner {
  position: absolute;
  inset: -3px;
  will-change: transform;
}

.mp-vc-search-person {
  color: #93b4ff;
  margin-bottom: 0.45rem;
}

.mp-vc-search-ring strong {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 150px;
}

.mp-vc-search-sub {
  margin-top: 0.3rem;
  max-width: 140px;
  font-size: 0.74rem;
  line-height: 1.25;
  color: #aab6de;
}

.mp-vc-search-dots {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.mp-vc-search-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f8cff;
  opacity: 0.6;
}

.mp-vc-search-dots i:nth-child(2) {
  background: #7a6cf5;
}

.mp-vc-search-dots i:nth-child(3) {
  background: #a463f5;
}

/* Tarjeta "Conecta con personas reales" al pie del escenario. */
.mp-vc-rules-pill {
  display: none;
  position: absolute;
  left: 0.9rem;
  /* Deja libre la columna de botones de la derecha, como en el diseño. */
  right: 4.9rem;
  bottom: 0.9rem;
  z-index: 2;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(38, 34, 92, 0.5);
  border: 1px solid rgba(139, 148, 255, 0.4);
  border-radius: 16px;
  color: #fff;
  font-family: inherit;
  text-align: left;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#videochatView:not(.friend-call-mode).vc-searching .mp-vc-rules-pill {
  display: flex;
}

.mp-vc-rules-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.2;
}

.mp-vc-rules-text strong {
  font-size: 0.8rem;
  font-weight: 700;
}

.mp-vc-rules-text span {
  font-size: 0.66rem;
  color: #b7c2ee;
}

/* --- Controles: fila de círculos de cristal, Colgar rojo al medio --- */
#videochatView:not(.friend-call-mode) .mp-vc-controls-bar {
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0.9rem 0 0.6rem;
  padding: 0 1rem;
  background: none;
  border: none;
  border-radius: 0;
  gap: 0.2rem;
}

#videochatView:not(.friend-call-mode) .mp-vc-ctrl-btn {
  width: 60px;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  color: #eef1ff;
  text-align: center;
}

#videochatView:not(.friend-call-mode) .mp-vc-ctrl-btn svg {
  width: 52px;
  height: 52px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(147, 170, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

#videochatView:not(.friend-call-mode) .mp-vc-ctrl-btn.mp-vc-active svg {
  background: #fff;
  color: #14161a;
}

#videochatView:not(.friend-call-mode) .mp-vc-hangup svg {
  width: 62px;
  height: 54px;
  padding: 15px;
  border: none;
  border-radius: 18px;
  background: #f43f5e;
  box-shadow: 0 8px 22px rgba(244, 63, 94, 0.55);
}

#videochatView:not(.friend-call-mode) .mp-vc-hangup {
  width: 66px;
}

/* style.css pinta #stopBtn de rojo por id (le gana a .mp-vc-ctrl-btn): acá
   el rojo es solo el cuadrito del ícono, no todo el botón con su texto. */
#videochatView:not(.friend-call-mode) #stopBtn,
#videochatView:not(.friend-call-mode) #stopBtn:hover {
  background: none;
}

/* --- Barra de mensaje --- */
#videochatView:not(.friend-call-mode) .mp-vc-message-bar {
  margin: 0 1rem calc(0.8rem + env(safe-area-inset-bottom));
  padding: 0.4rem 0.4rem 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(147, 170, 255, 0.28);
  gap: 0.6rem;
}

.mp-vc-emoji-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: #e6ebff;
}

#videochatView:not(.friend-call-mode) .mp-vc-message-bar input::placeholder {
  color: #93a0d0;
}

#videochatView:not(.friend-call-mode) .mp-vc-send-btn {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #3aa0ff 0%, #1d7bf0 100%);
  box-shadow: 0 4px 14px rgba(29, 123, 240, 0.55);
}

/* Emoji solo tiene sentido donde está la barra de mensaje del aleatorio. */
#videochatView.friend-call-mode .mp-vc-emoji-btn {
  display: none;
}

/* --- Filtro de género con precio (Cualquiera gratis / Hombres y Mujeres 60 🪙) --- */
.mp-gender-filter-priced .mp-gender-filter-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  line-height: 1.15;
}

.mp-gender-filter-priced .mp-gender-filter-opt small {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.8;
}

.mp-gender-filter-note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.mp-vc-filter-badge {
  position: absolute;
  top: 3.4rem;
  left: 0.8rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  background: rgba(10, 14, 38, 0.7);
  border: 1px solid rgba(255, 210, 122, 0.55);
  border-radius: 999px;
  color: #ffd27a;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ===== Visor de foto + ajuste de portada ===== */
.mp-avatar img,
#chatPeerAvatar img {
  cursor: zoom-in;
}

.mp-profile-cover {
  cursor: zoom-in;
}

.mp-profile-cover .mp-cover-edit-btn {
  cursor: pointer;
}

.mp-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(3.2rem + env(safe-area-inset-top)) 0.8rem calc(1.5rem + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.94);
}

.mp-photo-viewer.hidden {
  display: none;
}

/* Alto con unidades de pantalla y no con porcentajes: max-height: 100% dentro
   de un contenedor flex sin alto propio hacía colgarse/crashear a WebKit. */
.mp-photo-viewer img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: 6px;
}

.mp-photo-viewer-close {
  position: absolute;
  top: calc(0.8rem + env(safe-area-inset-top));
  right: 0.9rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
}

.mp-photo-viewer-caption {
  margin: 0.7rem 0 0;
  color: #e5e7eb;
  font-size: 0.95rem;
  font-weight: 600;
}

.mp-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
}

.mp-crop-modal.hidden {
  display: none;
}

.mp-crop-card {
  width: min(100%, 34rem);
  padding: 1.1rem;
  background: #fff;
  color: #101828;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.mp-crop-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  color: #101828;
}

.mp-crop-card .note {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: #667085;
}

.mp-crop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  background: #0f172a;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mp-crop-frame img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}

.mp-crop-zoom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.9rem 0 0.2rem;
  font-size: 0.85rem;
  color: #475467;
}

.mp-crop-zoom input {
  flex: 1;
  min-width: 0;
}

.mp-crop-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.mp-crop-actions button {
  flex: 1;
}

.mp-crop-zoom,
.mp-crop-card h3,
.mp-crop-card .note {
  user-select: none;
  -webkit-user-select: none;
}

/* ===== Registro de negocio -- diseño de referencia ===== */
/* Barra superior del registro: atrás | VYNKO | Omitir por ahora */
.mp-biz-create-brand,
.mp-biz-skip-btn {
  display: none;
}

#businessProfileView.biz-creating .mp-pay-topbar {
  background: #fff;
  border-bottom: none;
}

#businessProfileView.biz-creating #businessProfileTopbarTitle,
#businessProfileView.biz-creating #businessProfileTopbarGearBtn,
#businessProfileView.biz-creating #businessProfileTopbarSubtitle {
  display: none;
}

#businessProfileView.biz-creating .mp-biz-create-brand {
  display: block;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1e2a6e;
  text-align: center;
}

#businessProfileView.biz-creating .mp-biz-create-brand b {
  color: #2563eb;
  font-weight: 900;
}

#businessProfileView.biz-creating .mp-biz-skip-btn {
  display: block;
  background: none;
  border: none;
  padding: 0.3rem 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2563eb;
  white-space: nowrap;
}

.mp-biz-create {
  padding: 0 0 2rem;
  background: #f4f7fd;
}

.mp-biz-create.hidden {
  display: none;
}

.mp-biz-create-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.2rem 1rem 2.4rem 1.1rem;
  background: linear-gradient(180deg, #eaf2ff 0%, #f4f7fd 100%);
  overflow: hidden;
}

.mp-biz-create-hero-text {
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.mp-biz-create-hero h2 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  color: #1e2a6e;
}

.mp-biz-create-hero p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #4b5b85;
}

.mp-biz-create-art {
  flex-shrink: 0;
  width: 9.4rem;
  height: auto;
  margin-right: -0.3rem;
}

.mp-biz-create-form {
  margin-top: -1.6rem;
  padding: 0 0.8rem;
  position: relative;
}

.mp-biz-create-card {
  margin-bottom: 0.9rem;
  padding: 1rem 0.95rem 1.1rem;
  background: #fff;
  border: 1px solid #e6ecf7;
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.06);
}

.mp-biz-create-logo-row {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.mp-biz-create-dropzone {
  flex: 0 0 6.6rem;
  height: 6.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: #f2f7ff;
  border: 2px dashed #7aa5f5;
  border-radius: 16px;
  color: #2b4a8b;
  font-family: inherit;
  cursor: pointer;
}

.mp-biz-create-dropzone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-biz-create-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.mp-biz-create-tip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.85rem;
  background: #eaf2fd;
  border-radius: 16px;
}

.mp-biz-create-tip > svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mp-biz-create-tip div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mp-biz-create-tip strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #17224f;
}

.mp-biz-create-tip span {
  font-size: 0.76rem;
  line-height: 1.3;
  color: #4b5b85;
}

.mp-biz-create-field {
  display: block;
  min-width: 0;
  margin-bottom: 0.85rem;
}

.mp-biz-create-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #17224f;
}

.mp-biz-create-label svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mp-biz-create-label i {
  font-style: normal;
  color: #e11d48;
}

.mp-biz-create-label em {
  font-style: normal;
  font-weight: 400;
  color: #667085;
}

.mp-biz-create-field input,
.mp-biz-create-field select,
.mp-biz-create-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid #d9e2f1;
  border-radius: 13px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #101828;
  outline: none;
}

.mp-biz-create-field input::placeholder,
.mp-biz-create-field textarea::placeholder {
  color: #98a2b3;
}

.mp-biz-create-field input:focus,
.mp-biz-create-field select:focus,
.mp-biz-create-field textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.mp-biz-create-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.mp-biz-create-select {
  position: relative;
  display: block;
}

.mp-biz-create-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
}

.mp-biz-create-chev {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.mp-biz-create-area {
  position: relative;
  display: block;
}

.mp-biz-create-area textarea {
  min-height: 5.6rem;
  padding-bottom: 1.6rem;
  resize: none;
}

.mp-biz-create-area small {
  position: absolute;
  right: 0.8rem;
  bottom: 0.55rem;
  font-size: 0.72rem;
  color: #98a2b3;
}

.mp-biz-create-input-icon {
  position: relative;
  display: block;
}

.mp-biz-create-input-icon input {
  padding-right: 3rem;
}

.mp-biz-create-input-icon button {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
}

.mp-biz-create-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #17224f;
}

.mp-biz-create-brandrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-biz-create-brandrow svg {
  flex-shrink: 0;
}

.mp-biz-create-brandrow input {
  flex: 1;
  min-width: 0;
}

.mp-biz-create-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.4rem;
  margin-top: 0.3rem;
  background: #2563eb;
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.7);
  color: #fff;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
}

.mp-biz-create-submit:disabled {
  opacity: 0.6;
}

.mp-biz-create-foot {
  margin: 0.8rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: #667085;
}

.mp-biz-create-msg {
  text-align: center;
  color: #e11d48;
}

/* Botón de WhatsApp en la ficha del negocio */
.mp-biz-btn-wa {
  color: #128c4a;
  border-color: #b7e4c7;
  background: #f0fbf4;
}

@media (max-width: 380px) {
  .mp-biz-create-two.contact {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta de contacto: dos columnas angostas en celular -- letra y espacios más
   chicos para que las etiquetas entren en una línea y los campos se lean. */
.mp-biz-create-two.contact {
  gap: 0.6rem;
}

.mp-biz-create-two.contact .mp-biz-create-label {
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

.mp-biz-create-two.contact .mp-biz-create-label em {
  font-size: 0.7rem;
}

.mp-biz-create-two.contact .mp-biz-create-label svg {
  width: 17px;
  height: 17px;
}

.mp-biz-create-two.contact input,
.mp-biz-create-two.contact select {
  padding: 0.7rem 0.6rem;
  font-size: 0.86rem;
}

.mp-biz-create-two.contact .mp-biz-create-select select {
  padding-right: 1.8rem;
}

.mp-biz-create-brandrow {
  gap: 0.35rem;
}

.mp-biz-create-brandrow svg {
  width: 26px;
  height: 26px;
}

/* ===== Regalos recibidos + Clasificación (menú de las 3 rayitas) ===== */
.mp-gv-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.mp-gv-sub {
  margin: 1.2rem 0 0.6rem;
  font-size: 1.02rem;
  font-weight: 800;
}

.mp-gv-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.mp-gv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.9rem 0.5rem;
  background: linear-gradient(135deg, #eef4ff, #f3edff);
  border: 1px solid #dfe7fb;
  border-radius: 16px;
  text-align: center;
}

.mp-gv-stat-icon {
  font-size: 1.5rem;
}

.mp-gv-stat strong {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.mp-gv-stat span:last-child {
  font-size: 0.78rem;
  color: #667085;
}

.mp-gv-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mp-gv-top-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: #f4f6fa;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  font-size: 0.85rem;
}

.mp-gv-top-chip em {
  font-style: normal;
  font-weight: 700;
  color: #7c3aed;
}

.mp-gv-list,
.mp-rk-list,
.mp-rk-winners {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-gv-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.mp-gv-item-emoji {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: #f4f0ff;
  border-radius: 14px;
}

.mp-gv-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-gv-item-body span,
.mp-gv-item-meta span {
  font-size: 0.78rem;
  color: #667085;
}

.mp-gv-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.mp-gv-empty {
  margin: 1rem 0;
  text-align: center;
  line-height: 1.4;
}

.mp-rk-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 116px;
  margin-bottom: 1.1rem;
  padding: 0.8rem 5.6rem 0.8rem 0.75rem;
  overflow: hidden;
  background: linear-gradient(100deg, #f4f8ff 45%, #dbe6ff 100%);
  border: 1px solid #dfe7fb;
  border-radius: 20px;
}

.mp-rk-hero-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #e4edff;
  border-radius: 50%;
}

.mp-rk-hero-text {
  min-width: 0;
}

.mp-rk-hero-text h2 {
  margin: 0;
  font-size: 1.4rem;
}

.mp-rk-hero-text p {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #475467;
}

.mp-rk-hero-cup {
  position: absolute;
  right: 0.3rem;
  bottom: 0;
  width: 6rem;
  height: 6rem;
  filter: drop-shadow(0 6px 10px rgba(240, 163, 10, 0.35));
}

.mp-rk-sect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.mp-rk-sect-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.mp-rk-how {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  background: #e8f0ff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563eb;
}

.mp-rk-howbox {
  margin-bottom: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: #f4f8ff;
  border: 1px solid #dfe7fb;
  border-radius: 14px;
}

.mp-rk-howbox p {
  margin: 0.25rem 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: #344054;
}

.mp-rk-goals {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-rk-goal {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.8rem;
  row-gap: 0.55rem;
  padding: 0.9rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}

.mp-rk-goal.done {
  background: #fff9e8;
  border-color: #f6d98a;
}

.mp-rk-goal-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6336c;
  background: #fde7ef;
  border-radius: 50%;
}

.mp-rk-goal-gifts .mp-rk-goal-icon {
  color: #7c3aed;
  background: #efe7ff;
}

.mp-rk-goal-gifts .mp-rk-bar span {
  background: #8b5cf6;
}

.mp-rk-goal-kind {
  margin: 0.15rem 0 0 !important;
  font-size: 0.74rem !important;
  font-weight: 700;
  color: #b9770e !important;
}

.mp-rk-goal-pending {
  margin: 0.3rem 0 0 !important;
  font-size: 0.78rem !important;
  color: #2563eb !important;
}

.mp-rk-goal-live .mp-rk-goal-icon {
  color: #0f9d78;
  background: #dcf5ec;
}

.mp-rk-goal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.mp-rk-goal-head strong {
  font-size: 0.92rem;
  line-height: 1.25;
}

.mp-rk-goal-badge {
  flex-shrink: 0;
  padding: 0.2rem 0.65rem;
  background: #e8f0ff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #2563eb;
}

.mp-rk-goal.done .mp-rk-goal-badge {
  background: #ffefc2;
}

.mp-rk-goal-main p {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  color: #475467;
}

.mp-rk-bar {
  grid-column: 2;
  height: 9px;
  overflow: hidden;
  background: #e4e9f7;
  border-radius: 999px;
}

.mp-rk-bar span {
  display: block;
  height: 100%;
  background: #2563eb;
  border-radius: 999px;
}

.mp-rk-goal-live .mp-rk-bar span {
  background: #10b981;
}

.mp-rk-goal.done .mp-rk-bar span {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.mp-rk-goal-foot {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #475467;
}

.mp-rk-goal-foot span:last-child {
  color: #667085;
}

.mp-rk-tabs {
  display: flex;
  gap: 0.2rem;
  margin: 1.2rem 0 0.8rem;
  padding: 0.25rem;
  background: #eef1f7;
  border-radius: 999px;
}

.mp-rk-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 0.3rem;
  background: none;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: #475467;
}

.mp-rk-tab.active {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.mp-rk-mine {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: #eaf2ff;
  border-radius: 16px;
}

.mp-rk-mine div {
  display: flex;
  flex-direction: column;
}

.mp-rk-mine span:not(.mp-rk-mine-pos) {
  font-size: 0.8rem;
  color: #475467;
}

.mp-rk-mine-pos {
  font-size: 1.4rem;
  font-weight: 800;
  color: #2563eb;
}

.mp-rk-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mp-rk-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem 0.55rem 0.5rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 16px;
  cursor: pointer;
}

.mp-rk-row.first {
  background: #fff6e0;
  border-color: #f6d98a;
}

.mp-rk-row.me {
  background: #edf3ff;
  border-color: #cfdcfb;
}

.mp-rk-pos {
  flex-shrink: 0;
  width: 1.9rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #667085;
}

.mp-rk-pos {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}

.mp-rk-pos small {
  font-size: 0.68rem;
  font-weight: 700;
  color: #667085;
}

.mp-rk-pos:not(.medal) small {
  font-size: 1rem;
  font-weight: 800;
}

.mp-rk-pos.medal {
  font-size: 1.6rem;
}

.mp-rk-row .mp-avatar-round-56 {
  flex-shrink: 0;
}

.mp-rk-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-rk-row-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.mp-rk-row-body span {
  font-size: 0.82rem;
  color: #667085;
}

.mp-rk-follow,
.mp-rk-chip {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}

.mp-rk-follow {
  background: #2563eb;
  color: #fff;
}

.mp-rk-follow.following {
  background: #e8f0ff;
  color: #2563eb;
}

.mp-rk-chip {
  background: #dbe7ff;
  color: #2563eb;
}

.mp-rk-winner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.mp-rk-winner div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-rk-winner div span {
  font-size: 0.78rem;
  color: #667085;
}

.mp-rk-winner em {
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.72rem;
  color: #98a2b3;
}

.mp-gv-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
}

.mp-gv-head .mp-back-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #eef1f7;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  color: #101828;
  box-shadow: none;
}

.mp-gv-head > div {
  min-width: 0;
}

.mp-gv-head .note {
  margin: 0.15rem 0 0;
}

/* ---------- Mi saldo ---------- */
.mp-wl-hero {
  padding: 1.1rem 1rem 1rem;
  margin-bottom: 0.9rem;
  color: #3d2a05;
  background: linear-gradient(135deg, #fff3cf 0%, #ffe08a 55%, #f7c948 100%);
  border: 1px solid #f0cf72;
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(201, 138, 31, 0.22);
}

.mp-wl-hero-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.mp-wl-hero-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.mp-wl-hero-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a5a0b;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}

.mp-wl-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8a5a0b;
}

.mp-wl-coins {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
}

.mp-wl-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.mp-wl-money > div {
  padding: 0.6rem 0.7rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
}

.mp-wl-money small {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8a5a0b;
}

.mp-wl-money b {
  font-size: 1.05rem;
}

.mp-wl-avail {
  color: #0f7a4d;
}

.mp-wl-minbox {
  margin-bottom: 0.7rem;
}

.mp-wl-minbar {
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
}

.mp-wl-minbar span {
  display: block;
  height: 100%;
  background: #c98a1f;
  border-radius: 999px;
}

.mp-wl-minbox p {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.mp-wl-withdraw {
  width: 100%;
}

.mp-wl-withdraw:disabled {
  opacity: 0.55;
}

.mp-wl-hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #6b4a0c;
}

.mp-wl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mp-wl-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.6rem;
  background: #f7f9ff;
  border: 1px solid #dfe7fb;
  border-radius: 16px;
}

.mp-wl-stat span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475467;
}

.mp-wl-stat b {
  font-size: 0.95rem;
}

.mp-wl-stat small {
  font-size: 0.66rem;
  line-height: 1.25;
  color: #667085;
}

.mp-wl-spend {
  margin: 0.6rem 0 0;
}

.mp-wl-chips {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.mp-wl-chip {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  background: #eef1f7;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475467;
}

.mp-wl-chip.active {
  background: #2563eb;
  color: #fff;
}

.mp-wl-tabs .mp-rk-tab {
  font-size: 0.8rem;
}

.mp-wl-list {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}

.mp-wl-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.mp-wl-item.pending {
  opacity: 0.85;
}

.mp-wl-item-icon {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: #f4f0ff;
  border-radius: 14px;
}

.mp-wl-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-wl-item-body span {
  font-size: 0.76rem;
  line-height: 1.3;
  color: #667085;
}

.mp-wl-item-amount {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mp-wl-item-amount b {
  color: #0f7a4d;
}

.mp-wl-item.pending .mp-wl-item-amount b {
  color: #b9770e;
}

.mp-wl-item-amount span {
  font-size: 0.72rem;
  color: #667085;
}

.mp-wl-pill {
  flex-shrink: 0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.mp-wl-pill.pending { background: #fff1cc; color: #8a5a0b; }
.mp-wl-pill.paid { background: #dcf5ec; color: #0f7a4d; }
.mp-wl-pill.rejected { background: #fde7ef; color: #b42353; }

/* Logo de la marca junto al nombre, en la barra superior del celular. */
.mp-mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mp-topbar-mark {
  flex-shrink: 0;
  height: 1.5rem;
  width: auto;
}

/* ---------- Mi negocio: plan, publicaciones y pantalla de planes ---------- */
.mp-biz-plan-chip,
.mp-boost-chip {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  background: #fff1cc;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #8a5a0b;
  vertical-align: middle;
}

.mp-biz-plan-card {
  margin: 0.8rem 0;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, #fff9e6 0%, #ffefc2 100%);
  border: 1px solid #f0cf72;
}

.mp-biz-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.mp-biz-plan-top small {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8a5a0b;
}

.mp-biz-plan-top strong {
  font-size: 1.25rem;
}

.mp-biz-plan-card .note {
  margin: 0.5rem 0 0;
  color: #6b4a0c;
}

.mp-bp-bar {
  margin-bottom: 0.8rem;
}

.mp-bp-bar .note {
  margin: 0.4rem 0 0;
}

.mp-bp-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.mp-bp-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 16px;
}

.mp-bp-thumb {
  position: relative;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  overflow: hidden;
  background: #eef1f7;
  border-radius: 12px;
}

.mp-bp-thumb img,
.mp-bp-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-bp-pin {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 1rem;
}

.mp-bp-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-bp-caption {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
}

.mp-bp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: #475467;
}

.mp-bp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.mp-bp-actions button {
  padding: 0.3rem 0.65rem;
  background: #eef1f7;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: #344054;
}

.mp-bp-actions button.danger {
  color: #b42353;
}

.mp-bpl-coins {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: #f7f9ff;
  border: 1px solid #dfe7fb;
  border-radius: 14px;
  font-size: 0.9rem;
}

.mp-bpl-buy {
  padding: 0.4rem 0.8rem;
  background: #2563eb;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.mp-bpl-current {
  margin-bottom: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.mp-bpl-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mp-bpl-card {
  padding: 1rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}

.mp-bpl-card.current {
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
}

.mp-bpl-card.top {
  background: linear-gradient(135deg, #fffdf5 0%, #fff3cf 100%);
  border-color: #f0cf72;
}

.mp-bpl-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.mp-bpl-card header strong {
  font-size: 1.2rem;
}

.mp-bpl-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #b9770e;
}

.mp-bpl-price small {
  font-size: 0.72rem;
  font-weight: 600;
  color: #667085;
}

.mp-bpl-card p {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: #475467;
}

.mp-bpl-card ul {
  list-style: none;
  margin: 0.5rem 0 0.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.mp-bpl-choose {
  width: 100%;
  padding: 0.7rem;
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}

.mp-bpl-choose:disabled {
  background: #e4e9f7;
  color: #667085;
}

/* ---------- Canje de monedas por productos ---------- */
.mp-biz-coins-chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  background: #fff1cc;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #8a5a0b;
}

.mp-rd-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mp-rd-item {
  padding: 0.75rem 0.8rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 16px;
}

.mp-rd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.mp-rd-item .note {
  margin: 0.25rem 0 0;
}

.mp-rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.mp-rd-code {
  flex: 1;
  min-width: 8rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cfd8ea;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mp-rd-ok,
.mp-rd-no {
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

.mp-rd-ok {
  background: #0f9d78;
  color: #fff;
}

.mp-rd-no {
  background: #eef1f7;
  color: #b42353;
}

.mp-rd-pill {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.mp-rd-pill.pending { background: #fff1cc; color: #8a5a0b; }
.mp-rd-pill.delivered { background: #dcf5ec; color: #0f7a4d; }
.mp-rd-pill.cancelled,
.mp-rd-pill.expired { background: #eef1f7; color: #667085; }

.mp-rd-mycode {
  padding: 0.05rem 0.4rem;
  background: #eaf2ff;
  border-radius: 6px;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #2563eb;
}

.mp-rd-out {
  color: #b42353;
}

/* Modal de un producto: precio en monedas + botones a todo el ancho. */
.mp-biz-item-modal .mp-biz-coins-chip {
  margin: 0.5rem 0 0.2rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

.mp-biz-item-modal .mp-btn-gold-pill,
.mp-biz-item-modal .mp-btn-outline {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
}

/* ---------- Anuncios de negocios: reproductor a pantalla completa ---------- */
.mp-ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  background: #05070f;
  color: #fff;
}

.mp-ad-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.7rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent);
}

.mp-ad-tag {
  padding: 0.15rem 0.55rem;
  background: #f5b301;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #3d2a05;
  text-transform: uppercase;
}

.mp-ad-biz {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
}

.mp-ad-skip {
  padding: 0.45rem 0.9rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

.mp-ad-skip:disabled {
  opacity: 0.7;
}

.mp-ad-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-ad-stage video,
.mp-ad-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mp-ad-bottom {
  padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
}

.mp-ad-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
}

.mp-ad-reward {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffd66b;
}

.mp-ad-cta {
  width: 100%;
  padding: 0.85rem;
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.mp-store-earn-card {
  margin: 0 0 1rem;
}

/* Ficha del negocio: los botones secundarios (WhatsApp, Sitio web, Compartir,
   Guardar) van en 2 columnas iguales para que no se amontonen ni se salgan; las
   pestañas respiran y se desplazan de lado. */
.mp-biz-actions-row.secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.mp-biz-actions-row.secondary > .mp-biz-btn-soft {
  min-width: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-biz-actions-row.secondary > #businessPlansBtn {
  grid-column: 1 / -1;
}

.mp-biz-tab {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

/* ---------- Publicidad (Mi negocio): formulario de anuncio ---------- */
.mp-adf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.mp-adf-head h3 {
  margin: 0;
  font-size: 1.6rem;
}

.mp-adf-head .note {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
}

.mp-adf-how {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  background: #e6f0ff;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1d4ed8;
}

.mp-adf-hero {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f1f5ff 0%, #ece8ff 100%);
  border: 1px solid #e0e6fb;
  border-radius: 20px;
}

.mp-adf-hero-text {
  max-width: 68%;
}

.mp-adf-hero-text h4 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1.25;
}

.mp-adf-hero-text p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #475467;
}

.mp-adf-mega {
  position: absolute;
  top: 0.6rem;
  right: 0.4rem;
  width: 6.4rem;
  height: auto;
}

.mp-adf-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.mp-adf-perk {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #667085;
}

.mp-adf-perk strong {
  display: block;
  font-size: 0.8rem;
  color: #101828;
}

.mp-adf-perk-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.mp-adf-perk-icon.blue { background: #dbeafe; color: #2563eb; }
.mp-adf-perk-icon.pink { background: #fde7f3; color: #d6336c; }
.mp-adf-perk-icon.green { background: #dcf5ec; color: #0f9d78; }

.mp-adf-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mp-adf-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.mp-adf-label b {
  color: #e11d48;
}

.mp-adf-label em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  color: #667085;
}

.mp-adf-help {
  width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.25rem;
  padding: 0;
  background: none;
  border: 1.5px solid #98a2b3;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #667085;
}

.mp-adf-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.85rem;
  background: #fff;
  border: 1px solid #d5dbea;
  border-radius: 14px;
  color: #475467;
}

.mp-adf-input:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.mp-adf-input svg {
  flex-shrink: 0;
}

.mp-adf-input input,
.mp-adf-input select {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.95rem;
  color: #101828;
}

.mp-adf-drop {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.2rem 1rem;
  background: #f4f8ff;
  border: 1.5px dashed #9db8ee;
  border-radius: 16px;
  font-family: inherit;
  color: #101828;
  text-align: center;
}

.mp-adf-drop svg {
  color: #1f2a44;
}

.mp-adf-drop small {
  font-size: 0.75rem;
  color: #667085;
}

.mp-adf-drop img,
.mp-adf-drop video {
  max-width: 100%;
  max-height: 9rem;
  border-radius: 10px;
}

.mp-adf-where {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mp-adf-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: #eef1f7;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.mp-adf-switch-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  background: #eef4ff;
  border-radius: 14px;
  cursor: pointer;
}

.mp-adf-switch-row small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: #667085;
}

.mp-adf-switch {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 1.8rem;
}

.mp-adf-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
}

.mp-adf-switch i {
  position: absolute;
  inset: 0;
  background: #c7cfdd;
  border-radius: 999px;
  transition: background 0.2s;
}

.mp-adf-switch i::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.3);
  transition: transform 0.2s;
}

.mp-adf-switch input:checked + i {
  background: #2563eb;
}

.mp-adf-switch input:checked + i::after {
  transform: translateX(1.2rem);
}

.mp-adf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem;
  background: linear-gradient(90deg, #2563eb, #7c4dff);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.7);
}

.mp-adf-submit:disabled {
  opacity: 0.6;
}

.mp-adf-list-title {
  margin: 1.3rem 0 0.6rem;
  font-size: 1.1rem;
}

.mp-adf-head > div:first-child { flex: 1; min-width: 0; }
.mp-adf-label > span { white-space: nowrap; }
.mp-adf-label em { text-align: right; }

/* ===== Comprar monedas: diseño nuevo (cabecera, promoción, beneficios, paquetes) ===== */
.mp-sh {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.mp-sh-back {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.mp-sh-text {
  flex: 1;
  min-width: 0;
}

.mp-sh-text h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 800;
  color: #101828;
}

.mp-sh-text p {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #667085;
}

.mp-sh-balance {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 20px;
  box-shadow: 0 6px 18px -8px rgba(16, 24, 40, 0.25);
}

.mp-sh-balance img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.mp-sh-balance div {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.mp-sh-balance span {
  font-size: 0.72rem;
  color: #667085;
}

.mp-sh-balance strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: #d97706;
}

.mp-sh-plus {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #2f7bff;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: #2f7bff;
}

.mp-se {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.1rem 1rem 1rem;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 210, 120, 0.35), transparent 40%),
    linear-gradient(135deg, #f4eefe 0%, #ebeeff 55%, #e2ecff 100%);
  border: 1px solid #e3e0fa;
  border-radius: 26px;
  box-shadow: 0 10px 26px -14px rgba(76, 60, 200, 0.4);
}

.mp-se-free {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.35rem 0.9rem;
  background: #6d43e8;
  border-radius: 0 26px 0 14px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}

.mp-se-tagrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.mp-se-icon {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c9b8f6;
  border-radius: 50%;
  color: #1f2358;
}

.mp-se-promo {
  padding: 0.3rem 0.8rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #4b3bd0;
}

.mp-se h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  font-size: 1.55rem;
  line-height: 1.1;
  font-weight: 900;
  color: #101a3d;
}

.mp-se p {
  position: relative;
  z-index: 1;
  max-width: 62%;
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #4b5675;
}

.mp-se .js-ad-btn {
  position: relative;
  z-index: 1;
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.8rem;
  background: linear-gradient(90deg, #2f5bff, #5b3bf0);
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(47, 91, 255, 0.8);
}

.mp-se .js-ad-btn:disabled {
  opacity: 0.6;
}

.mp-se-art {
  position: absolute;
  right: -0.4rem;
  top: 2.6rem;
  width: 48%;
  height: auto;
  pointer-events: none;
}

.mp-sf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.2rem;
  padding: 0.9rem 0.4rem;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 22px;
  box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.2);
}

.mp-sf-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0 0.5rem;
}

.mp-sf-item + .mp-sf-item {
  border-left: 1px solid #eceff5;
}

.mp-sf-icon {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.mp-sf-icon.green { background: #d9f5ea; color: #0f9d78; }
.mp-sf-icon.pink { background: #fde3ef; color: #e0356f; }
.mp-sf-icon.gold { background: #fdf0cf; color: #e59a0b; }

.mp-sf-item strong {
  display: block;
  font-size: 0.8rem;
  color: #101828;
}

.mp-sf-item span:not(.mp-sf-icon) {
  display: block;
  font-size: 0.7rem;
  line-height: 1.25;
  color: #667085;
}

.mp-pk-title {
  font-size: 1.35rem;
  color: #101828;
}

.mp-pk-note {
  margin: 0 0 0.7rem;
}

.mp-pk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 1rem 0 1.2rem;
}

.mp-pk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.1rem 0.25rem 0.5rem;
  background: linear-gradient(180deg, #14224a 0%, #0c1636 100%);
  border: 2px solid #1c2c5e;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 20px -12px rgba(12, 22, 54, 0.8);
}

.mp-pk-card.popular {
  border-color: #7c5cff;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.35), 0 10px 22px -10px rgba(124, 92, 255, 0.8);
}

.mp-pk-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.4rem;
  background: #7c4dff;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
}

.mp-pk-badge.cyan {
  background: #06b6d4;
}

.mp-pk-art {
  width: 100%;
  height: 3.4rem;
}

.mp-pk-amount {
  margin-top: 0.3rem;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

.mp-pk-unit {
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  color: #c5cdea;
}

.mp-pk-price {
  width: 100%;
  padding: 0.5rem 0.1rem;
  background: #eef2ff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: #10183a;
  white-space: nowrap;
}

.mp-secure {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: #f0f4ff;
  border-radius: 18px;
}

.mp-secure > div {
  flex: 1;
  min-width: 0;
}

.mp-secure strong {
  display: block;
  color: #101828;
}

.mp-secure div span {
  font-size: 0.85rem;
  color: #667085;
}

.mp-secure-chev {
  color: #2f7bff;
}

/* Ajustes finos de Comprar monedas */
.mp-se h3 { max-width: 60%; font-size: 1.25rem; }
.mp-se p { max-width: 58%; font-size: 0.85rem; }
.mp-se-art { top: 3.4rem; width: 44%; }
.mp-sf { padding: 0.8rem 0.2rem; }
.mp-sf-item { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0 0.45rem; }
.mp-sf-icon { width: 2.3rem; height: 2.3rem; }
.mp-sf-item strong { font-size: 0.74rem; }
.mp-sf-item span:not(.mp-sf-icon) { font-size: 0.64rem; }
.mp-se .js-ad-btn { width: 100%; gap: 0.4rem; padding: 0.85rem 0.6rem; font-size: 0.88rem; white-space: nowrap; }
.mp-se .js-ad-btn span { overflow: hidden; text-overflow: ellipsis; }

.mp-adf-editbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: #fff7e0;
  border: 1px solid #f3d98a;
  border-radius: 14px;
}

.mp-adf-editbar > div { flex: 1; min-width: 0; }
.mp-adf-editbar small { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: #7a6320; }
.mp-adf-editbar button { flex-shrink: 0; padding: 0.4rem 0.8rem; background: #fff; border: 1px solid #e0c56a; border-radius: 999px; font-weight: 700; color: #7a6320; }

/* ============================================================
   VYNKO Play: portada en cuadrícula + visor a pantalla completa
   (pedido con captura: al tocar un video se abre en grande, con
   flecha para volver, columna de acciones a la derecha, nombre,
   fecha, descripción y sonido abajo a la izquierda)
   ============================================================ */
.mp-vph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 60% at 50% 0%, #0d1d45 0%, #060d22 55%, #040817 100%);
  color: #fff;
}

.mp-vynko-play-view.mp-vp-viewing .mp-vph { display: none; }
.mp-vynko-play-view:not(.mp-vp-viewing) #vynkoPlayFeed,
.mp-vynko-play-view:not(.mp-vp-viewing) .mp-vp-back { display: none; }
#vynkoPlayFeed { position: relative; }

.mp-vph-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1rem 0.6rem;
}

.mp-vph-title { font-size: 1.2rem; font-weight: 800; }
.mp-vph-title b { color: #4aa3ff; font-weight: 800; }

.mp-vph-search {
  position: absolute;
  right: 0.9rem;
  top: calc(0.75rem + env(safe-area-inset-top));
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
}

.mp-vph-tabs {
  display: flex;
  justify-content: center;
  gap: 3.2rem;
  padding: 0 1rem 0.5rem;
}

.mp-vph-tabs button {
  padding: 0.3rem 0.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.mp-vph-tabs button.active { color: #fff; border-bottom-color: #2f9bff; }

.mp-vph-chips {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding: 0.5rem 1rem 0.8rem;
  scrollbar-width: none;
}

.mp-vph-chips::-webkit-scrollbar { display: none; }

.mp-vph-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.72rem;
  color: #fff;
}

.mp-vph-chip-ring {
  position: relative;
  display: flex;
  width: 3.7rem;
  height: 3.7rem;
  padding: 2.5px;
  border-radius: 50%;
  background: conic-gradient(#8b5cf6, #f5a524, #ec4899, #38bdf8, #8b5cf6);
}

.mp-vph-chip-ring.live { background: conic-gradient(#ef4444, #f97316, #ef4444); }

.mp-vph-chip-in {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #060d22;
  border-radius: 50%;
  background: #0f1a3a;
  font-size: 1.5rem;
}

.mp-vph-chip-in img { width: 100%; height: 100%; object-fit: cover; }

.mp-vph-chip-plus {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f9bff;
  border: 2px solid #060d22;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.mp-vph-chip.active .mp-vph-chip-ring { box-shadow: 0 0 0 2px #060d22, 0 0 0 4px #2f9bff; }

.mp-vph-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 0.55rem 6rem;
  scrollbar-width: none;
}

.mp-vph-scroll::-webkit-scrollbar { display: none; }

.mp-vph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.mp-vph-tile {
  position: relative;
  padding: 0;
  aspect-ratio: 3 / 4.3;
  overflow: hidden;
  background: #101a36;
  border: 2px solid transparent;
  border-radius: 14px;
  color: #fff;
}

.mp-vph-tile:active { border-color: #2f9bff; }

.mp-vph-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.mp-vph-tile-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.4rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.mp-vph-views {
  position: absolute;
  left: 0.55rem;
  bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.mp-vph-play {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mp-vph-tile:active .mp-vph-play { display: flex; }

.mp-vph-play span {
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}

.mp-vph-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

#vphSentinel { height: 1px; }

.mp-vph-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1.4rem 0.4rem calc(0.55rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(4, 8, 23, 0.97) 38%);
}

.mp-vph-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.72);
}

.mp-vph-nav button.active { color: #fff; }

.mp-vph-nav .mp-vph-plusbtn {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  justify-content: center;
  background: #fff;
  border-radius: 14px;
  color: #0b1330;
  box-shadow: 0 0 0 2px rgba(74, 163, 255, 0.6), 0 0 18px rgba(139, 92, 246, 0.75);
}

/* ---- Visor ---- */
.mp-vp-back {
  position: absolute;
  top: calc(0.8rem + env(safe-area-inset-top));
  left: 0.7rem;
  z-index: 6;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.28);
  border: none;
  border-radius: 50%;
  color: #fff;
}

.mp-vp-only { display: none; }
#vynkoPlayFeed .mp-vp-only { display: flex; }

#vynkoPlayFeed .mp-post-card-header {
  position: static;
  height: 0;
  padding: 0;
  background: none;
  pointer-events: none;
}

#vynkoPlayFeed .mp-post-card-header > *:not(.mp-post-card-menu-wrap) { display: none; }

#vynkoPlayFeed .mp-post-card-menu-wrap {
  position: absolute;
  right: 0.4rem;
  bottom: calc(4.9rem + env(safe-area-inset-bottom));
  z-index: 4;
  pointer-events: auto;
}

#vynkoPlayFeed .mp-post-card-menu-btn {
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: rotate(90deg);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

#vynkoPlayFeed .mp-post-card-menu { top: auto; bottom: calc(100% + 4px); right: 0; }
#vynkoPlayFeed .mp-post-card-counts-facebook,
#vynkoPlayFeed .mp-post-card-caption,
#vynkoPlayFeed .mp-post-card-action.save-btn { display: none; }

#vynkoPlayFeed .mp-post-card-actions {
  right: 0.5rem;
  bottom: calc(7.6rem + env(safe-area-inset-bottom));
  gap: 0.85rem;
}

#vynkoPlayFeed .mp-post-card-action { min-height: 0; }
#vynkoPlayFeed .mp-post-card-action .mp-act-label { display: none; }
#vynkoPlayFeed .share-btn .mp-act-label { display: block; font-size: 0.66rem; font-weight: 700; color: #fff; }
#vynkoPlayFeed .share-btn .mp-act-count { display: none; }

#vynkoPlayFeed .like-btn:not(.liked) svg .yu-act-fill { fill: #fff; stroke: #fff; }
#vynkoPlayFeed .comment-btn svg path:not(.yu-act-spark),
#vynkoPlayFeed .share-btn svg path:not(.yu-act-spark) { fill: #fff; stroke: #fff; }
#vynkoPlayFeed .comment-btn svg circle { fill: #26304a; }

#vynkoPlayFeed .mp-vp-rail-author {
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
}

.mp-vp-rail-avatar {
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 2px solid #fff;
  border-radius: 50%;
}

.mp-vp-rail-avatar > * { width: 100% !important; height: 100% !important; object-fit: cover; }

.mp-vp-rail-follow {
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ff2d75;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.mp-vp-rail-follow.hidden { display: none !important; }

#vynkoPlayFeed .mp-vp-info {
  position: absolute;
  left: 0.9rem;
  right: 5rem;
  bottom: calc(2.3rem + env(safe-area-inset-bottom));
  z-index: 3;
  flex-direction: column;
  gap: 0.25rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.mp-vp-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  text-align: left;
  color: #fff;
}

.mp-vp-date { font-size: 0.8rem; opacity: 0.9; }

.mp-vp-caption {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.mp-vp-caption b { font-weight: 800; }

.mp-vp-sound {
  overflow: hidden;
  font-size: 0.85rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#vynkoPlayFeed .mp-vp-disc {
  position: absolute;
  right: 0.55rem;
  bottom: calc(1.6rem + env(safe-area-inset-bottom));
  z-index: 3;
  width: 2.9rem;
  height: 2.9rem;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #1b2244 34%, #05070f 36%);
  border: 2px solid #2a3560;
  border-radius: 50%;
  animation: mpVpSpin 6s linear infinite;
}

@keyframes mpVpSpin { to { transform: rotate(360deg); } }

#vynkoPlayFeed .mp-video-progress { left: 0.9rem; right: 0.9rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
#vynkoPlayFeed .mp-video-progress-fill { background: #fff; }
.mp-vph-search svg { width: 24px; height: 24px; }
#vynkoPlayFeed .mp-post-card-menu-btn { padding: 0; background: none !important; border: none !important; box-shadow: none !important; }
#vynkoPlayFeed .mp-post-card-menu-wrap { right: 1.2rem; }
#vynkoPlayFeed .mp-post-card-menu-btn,
#vynkoPlayFeed .mp-post-card-menu-btn svg { color: #fff !important; fill: #fff; }
#vynkoPlayView #vynkoPlayFeed .mp-post-card-menu-btn {
  width: 2.6rem !important;
  height: 2.6rem !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: rotate(90deg) !important;
}
#vynkoPlayView #vynkoPlayFeed .mp-post-card-menu-btn svg,
#vynkoPlayView #vynkoPlayFeed .mp-post-card-menu-btn svg circle { fill: #fff !important; color: #fff !important; filter: none !important; }
.mp-vph-top,
.mp-vph-tabs,
.mp-vph-chips,
.mp-vph-nav { flex: 0 0 auto; }
.mp-vph-chips { min-height: 6.6rem; align-items: flex-start; }
.mp-vph-scroll { flex: 1 1 0; min-height: 0; }
#vynkoPlayView .mp-vph-search { width: 2.4rem !important; height: 2.4rem !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; color: #fff !important; }
#vynkoPlayView .mp-vph-search svg { width: 24px !important; height: 24px !important; fill: none !important; stroke: #fff !important; }
/* Visor de VYNKO Play: el botón de sonido va a la altura de la flecha de volver, debajo de la
   barra de estado / isla del iPhone (antes quedaba encima, tapado por la hora y la batería). */
#vynkoPlayView #vynkoPlayFeed .mp-feed-mute-btn {
  top: calc(0.8rem + env(safe-area-inset-top));
  right: 0.7rem;
  z-index: 6;
  width: 2.4rem;
  height: 2.4rem;
  background: rgba(0, 0, 0, 0.28);
  border: none;
}

/* ============================================================
   Empleos: hoja de vida, trabajador independiente, vacantes y
   (del lado del negocio) buscar candidatos con el algoritmo.
   ============================================================ */
.mp-jb-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.mp-jb-hero-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef4ff, #f3edff);
  border-radius: 16px;
  color: #2563eb;
}

.mp-jb-hero-text h2 {
  margin: 0 0 0.2rem;
  font-size: 1.3rem;
}

.mp-jb-hero-text p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.mp-jb-tabs,
.mp-jb-subtabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  scrollbar-width: none;
}

.mp-jb-tabs::-webkit-scrollbar,
.mp-jb-subtabs::-webkit-scrollbar {
  display: none;
}

.mp-jb-tab,
.mp-jb-subtab {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
}

.mp-jb-tab.active,
.mp-jb-subtab.active {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.4);
  color: #2563eb;
}

.mp-jb-panel.hidden {
  display: none;
}

.mp-jb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.mp-jb-filters .mp-ys-input {
  flex: 1;
  min-width: 140px;
}

.mp-jb-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mp-jb-list .mp-bp-item {
  flex-direction: column;
}

.mp-jb-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.mp-jb-form-add {
  padding: 0.9rem;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 16px;
}

/* ============================================================
   Empleos: "Crear nueva vacante" (pedido con imagen de referencia).
   El encabezado ahora es un acordeón (.mp-settings-accordion-item, pedido
   explícito: el formulario arranca oculto y se despliega al tocarlo) --
   ver el bloque .mp-settings-accordion-* para su estilo.
   ============================================================ */
.mp-jb-post-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.mp-jb-post-req {
  color: #ef4444;
}

.mp-jb-field-iconbox {
  position: relative;
}

.mp-jb-field-iconbox .mp-jb-field-icon {
  position: absolute;
  top: 0.78rem;
  left: 0.8rem;
  color: #98a2b3;
  pointer-events: none;
  display: flex;
}

.mp-jb-field-iconbox input.mp-ys-input,
.mp-jb-field-iconbox select.mp-ys-input,
.mp-jb-field-iconbox textarea.mp-textarea {
  padding-left: 2.5rem;
}

.mp-jb-post-submitbtn {
  width: 100%;
}

.mp-jb-post-note {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
}

.mp-jb-post-condiciones {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem;
  border-radius: 14px;
  background: var(--panel-2, #f8f9ff);
  border: 1px dashed var(--border, #d7deff);
}

.mp-jb-post-condiciones h3 {
  margin: 0;
  font-size: 0.95rem;
}

.mp-jb-post-condiciones > p.note {
  margin: 0 0 0.1rem;
}

.mp-jb-vacante-card {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem;
  margin-bottom: 0.7rem;
  border-radius: 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
}

.mp-jb-vacante-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.mp-jb-vacante-body {
  flex: 1;
  min-width: 0;
}

.mp-jb-vacante-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.mp-jb-vacante-head strong {
  flex: 1;
  min-width: 0;
  font-size: 0.94rem;
}

.mp-jb-vacante-status {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.mp-jb-vacante-status.open { color: #15803d; }
.mp-jb-vacante-status.closed { color: #6b7280; }

.mp-jb-vacante-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.6rem;
}

.mp-jb-vacante-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-jb-vacante-actions button {
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border, #d7deff);
  background: var(--panel-2, #f5f7ff);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text, #374151);
  cursor: pointer;
}

.mp-jb-vacante-primary {
  color: #2563eb !important;
  border-color: #cddcff !important;
  background: #eef4ff !important;
}

.mp-jb-vacante-menu-wrap {
  position: relative;
  margin-left: auto;
}

.mp-jb-vacante-menubtn {
  padding: 0.4rem 0.6rem !important;
}

.mp-jb-vacante-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 0.3rem;
  min-width: 150px;
}

.mp-jb-vacante-menu button {
  width: 100%;
  text-align: left;
  border: none !important;
  background: none !important;
}

.mp-jb-sublist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.mp-jb-sub-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 14px;
}

.mp-jb-sub-item-text strong {
  display: block;
  font-size: 0.9rem;
}

.mp-jb-sub-item-text span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mp-jb-sub-item-remove {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  background: #fdecef;
  border: none;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b42353;
}

.mp-jb-yearrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-jb-yearrow .mp-ys-input {
  flex: 1;
  min-width: 100px;
}

.mp-jb-score {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  background: linear-gradient(135deg, #eef4ff, #f3edff);
  border-radius: 16px;
  font-size: 0.85rem;
}

.mp-jb-score-bar {
  height: 8px;
  background: rgba(37, 99, 235, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.mp-jb-score-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #7c4dff);
  transition: width 0.3s ease;
}

.mp-jb-help {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  padding: 0;
  background: none;
  border: 1.5px solid #98a2b3;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
}

.mp-jb-howbox {
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  background: var(--panel-2);
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-dim);
}

.mp-jb-cert-status {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

.mp-jb-cert-status.VERIFIED { background: #dcf5ec; color: #0f7a4d; }
.mp-jb-cert-status.PENDING { background: #fff1cc; color: #8a5a0b; }
.mp-jb-cert-status.REJECTED { background: #fdecef; color: #b42353; }

.mp-jb-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.mp-jb-photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel-2);
}

.mp-jb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-jb-photo button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
}

.mp-jb-locked {
  padding: 1.2rem;
  text-align: center;
  background: linear-gradient(135deg, #eef4ff, #f3edff);
  border-radius: 18px;
}

.mp-jb-locked p {
  margin: 0 0 0.6rem;
}

.mp-jb-score-mini {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  background: rgba(37, 99, 235, 0.12);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #2563eb;
}

/* ============================================================
   Empleos: robot emergente del Agente de Selección con IA (le
   pregunta a la IA cómo funciona Buscar candidatos) y franja
   Premium/candidatos recomendados.
   ============================================================ */
@keyframes mpJbAgentFabPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

.mp-jb-agent-fab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #2c1a63, #3f5fe0);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  animation: mpJbAgentFabPop 0.4s ease-out;
}

.mp-jb-agent-fab-emoji {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1rem;
}

.mp-jb-agent-fab-label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.mp-jb-agent-popover {
  margin-bottom: 1rem;
  padding: 0.9rem;
  border-radius: 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.mp-jb-agent-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.mp-jb-agent-premium-banner {
  margin-top: 1.1rem;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3e8ff, #e6ecff);
  border: 1px solid #ded1ff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.mp-jb-agent-premium-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* Sin esto, algunos WebView de Android (la app empaquetada) no le calculan bien el ancho a
   este texto dentro del flex y lo dejan angostísimo, una palabra por línea -- mismo tipo de
   bug ya visto con CSS Grid en otras pantallas de Empleos. */
.mp-jb-agent-premium-text {
  flex: 1 1 200px;
  min-width: 0;
}

.mp-jb-agent-premium-text strong {
  display: block;
  margin-bottom: 0.15rem;
}

.mp-jb-agent-premium-text p {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted, #4b5566);
}

.mp-jb-agent-reco-row {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: thin;
}

.mp-jb-agent-reco-card {
  flex: 0 0 auto;
  width: 210px;
  padding: 0.8rem;
  border-radius: 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
}

.mp-jb-agent-reco-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.mp-jb-agent-reco-match {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(37, 197, 94, 0.14);
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.mp-jb-agent-reco-name {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-jb-agent-reco-role {
  font-size: 0.74rem;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.4rem;
}

.mp-jb-agent-reco-meta {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
}

.mp-jb-agent-reco-tag {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #3348a3;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ============================================================
   Empleos: búsqueda de candidatos con IA (plan Premium) y
   asistente de entrevistas entrenable.
   ============================================================ */
.mp-jb-ai-card {
  margin-top: 1.2rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8e6, #fdf1da);
  border: 1px solid #f0d9a3;
}

.mp-jb-ai-card h4 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
}

.mp-jb-ai-btn {
  width: 100%;
  margin: 0.6rem 0 0.3rem;
  background: linear-gradient(135deg, #f0b429, #d98c0f) !important;
}

/* ---- Asistente de entrevistas: pantalla completa (pedido con imagen de referencia) ---- */
.mp-jb-iv-headcard {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 18px;
  background: #eef4ff;
}

.mp-jb-iv-head-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dce6ff;
  color: #2f5bff;
}

.mp-jb-iv-head-text {
  flex: 1;
  min-width: 0;
}

.mp-jb-iv-headcard h3 {
  margin: 0 0 0.2rem;
  font-size: 1.08rem;
}

.mp-jb-iv-headcard p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted, #5b6472);
  line-height: 1.35;
}

.mp-jb-iv-activatecard {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 18px;
  background: #eef2ff;
}

.mp-jb-iv-toggle-row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.mp-jb-iv-toggle-row input[type="checkbox"] {
  display: none;
}

/* Contraste fijo (no depende del tema): la tarjeta de fondo ya es celeste clarito, así que el
   gris/azul por defecto del switch se le perdía encima. */
.mp-jb-iv-toggle-row .mp-toggle-switch {
  background: #c7cfe6;
  border-color: transparent;
}

.mp-jb-iv-toggle-row input[type="checkbox"]:checked + .mp-toggle-switch {
  background: var(--gradient-yu, linear-gradient(135deg, #4f7cff, #2f5bff));
  border-color: transparent;
}

.mp-jb-iv-toggle-row input[type="checkbox"]:checked + .mp-toggle-switch .mp-toggle-knob {
  transform: translateX(16px);
}

.mp-jb-iv-activate-text {
  flex: 1;
  min-width: 0;
}

.mp-jb-iv-activate-text strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.94rem;
}

.mp-jb-iv-activate-text p {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted, #5b6472);
  line-height: 1.35;
}

.mp-jb-iv-status-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e5e7eb;
  color: #6b7280;
}

.mp-jb-iv-status-pill.active {
  background: rgba(37, 197, 94, 0.16);
  color: #15803d;
}

.mp-jb-iv-configcard h4 {
  margin: 0 0 1rem;
}

.mp-jb-iv-field {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

.mp-jb-iv-field-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #3348a3;
}

.mp-jb-iv-field-icon.blue { background: #e3edff; color: #2563eb; }
.mp-jb-iv-field-icon.purple { background: #f1e9ff; color: #7c4dff; }
.mp-jb-iv-field-icon.green { background: #e3f9ec; color: #17915a; }

.mp-jb-iv-field-text {
  flex: 1;
  min-width: 0;
}

.mp-jb-iv-field-text strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}

.mp-jb-iv-field-text > p {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted, #5b6472);
  line-height: 1.3;
}

.mp-jb-iv-tone-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mp-jb-iv-tone-opt {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border, #d7deff);
  background: var(--card-bg, #fff);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #374151);
  cursor: pointer;
}

.mp-jb-iv-tone-opt.active {
  border-color: #2563eb;
  color: #2563eb;
  background: #eef4ff;
}

.mp-jb-iv-addrow {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.mp-jb-iv-addrow .mp-ys-input {
  flex: 1;
  min-width: 140px;
}

.mp-jb-iv-addbtn {
  flex-shrink: 0;
  padding: 0 0.9rem;
  border-radius: 12px;
  border: none;
  background: #f1e9ff;
  color: #7c4dff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.mp-jb-iv-tip {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: #fff8e6;
  font-size: 0.8rem;
  color: #7a5b1e;
  margin-bottom: 1rem;
  line-height: 1.35;
}

.mp-jb-iv-savebtn {
  width: 100%;
}

.mp-jb-iv-testcard {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 18px;
  background: #f1e9ff;
}

.mp-jb-iv-test-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3d5ff;
  color: #7c4dff;
}

.mp-jb-iv-test-text {
  flex: 1;
  min-width: 0;
}

.mp-jb-iv-test-text strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.mp-jb-iv-test-text p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted, #5b6472);
  line-height: 1.3;
}

.mp-jb-iv-test-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #8b6cf0, #7c4dff);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.mp-jb-iv-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 340px;
  overflow-y: auto;
  padding: 0.4rem 0.1rem;
  margin-top: 0.8rem;
}

.mp-jb-iv-messages:empty {
  margin-top: 0;
}

.mp-jb-iv-msg {
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.mp-jb-iv-msg.assistant {
  align-self: flex-start;
  background: #eef2ff;
  color: #1e2a52;
  border-bottom-left-radius: 4px;
}

.mp-jb-iv-msg.candidate {
  align-self: flex-end;
  background: linear-gradient(135deg, #4f7cff, #2f5bff);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mp-jb-iv-inputrow {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mp-jb-iv-inputrow .mp-ys-input {
  flex: 1;
  min-width: 0;
}

.mp-jb-iv-modal {
  width: min(480px, 94vw);
  max-height: 86vh;
  margin: 6vh auto;
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
}

.mp-jb-iv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.mp-jb-iv-head h3 {
  margin: 0;
}

.mp-jb-app-interview-row {
  margin-top: 0.5rem;
}

/* ============================================================
   Empleos: encabezado con ilustración, buscador y tarjetas de
   vacante (pedido con imagen de referencia).
   ============================================================ */
.mp-jbh {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow: visible;
  margin-bottom: 1.1rem;
  padding: 1.1rem 1rem;
  background: linear-gradient(135deg, #eef1ff 0%, #eaf1ff 55%, #eef9f6 100%);
  border-radius: 22px;
}

.mp-jbh-art-wrap {
  position: relative;
  flex-shrink: 0;
}

.mp-jbh-talent-badge {
  position: absolute;
  top: -0.6rem;
  right: -0.9rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px -6px rgba(16, 24, 40, 0.35);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: #10152b;
  white-space: nowrap;
}

.mp-jbh-talent-badge-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  background: #22c55e;
  border-radius: 50%;
}

.mp-jbh-text {
  flex: 1;
  min-width: 0;
}

.mp-jbh-text h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #10152b;
}

.mp-jbh-text h2 b {
  background: linear-gradient(90deg, #4f7cff, #7c4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-jbh-text p {
  margin: 0.15rem 0 0.8rem;
  font-size: 0.9rem;
  color: #3d4566;
}

.mp-jbh-badges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-jbh-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2b3560;
}

.mp-jbh-badge svg {
  flex-shrink: 0;
  color: #4f7cff;
}

.mp-jbh-art {
  flex-shrink: 0;
  width: 40%;
  max-width: 8.5rem;
  height: auto;
}

.mp-jbs-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mp-jbs-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: #98a2b3;
}

.mp-jbs-search input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
}

.mp-jbs-citybtn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475467;
  max-width: 7.5rem;
}

.mp-jbs-citybtn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mp-jbs-citybtn.active {
  border-color: #4f7cff;
  color: #2563eb;
  background: #eef4ff;
}

.mp-jb-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.6rem;
}

.mp-jb-list-head .mp-gv-sub {
  margin: 0;
}

.mp-jbs-seeall {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
}

/* ---- Tarjeta de vacante ---- */
.mp-jb-card {
  position: relative;
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 18px;
}

.mp-jb-card-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.mp-jb-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-jb-card-body {
  flex: 1;
  min-width: 0;
}

.mp-jb-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.mp-jb-card-title strong {
  font-size: 0.98rem;
  line-height: 1.25;
}

.mp-jb-card-save {
  flex-shrink: 0;
  padding: 0.1rem;
  background: none;
  border: none;
  color: #98a2b3;
}

.mp-jb-card-save.saved {
  color: #2563eb;
}

.mp-jb-card-company {
  margin: 0.1rem 0 0.3rem;
  font-size: 0.82rem;
  color: #667085;
}

.mp-jb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.76rem;
  color: #667085;
}

.mp-jb-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mp-jb-card-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mp-jb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.mp-jb-chip.salary { background: #dcf5ec; color: #0f7a4d; }
.mp-jb-chip.category { background: #eef1ff; color: #4638c2; }

.mp-jb-card-postbtn {
  flex-shrink: 0;
  align-self: center;
  padding: 0.5rem 1.1rem;
  background: linear-gradient(90deg, #2f5bff, #4f7cff);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

/* ============================================================
   Empleos: hoja de vida e independientes -- tarjetas por sección,
   avatar con cámara, chips de habilidades, colapsables y modal
   de detalle de un independiente (pedido con imágenes de referencia).
   ============================================================ */
.mp-jbc-card {
  margin-bottom: 0.9rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 18px;
}

.mp-jbc-card > h3 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
}

.mp-jbc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.mp-jbc-card-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.mp-jbc-progress {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  min-width: 6.5rem;
}

.mp-jbc-progress span {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.mp-jbc-progress .mp-jb-score-bar {
  width: 100%;
  height: 6px;
}

.mp-jbc-progress strong {
  font-size: 0.72rem;
  font-weight: 800;
  color: #2563eb;
}

.mp-jbc-personal-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.mp-jbc-avatar {
  position: relative;
  flex-shrink: 0;
  width: 4.2rem;
  height: 4.2rem;
}

.mp-jbc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--panel-2);
}

.mp-jbc-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1.5px dashed #c7cfdd;
}

.mp-jbc-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: #98a2b3;
}

.mp-jbc-avatar-placeholder small {
  font-size: 0.55rem;
}

.mp-jbc-avatar-cam {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
}

.mp-jbc-personal-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mp-jbc-row2 {
  display: grid;
  /* minmax(0, 1fr), no "1fr" a secas: sin el mínimo en 0, una columna con contenido largo
     (un correo, una ciudad larga, la opción más larga del <select>) empuja la fila -- y toda
     la pantalla -- más ancha que el celular, dejando toda la vista desplazable de lado
     (bug real, reportado con foto: "Independiente" cortado a la izquierda). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.7rem;
}

.mp-jbc-row2 > * {
  min-width: 0;
}

/* Departamento + Ciudad en cascada (mismos datos de Colombia que Vynko Citas): dos <select>
   uno junto al otro, la Ciudad deshabilitada hasta elegir el Departamento. */
.mp-jb-deptcity {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.mp-jb-deptcity select {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: 0.65rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
}

.mp-jb-deptcity select:disabled {
  opacity: 0.55;
}

.mp-ys-icon-input {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0 0.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #98a2b3;
}

.mp-ys-icon-input input,
.mp-ys-icon-input select {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
}

.mp-ys-icon-input input[readonly] {
  color: var(--text-dim);
}

#jbCvName,
#jbIndName {
  padding: 0.65rem 0.9rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-dim);
}

.mp-jbc-counter {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.72rem;
  text-align: right;
  color: var(--text-dim);
}

/* ---- Secciones colapsables (Experiencia, Formación, Habilidades, Cursos) ---- */
.mp-jbc-collapse {
  padding: 0;
  overflow: hidden;
}

.mp-jbc-collapse-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 1rem;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
}

.mp-jbc-collapse-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
}

.mp-jbc-collapse-text {
  flex: 1;
  min-width: 0;
}

.mp-jbc-collapse-text strong {
  display: block;
  font-size: 0.9rem;
}

.mp-jbc-collapse-text small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-jbc-collapse-add {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  background: #eef4ff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  white-space: nowrap;
}

.mp-jbc-collapse-body {
  padding: 0 1rem 1rem;
}

.mp-jbc-collapse-body.hidden {
  display: none;
}

/* ---- Chips de habilidades ---- */
.mp-jbc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

.mp-jbc-chips:empty {
  margin-bottom: 0;
}

.mp-jbc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  background: #eef1ff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4638c2;
}

.mp-jbc-chip button {
  display: flex;
  padding: 0;
  background: none;
  border: none;
  color: #4638c2;
  opacity: 0.7;
}

.mp-jbc-addrow {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  gap: 0.5rem;
}

.mp-jbc-addrow .mp-ys-input {
  width: 100%;
  min-width: 0;
}

/* ---- Aviso de privacidad y botón final ---- */
.mp-jbc-privacy {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.9rem 0;
  padding: 0.8rem 0.9rem;
  background: #eef4ff;
  border-radius: 14px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #2b3560;
}

.mp-jbc-privacy p {
  margin: 0;
}

.mp-jbc-save {
  width: 100%;
  padding: 0.95rem;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

/* ---- Buscar independientes ---- */
.mp-jbs-searchbtn {
  margin-bottom: 0.9rem;
}

.mp-jbs-info {
  margin-top: 0;
}

.mp-jbi-cta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.9rem;
  background: #eef4ff;
  border-radius: 16px;
}

.mp-jbi-cta-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
}

.mp-jbi-cta-text {
  flex: 1;
  min-width: 0;
}

.mp-jbi-cta-text strong {
  display: block;
  font-size: 0.85rem;
}

.mp-jbi-cta-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mp-jbi-cta-btn {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid #2563eb;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563eb;
}

/* ---- Disponibilidad (radios) ---- */
.mp-jbi-radios {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mp-jbi-radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
}

/* ---- Tarjeta de un profesional independiente (resultado de búsqueda) ---- */
.mp-jbi-card {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem;
  background: #fff;
  border: 1px solid #e4e9f7;
  border-radius: 18px;
}

.mp-jbi-card-avatar {
  position: relative;
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
}

.mp-jbi-card-avatar img,
.mp-jbi-card-avatar .mp-avatar-round {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mp-jbi-card-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.7rem;
  height: 0.7rem;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}

.mp-jbi-card-body {
  flex: 1;
  min-width: 0;
}

.mp-jbi-card-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mp-jbi-card-name strong {
  font-size: 0.95rem;
}

.mp-jbi-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #f0a500;
}

.mp-jbi-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.15rem 0 0.35rem;
  font-size: 0.78rem;
  color: #667085;
}

.mp-jbi-card-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mp-jbi-card-desc {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #475467;
}

.mp-jbi-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.mp-jbi-card-skill {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.mp-jbi-card-skill:nth-child(4n+1) { background: #eef1ff; color: #4638c2; }
.mp-jbi-card-skill:nth-child(4n+2) { background: #dcf5ec; color: #0f7a4d; }
.mp-jbi-card-skill:nth-child(4n+3) { background: #fdecef; color: #b42353; }
.mp-jbi-card-skill:nth-child(4n) { background: #fff1cc; color: #8a5a0b; }

.mp-jbi-card-viewbtn {
  padding: 0.45rem 1rem;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.mp-jbi-preview-note {
  margin-bottom: 0.6rem;
}

/* ---- Modal: detalle de un independiente ---- */
.mp-jbd-box {
  position: relative;
  max-width: 420px;
  padding: 1.3rem 1.1rem 1.1rem;
}

.mp-jbd-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: var(--panel-2);
  border: none;
  border-radius: 50%;
  color: var(--text-dim);
}

.mp-jbd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.mp-jbd-head img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.4rem;
}

.mp-jbd-head strong {
  font-size: 1.05rem;
}

.mp-jbd-head .mp-jbi-card-rating {
  font-size: 0.85rem;
}

.mp-jbd-section {
  margin-bottom: 0.9rem;
}

.mp-jbd-section h4 {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.mp-jbd-stars {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.4rem 0;
}

.mp-jbd-star {
  padding: 0;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: #d0d5dd;
}

.mp-jbd-star.filled {
  color: #f0a500;
}

.mp-jbd-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}