* {
  box-sizing: border-box;
  /* Sin esto, WebKit/Chrome en celular pinta un resaltado (gris o azul
     según el motor) sobre cualquier elemento tocable apenas se lo toca —
     es lo que se veía como "queda azul" en el botón de Más y al deslizar
     entre historias/videos. rgba(0,0,0,0) en vez de la palabra
     "transparent": en algunos WebView de Android la palabra sola no
     alcanza para apagarlo del todo. */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Las zonas invisibles para tocar y pasar de historia (mp-story-viewer-zone,
   35% del ancho cada una) son las más propensas a mostrar este resaltado
   porque son grandes y no tienen contenido propio adentro que lo tape — se
   refuerza acá con el mismo valor por las dudas. */
.mp-story-viewer-zone {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* El anillo de foco azul por defecto del navegador se queda pegado en
   botones/enlaces después de tocarlos en celular (no hay mouse que les
   saque el foco). */
button, a, [role="button"] {
  outline: none;
}

/* Ningún botón de la app tenía appearance:none — Safari en iPhone le
   puede seguir metiendo su propio estilo de "botón del sistema" (con un
   tinte azulado) a botones grandes que no tienen nada visual propio
   adentro, como las zonas invisibles para tocar y pasar de historia. Acá
   sí es seguro sacarlo de todos los botones (todos ya tienen su fondo y
   borde propios armados a mano) — no se toca inputs/selects, que sí
   pueden necesitar su apariencia nativa. */
button {
  appearance: none;
  -webkit-appearance: none;
}

/* Pedido explícito ("al tocar se pone grande como un cuadro, y está así en
   toda la app"): existía un aro de foco para quien navega con teclado
   (:focus-visible), pensado para no perder accesibilidad -- pero en
   botones donde el ícono visible es más chico que el área táctil completa
   (ícono + texto, como .mp-vc-pip-flip) ese aro sigue el rectángulo del
   botón entero, no la forma del ícono, y se ve como un cuadro grande. Se
   saca del todo: es una app pensada para tocar con el dedo, no para
   navegar con Tab. */

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #14161a;
  color: #f0f0f0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #2a2d33;
}

header h1 {
  font-size: 1.25rem;
  margin: 0;
}

button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  background: #4f7cff;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

/* Bug real, confirmado con capturas + prueba automatizada (CDP,
   simulando el toque cuadro a cuadro): "cualquier botón se pone grande y
   azul un instante al tocarlo". La guarda @media (hover: hover) debía
   evitar esto en celular (sin mouse no debería activarse :hover), pero
   button:hover tiene MÁS especificidad que una clase sola (elemento +
   pseudo-clase le gana a .mp-conv-filter-pill, .mp-btn-outline, etc.) --
   apenas el navegador considera que HAY hover disponible (pasa en más
   celulares/WebViews de los que este comentario asumía originalmente),
   ese azul genérico le ganaba al color propio de CUALQUIER botón de la
   app durante el toque, así fuera solo un instante. Se saca del todo en
   vez de intentar parchear la condición: ya casi ningún botón real
   depende de este azul de respaldo (cada uno tiene su propio color hace
   rato), así que no hay nada que este cambio deba seguir sosteniendo. */

/* Al tocar un botón, Chrome/WebView de Android dibuja por su cuenta un
   recuadro translúcido sobre el elemento (el "tap highlight"), que puede
   quedarse visible un rato y se ve como un efecto raro sobre pastillas,
   íconos y botones redondos. La app ya da su propio feedback (:active,
   colores), así que se apaga el del sistema en todo. touch-action:
   manipulation quita además la espera del doble toque para hacer zoom. */
* {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
input[type="button"],
input[type="submit"] {
  touch-action: manipulation;
}

button:disabled {
  background: #3a3d44;
  cursor: not-allowed;
}

#status {
  font-size: 0.9rem;
  color: #9aa0aa;
}

.video-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
}

.video-wrapper {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-audio-call-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
}

.mp-audio-call-screen.hidden {
  display: none;
}

.mp-audio-call-avatar {
  width: 110px;
  height: 110px;
  display: block;
}

.mp-audio-call-avatar img,
.mp-audio-call-avatar span {
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
}

#videochatView.audio-mode .video-grid,
#videochatView.audio-mode .video-mode-only {
  display: none;
}

.label {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid #2a2d33;
}

#stopBtn {
  background: #e5484d;
}

#stopBtn:hover {
  background: #c93b40;
}

#reportBtn,
#blockBtn {
  background: #a05a2c;
}

#reportBtn:hover,
#blockBtn:hover {
  background: #86491f;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Por encima de todo lo demás con position:fixed (barra inferior móvil,
     FAB, botón/backdrop del menú lateral en celular: 1998-2001), para que
     un modal abierto siempre tape la interfaz completa. */
  z-index: 2100;
  padding: 1rem;
  transition: padding-bottom 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
}

.modal-box {
  background: #1e2126;
  border: 1px solid #3a3d44;
  border-radius: 10px;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
}

.modal-box-wide {
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-box h2 {
  margin-top: 0;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.checkbox-row input {
  margin-top: 0.2rem;
}

.terms-text {
  font-size: 0.9rem;
  line-height: 1.5;
}

a {
  color: #6d9bff;
}

.hidden {
  display: none !important;
}

/* --- Bienvenida (YU) --- */
.welcome-section {
  --yu-purple: #b04ce8;
  --yu-blue: #4fa8f0;
  --yu-gradient: linear-gradient(135deg, var(--yu-purple) 0%, var(--yu-blue) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 3.5rem 1.5rem 2rem;
  text-align: center;
  background-image: url("img/fondo-yu.jpg");
  background-size: cover;
  background-position: center;
  color: #f0f0f0;
}

.welcome-lang {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
}

.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 480px;
}

.welcome-logo {
  width: min(70vw, 260px);
  mix-blend-mode: screen;
  margin-bottom: 0.25rem;
}

.welcome-heading {
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0;
}

.welcome-accent {
  background: var(--yu-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.welcome-sub {
  margin: 0;
  color: #c7c9d4;
  font-size: 0.95rem;
}

.welcome-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.welcome-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 130px;
}

.welcome-feature .note {
  font-size: 0.78rem;
  line-height: 1.3;
}

.welcome-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.welcome-feature-icon-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.welcome-feature-icon-blue { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.welcome-feature-icon-pink { background: linear-gradient(135deg, #f472b6, #db2777); }

.welcome-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  max-width: 380px;
}

.welcome-btn-gradient,
.welcome-btn-outline {
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.welcome-btn-gradient {
  background: var(--yu-gradient);
  border: none;
  color: #fff;
}

.welcome-btn-gradient:hover {
  filter: brightness(1.1);
  background: var(--yu-gradient);
}

.welcome-btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #f0f0f0;
}

.welcome-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

.welcome-terms {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: #9aa0aa;
}

/* Descarga real del APK de Android (fuera de Play Store) — colores
   literales, no las variables --yu-purple/--gold (mi-perfil.css redefine
   --yu-purple con otro tono; usar valores fijos evita que el orden de
   carga de los dos hojas de estilo cambie el color de esta tarjeta). */
.welcome-apk-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 380px;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  text-decoration: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 177, 61, 0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.28), transparent 55%),
    linear-gradient(160deg, #1c1530 0%, #0f0b1a 100%);
  border: 1px solid rgba(232, 177, 61, 0.32);
  box-shadow: 0 10px 28px -12px rgba(139, 92, 246, 0.4);
}

.welcome-apk-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #3ddc84;
  background: rgba(61, 220, 132, 0.14);
  border: 1px solid rgba(61, 220, 132, 0.4);
  box-shadow: 0 0 14px rgba(61, 220, 132, 0.35);
}

.welcome-apk-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.welcome-apk-text strong {
  display: block;
  font-size: 0.98rem;
  background: linear-gradient(135deg, #fff2cf 0%, #e8b13d 60%, #c98a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.welcome-apk-text span {
  display: block;
  font-size: 0.78rem;
  color: #b9b3c9;
  margin-top: 0.15rem;
}

.welcome-apk-cta {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #e8b13d;
}

/* Aviso de "anotá tu código" cuando se llega por un link de invitación
   (?ref=CODIGO) y la persona puede optar por instalar el APK en vez de
   registrarse en el navegador -- el código no viaja solo hacia adentro de
   la app recién instalada (ver checkReferralCodeInUrl en public/client.js). */
.welcome-apk-referral-note {
  width: 100%;
  max-width: 380px;
  margin: 0.6rem auto 0;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  background: rgba(232, 177, 61, 0.12);
  border: 1px solid rgba(232, 177, 61, 0.35);
  color: #e8b13d;
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}


.auth-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8fafc;
  color: #1e293b;
}

.auth-hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: calc(2.6rem + env(safe-area-inset-top)) 1.5rem 3.2rem;
  text-align: center;
  /* Degradado propio de la marca (sin foto): la que había acá antes
     (img/fondo-yu.jpg) es un fondo de planetas/espacio que no tiene nada
     que ver con "personas reales" -- quedaba mal, se sacó. */
  background: linear-gradient(165deg, #0b1226 0%, #0c4a6e 55%, #0d9488 100%);
  color: #fff;
}

.auth-lang {
  position: absolute;
  top: calc(1.1rem + env(safe-area-inset-top));
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
}

.auth-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 10px 28px -8px rgba(14, 165, 233, 0.55);
  margin-bottom: 0.4rem;
}

.auth-hero-icon img {
  width: 46px;
  height: auto;
  display: block;
}

.auth-hero-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.auth-hero-tagline {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.75);
}

.auth-hero-sub {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  margin: -1.8rem 1.1rem 0;
  padding: 1.5rem 1.35rem 1.6rem;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 20px 45px -18px rgba(15, 23, 42, 0.28);
  position: relative;
  z-index: 1;
}

.auth-tabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.28rem;
  margin-bottom: 1.1rem;
  background: #eef2f6;
  border-radius: 999px;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tab-btn.tab-active {
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(14, 165, 233, 0.6);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-form input {
  border: none;
  background: transparent;
  color: #1e293b;
  font-size: 0.92rem;
  width: 100%;
  padding: 0.78rem 0;
  outline: none;
}

.auth-form input::placeholder { color: #94a3b8; }

.auth-input-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.95rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 15px;
  transition: border-color 0.2s ease;
}

.auth-input-group:focus-within {
  border-color: #0ea5e9;
}

.auth-input-icon {
  flex-shrink: 0;
  color: #94a3b8;
}

.auth-input-group .mp-password-field {
  flex: 1;
  min-width: 0;
}

.auth-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #64748b;
}

.auth-field-label input {
  padding: 0.7rem 0.9rem;
  border-radius: 15px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #1e293b;
  font-size: 0.9rem;
}

#authSection .mp-forgot-link {
  color: #0ea5e9;
  font-size: 0.8rem;
}

#authSection .mp-forgot-link:hover {
  color: #0284c7;
}

.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-top: 0.15rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  color: #fff;
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(14, 165, 233, 0.55);
}

.auth-submit-btn:hover { filter: brightness(1.06); }

.auth-privacy-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.4rem 0 0;
  color: #64748b;
  font-size: 0.8rem;
}

.auth-terms-note {
  max-width: 380px;
  margin: 0.9rem 1.5rem 0;
  text-align: center;
  font-size: 0.72rem;
  color: #94a3b8;
}

.auth-terms-note a { color: #0ea5e9; }

.auth-wave-footer {
  position: relative;
  width: 100%;
  margin-top: 1.6rem;
  padding: 2.6rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  color: #fff;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
}

.auth-wave-footer p { margin: 0; position: relative; z-index: 1; }

.auth-wave-svg {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 32px;
  fill: #0ea5e9;
}

.auth-heart { display: inline-block; }

.form-error {
  color: #ef4444;
  font-size: 0.85rem;
  min-height: 1.1em;
  margin: 0;
}

@media (min-width: 641px) {
  .auth-hero { border-radius: 0 0 32px 32px; }
}

.account-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  font-size: 0.9rem;
}

.mode-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 0;
}

#freeMode,
#paidMode {
  padding: 0 1.5rem;
}

.note {
  font-size: 0.85rem;
  color: #9aa0aa;
}

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plain-list li {
  background: #1e2126;
  border: 1px solid #3a3d44;
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.inline-form input {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #3a3d44;
  background: #1e2126;
  color: #f0f0f0;
}

/* ===== "Crear publicación" en celular (foto con canción) =====
   Con el botón Música la fila pasó a 6 botones y, en celulares angostos,
   sus textos ("Sentimiento", "Foto/Video") empujaban la ventana más ancha
   que la pantalla: todo se corría a los lados. Además, con una foto alta la
   ventana quedaba más alta que la pantalla y, al estar centrada, la parte de
   arriba quedaba cortada sin poder verla. Y el título y el nombre salían
   blancos sobre fondo blanco. Reglas con #createPostModal para ganarle a
   cualquier otra, sin importar el orden de las hojas de estilo. */
#createPostModal {
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
}
#createPostModal > .mp-create-post-modal {
  width: 100%;
  max-width: 500px;
  min-width: 0;
  box-sizing: border-box;
  margin: auto;
  max-height: none;
  overflow: visible;
}
#createPostModal .mp-create-post-modal > * { min-width: 0; max-width: 100%; }
#createPostModal .mp-create-post-modal-head h3,
#createPostModal .mp-create-post-modal-user strong { color: #0f172a; }
#createPostModal .mp-create-post-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
}
#createPostModal .mp-create-post-grid-btn {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  font-size: 0.6rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#createPostModal .mp-create-post-modal-preview img,
#createPostModal .mp-create-post-modal-preview video {
  max-height: min(320px, 42vh);
}
#createPostModal .mp-cpm-music { box-sizing: border-box; max-width: 100%; }
/* Celular: los 6 botones en 2 filas de 3, con su nombre completo. */
@media (max-width: 440px) {
  #createPostModal .mp-create-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.6rem;
  }
  #createPostModal .mp-create-post-grid-btn { font-size: 0.7rem; letter-spacing: 0; }
}

/* ===================================================================
   Perfil de otra persona (rediseño con imagen de referencia).
   Todo va con #publicProfileView para ganarle a las reglas viejas de
   mi-perfil.css / cards.css sin importar el orden de carga.
   =================================================================== */
#publicProfileView {
  --pp-ink: #0f172a;
  --pp-muted: #64748b;
  --pp-line: #e8ecf5;
  --pp-card: #ffffff;
  --pp-grad: linear-gradient(135deg, #1e9bff 0%, #5b3df5 100%);
  color: var(--pp-ink);
  padding: 0 0 1.5rem;
  max-width: 760px;
  margin: 0 auto;
  min-width: 0;
}
#publicProfileView.hidden { display: none; }
#publicProfileView .pp-hero { position: relative; }
#publicProfileView .pp-cover {
  /* Mismo formato que Mi perfil y que el marco de "Ajusta tu portada": así la
     portada se ve igual en todos lados, sin cortarse arriba ni abajo. */
  aspect-ratio: 2.45 / 1;
  height: auto;
  max-height: none;
  border-radius: 20px;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.45);
}
#publicProfileView .pp-topbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  z-index: 3;
  pointer-events: none;
}
#publicProfileView .pp-topbar > * { pointer-events: auto; }
#publicProfileView .pp-round-btn,
#publicProfileView #publicProfileMenuBtn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
#publicProfileView #publicProfileMenuBtn.hidden { display: none !important; }
#publicProfileView #publicProfileMenuBtn svg,
#publicProfileView #publicProfileMenuBtn svg circle { color: #fff !important; fill: #fff !important; stroke: none !important; }

/* Foto + nombre */
#publicProfileView .pp-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 0.7rem;
  padding: 0 0.4rem;
  margin-top: -58px;
  position: relative;
  z-index: 2;
}
#publicProfileView .pp-avatar-wrap { position: relative; }
#publicProfileView .pp-avatar {
  width: 124px;
  height: 124px;
  padding: 4px;
  border: none;
  background: conic-gradient(from 200deg, #22d3ee, #3b82f6, #8b5cf6, #22d3ee);
  box-shadow: 0 10px 26px -10px rgba(59, 130, 246, 0.6);
  display: block;
}
#publicProfileView .pp-avatar img,
#publicProfileView .pp-avatar .mp-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover;
  box-sizing: border-box;
}
#publicProfileView .pp-avatar .mp-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  background: var(--pp-grad);
}
#publicProfileView .pp-avatar .hidden { display: none; }
#publicProfileView .pp-online-dot {
  position: absolute;
  right: 10px;
  bottom: 10px;
  top: auto;
  left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #cbd5e1;
  display: none;
}
#publicProfileView .pp-online-dot.online { display: block; background: #22c55e; }
#publicProfileView .pp-identity-info { padding-top: 64px; min-width: 0; }
#publicProfileView .pp-name-row { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
#publicProfileView .pp-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pp-ink);
  overflow-wrap: anywhere;
}
#publicProfileView .pp-verified { flex: none; }
#publicProfileView .pp-verified.hidden { display: none; }
#publicProfileView .pp-location {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  color: var(--pp-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#publicProfileView .pp-location::before {
  content: "📍";
  font-size: 0.8rem;
  flex: none;
}
#publicProfileView .pp-location.hidden,
#publicProfileView .pp-online-pill.hidden { display: none; }
#publicProfileView .pp-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 700;
}
#publicProfileView .pp-online-pill i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
#publicProfileView .pp-likes-pill {
  margin-top: 66px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #e4dcff;
  background: linear-gradient(135deg, #f5f1ff, #ece6ff);
  color: #6d28d9;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 6px 18px -10px rgba(109, 40, 217, 0.55);
  white-space: nowrap;
  cursor: default;
}
#publicProfileView .pp-likes-pill strong { font-weight: 800; }
#publicProfileView .pp-likes-pill span { font-weight: 700; }

/* Botones Llamar / Videollamada / Mensaje */
#publicProfileView .pp-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
}
#publicProfileView .pp-actions .pp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 52px;
  height: auto;
  width: auto;
  padding: 0 0.6rem;
  border-radius: 16px;
  border: none;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  transition: transform 0.12s ease, filter 0.12s ease;
}
#publicProfileView .pp-btn span { overflow: hidden; text-overflow: ellipsis; }
#publicProfileView .pp-btn:active { transform: scale(0.97); }
#publicProfileView .pp-actions .pp-btn-primary { background: var(--pp-grad); color: #fff; box-shadow: 0 10px 22px -12px rgba(59, 70, 245, 0.8); }
#publicProfileView .pp-actions .pp-btn-blue { background: #dff0ff; color: #0b63c7; }
#publicProfileView .pp-actions .pp-btn-purple { background: #ede7ff; color: #5b21b6; }
#publicProfileView .pp-actions .pp-btn-muted { background: #eef1f6; color: var(--pp-muted); cursor: default; }
#publicProfileView .pp-actions-note { grid-column: 1 / -1; text-align: center; }
/* Quien no es contacto: Unirte + Solicitar PIN lado a lado y el aviso del PIN debajo (2026-10-31). */
#publicProfileView .pp-actions.pp-actions-pin { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#publicProfileView .pp-actions.pp-actions-pin .pp-pin-note { margin: 0.2rem 0 0; font-size: 0.82rem; }
#publicProfileView .pp-business-btn { display: block; width: 100%; margin-top: 0.6rem; }
#publicProfileView .pp-business-btn.hidden { display: none; }

/* Tarjetas */
#publicProfileView .pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: 18px;
  box-shadow: 0 8px 24px -20px rgba(15, 23, 42, 0.5);
}
#publicProfileView .pp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.9rem;
  padding: 0.85rem 0.2rem;
}
#publicProfileView .pp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  text-align: center;
}
#publicProfileView .pp-stat + .pp-stat { border-left: 1px solid var(--pp-line); }
#publicProfileView .pp-stat strong { font-size: 1.3rem; font-weight: 800; color: var(--pp-ink); line-height: 1.1; }
#publicProfileView .pp-stat > span:last-child {
  font-size: 0.78rem;
  color: var(--pp-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#publicProfileView .pp-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#publicProfileView .pp-i-purple { background: #efe9ff; color: #7c3aed; }
#publicProfileView .pp-i-blue { background: #e0f0ff; color: #2f7cf6; }
#publicProfileView .pp-i-pink { background: #ffe4ef; color: #e11d74; }
#publicProfileView .pp-i-green { background: #dcfce7; color: #16a34a; }

#publicProfileView .pp-about {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
#publicProfileView .pp-about.hidden { display: none; }
#publicProfileView .pp-about-icon { color: #334155; flex: none; display: flex; }
#publicProfileView .pp-about-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
#publicProfileView .pp-about-text strong { font-size: 1rem; font-weight: 800; color: var(--pp-ink); }
#publicProfileView .pp-about-bio {
  margin: 0;
  font-size: 0.92rem;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#publicProfileView .pp-about.pp-about-open .pp-about-bio { white-space: pre-wrap; overflow-wrap: anywhere; }
#publicProfileView .pp-about-chevron { flex: none; color: #334155; transition: transform 0.2s ease; }
#publicProfileView .pp-about.pp-about-open .pp-about-chevron { transform: rotate(90deg); }

/* Pestañas */
#publicProfileView .pp-content { margin-top: 0.9rem; }
#publicProfileView .pp-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0.35rem 0.2rem 0;
  margin: 0 0 0.7rem;
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: 18px;
  box-shadow: 0 8px 24px -20px rgba(15, 23, 42, 0.5);
  overflow: hidden;
}
#publicProfileView .pp-tabs.hidden { display: none; }
#publicProfileView .pp-tabs .pp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.1rem 0.65rem;
  background: none;
  border: none;
  border-radius: 0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 0;
  width: auto;
  height: auto;
  cursor: pointer;
}
#publicProfileView .pp-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#publicProfileView .pp-tab + .pp-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 30%;
  width: 1px;
  background: var(--pp-line);
}
#publicProfileView .pp-tabs .pp-tab.active { color: #4f46e5; font-weight: 800; background: none; }
#publicProfileView .pp-tab.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #4f46e5;
}
#publicProfileView .pp-tab-proxy { display: none !important; }

/* Cuadrícula */
#publicProfileView .pp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
#publicProfileView .pp-grid.hidden { display: none; }
#publicProfileView .pp-tile {
  aspect-ratio: 1 / 1.08;
  border-radius: 14px;
  border: none;
  overflow: hidden;
  position: relative;
  background: #e2e8f0;
}
#publicProfileView .pp-grid-vertical .pp-tile { aspect-ratio: 9 / 16; }
#publicProfileView .pp-tile .mp-post-likes { display: none; }
#publicProfileView .pp-tile .mp-post-play-icon { display: none; }
#publicProfileView .pp-tile-vertical .mp-post-play-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
#publicProfileView .pp-tile-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#publicProfileView .pp-empty { text-align: center; padding: 1.4rem 0.5rem; }
#publicProfileView .pp-empty.hidden { display: none; }
#publicProfileView .pp-loading { grid-column: 1 / -1; text-align: center; padding: 1.2rem 0; }

/* Álbum con candado dentro de "Fotos" */
#publicProfileView .pp-album {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border-radius: 14px;
  border: none;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(145deg, #1e1b4b, #6d28d9 55%, #db2777);
  color: #fff;
}
#publicProfileView .pp-album img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(0.7); transform: scale(1.1); }
#publicProfileView .pp-album-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.55)); }
#publicProfileView .pp-album-lock {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#publicProfileView .pp-album-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  padding: 0 4px;
}
#publicProfileView .pp-album-text strong { font-size: 0.8rem; font-weight: 800; }
#publicProfileView .pp-album-text small { font-size: 0.7rem; opacity: 0.9; }
#publicProfileView .pp-locked.hidden { display: none; }
#publicProfileView .pp-locked-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
#publicProfileView .pp-locked-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--pp-line);
  background: #fff;
  color: var(--pp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Celulares angostos */
@media (max-width: 400px) {
  #publicProfileView .pp-avatar { width: 104px; height: 104px; }
  #publicProfileView .pp-identity { margin-top: -50px; gap: 0 0.55rem; }
  #publicProfileView .pp-identity-info { padding-top: 54px; }
  #publicProfileView .pp-likes-pill { margin-top: 56px; padding: 0.45rem 0.65rem; font-size: 0.8rem; }
  #publicProfileView .pp-name { font-size: 1.15rem; }
  #publicProfileView .pp-actions .pp-btn { font-size: 0.82rem; gap: 0.3rem; min-height: 48px; padding: 0 0.4rem; }
  #publicProfileView .pp-btn svg { width: 18px; height: 18px; flex: none; }
  #publicProfileView .pp-tabs .pp-tab { font-size: 0.66rem; }
  #publicProfileView .pp-stat strong { font-size: 1.15rem; }
  #publicProfileView .pp-stat > span:last-child { font-size: 0.7rem; }
}
/* El "Me gusta" baja a su propia fila si el nombre no cabe al lado. */
@media (max-width: 360px) {
  #publicProfileView .pp-identity { grid-template-columns: auto minmax(0, 1fr); }
  #publicProfileView .pp-likes-pill { grid-column: 1 / -1; justify-self: start; margin-top: 0.6rem; }
}

/* Perfil: ajustes finos para que nada se corte en celular. */
#publicProfileView .pp-location {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#publicProfileView .pp-location::before { margin-right: 0.2rem; }
#publicProfileView .pp-actions.pp-actions-3 {
  grid-auto-flow: row;
  grid-template-columns: 0.85fr 1.3fr 1fr;
}
@media (max-width: 420px) {
  #publicProfileView .pp-avatar { width: 96px; height: 96px; padding: 3px; }
  #publicProfileView .pp-avatar img,
  #publicProfileView .pp-avatar .mp-avatar-initials { border-width: 3px; }
  #publicProfileView .pp-online-dot { right: 5px; bottom: 5px; width: 19px; height: 19px; }
  #publicProfileView .pp-identity { margin-top: -46px; gap: 0 0.5rem; padding: 0 0.2rem; }
  #publicProfileView .pp-identity-info { padding-top: 50px; }
  #publicProfileView .pp-name { font-size: 1.08rem; }
  #publicProfileView .pp-location { font-size: 0.8rem; }
  #publicProfileView .pp-likes-pill { margin-top: 52px; padding: 0.4rem 0.6rem; font-size: 0.76rem; gap: 0.25rem; }
  #publicProfileView .pp-likes-pill svg { width: 15px; height: 15px; }
  #publicProfileView .pp-actions { gap: 0.4rem; }
  #publicProfileView .pp-actions .pp-btn { font-size: 0.8rem; gap: 0.3rem; padding: 0 0.3rem; min-height: 48px; }
  #publicProfileView .pp-btn svg { width: 17px; height: 17px; flex: none; }
  #publicProfileView .pp-tabs .pp-tab { font-size: 0.64rem; letter-spacing: -0.01em; }
  #publicProfileView .pp-tabs .pp-tab.active { font-weight: 700; }
  #publicProfileView .pp-tabs .pp-tab svg { width: 20px; height: 20px; }
}
@media (max-width: 370px) {
  #publicProfileView .pp-identity { grid-template-columns: auto minmax(0, 1fr); }
  #publicProfileView .pp-likes-pill { grid-column: 1 / -1; justify-self: start; margin-top: 0.55rem; }
  #publicProfileView .pp-tabs .pp-tab { font-size: 0.6rem; letter-spacing: -0.02em; }
}

/* ===== Barra de escribir del chat: una sola zona compacta pegada abajo =====
   Pedido con captura: había ~45 px vacíos entre el campo "Mensaje" y el
   teclado (el aviso #chatMediaMessage vacío igual ocupaba su margen, más
   el relleno de abajo del panel) y los botones se veían como bloques
   sueltos. No se toca el cambio cámara/mic -> enviar al escribir (eso lo
   maneja updateChatSendMicVisibility con la clase "hidden"). El chat de
   pareja (.dx-vynko-chat) ya tiene su propia cápsula y no se toca. */
#chatMediaMessage:empty { display: none; }
#messagesView #chatPanel:not(.dx-vynko-chat) #chatForm.mp-chat-input-bar {
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  margin-top: 0.35rem;
  border-radius: 28px;
  background: rgba(127, 127, 127, 0.14);
  border: 1px solid rgba(127, 127, 127, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#messagesView #chatPanel:not(.dx-vynko-chat) #chatForm .mp-chat-input-emoji-wrap,
#messagesView #chatPanel:not(.dx-vynko-chat) #chatForm .mp-chat-input-icon {
  width: 36px;
  height: 36px;
}
#messagesView #chatPanel:not(.dx-vynko-chat) #chatForm textarea#chatInput {
  min-height: 40px;
  padding: 0.5rem 0.85rem;
  border-radius: 20px;
}
/* Enviar: círculo azul con el avión blanco bien visible. */
#messagesView #chatPanel:not(.dx-vynko-chat) #chatForm #chatSendBtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1e9bff, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45) !important;
  align-items: center;
  justify-content: center;
}
#messagesView #chatPanel #chatForm #chatSendBtn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #fff;
  margin-left: -2px;
}
#messagesView #chatPanel #chatForm #chatSendBtn.hidden { display: none !important; }
/* Celular: el panel del chat no deja relleno extra debajo de la barra
   (solo lo del borde seguro del teléfono). */
@media (max-width: 768px) {
  #messagesView #chatPanel { padding-bottom: max(0.4rem, env(safe-area-inset-bottom)); }
}

/* Mantener presionado un mensaje abre SOLO el menú de VYNKO (Responder,
   Reenviar, Copiar...): sin esto Android además activaba su selección de
   texto y marcaba "Responder" con las gotitas verdes. Para copiar el texto
   está la opción "Copiar" del menú. */
#chatMessages li,
#chatMessages li *,
#msgActionSheet,
#msgActionSheet * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ♡ Me gusta del perfil: se puede tocar para dar/quitar me gusta. */
#publicProfileView .pp-likes-pill { cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
#publicProfileView .pp-likes-pill:active { transform: scale(0.95); }
#publicProfileView .pp-likes-pill:disabled { cursor: default; opacity: 0.6; }
#publicProfileView .pp-likes-pill.pp-liked { background: linear-gradient(135deg, #ff4d8d, #e11d74); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px rgba(225, 29, 116, 0.8); }
#publicProfileView .pp-likes-pill.pp-liked svg { fill: currentColor; }
#publicProfileView .pp-likes-pill.pp-like-pop svg { animation: pp-like-pop 0.45s ease; }
@keyframes pp-like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ===== Visor de foto de perfil/portada: reacciones y comentarios ===== */
.mp-photo-viewer.pv-has-social .mp-photo-viewer-caption { display: none; }
.mp-photo-viewer.pv-has-social { justify-content: flex-start; }
.mp-photo-viewer.pv-has-social img#photoViewerImg { max-height: calc(100vh - 17rem); max-height: calc(100dvh - 17rem); margin-top: 0.5rem; }
.pv-social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.6rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10, 12, 24, 0) 0%, rgba(10, 12, 24, 0.88) 18%, rgba(10, 12, 24, 0.96) 100%);
  color: #fff;
  max-width: 640px;
  margin: 0 auto;
}
.pv-social.hidden { display: none; }
.pv-social-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.2rem 0.2rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.pv-link { background: none; border: none; color: rgba(255, 255, 255, 0.85); font: inherit; cursor: pointer; padding: 0; }
.pv-social-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.45rem 0 0.3rem;
}
.pv-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.pv-act span { font-size: 1.05rem; }
.pv-act.active[data-pv-react="👍"] { background: rgba(47, 124, 246, 0.35); border-color: #2f7cf6; }
.pv-act.active[data-pv-react="❤️"] { background: rgba(225, 29, 116, 0.35); border-color: #ff4d8d; }
.pv-more-reactions { display: flex; justify-content: center; gap: 0.6rem; padding: 0.15rem 0 0.2rem; }
.pv-more-reactions button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.pv-more-reactions button.active { background: rgba(255, 255, 255, 0.28); transform: scale(1.12); border-color: #fff; }
.pv-comments { padding-top: 0.4rem; }
.pv-comments.hidden { display: none; }
.pv-comment-list { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.pv-comment { display: flex; align-items: flex-start; gap: 0.5rem; }
.pv-comment-body { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 0.4rem 0.65rem; display: flex; flex-direction: column; gap: 0.1rem; }
.pv-comment-body strong { font-size: 0.82rem; }
.pv-comment-body span { font-size: 0.9rem; overflow-wrap: anywhere; }
.pv-comment-body small { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
.pv-comment-del { background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-size: 0.85rem; padding: 0.3rem; }
.pv-comment-empty { text-align: center; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); padding: 0.4rem 0; }
.pv-comment-form { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.pv-comment-form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  padding: 0 0.9rem;
  font-size: 16px;
}
.pv-comment-form button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1e9bff, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

/* ===== Pantalla de llamada con una amiga (rediseño con imagen de referencia) =====
   Fondo oscuro con dibujitos, nombre arriba y "Llamando..." debajo, foto
   grande en el centro, y abajo un solo panel con Video / Altavoz / Silenciar
   / Más / Compartir / Finalizar (azul). Todo con #videochatView.friend-call-mode
   para no tocar el video chat aleatorio. */
#videochatView.friend-call-mode.audio-mode {
  background-color: #0b0b0d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 40c0-8 6-14 14-14h20c8 0 14 6 14 14v10c0 8-6 14-14 14H48l-10 8v-8c-5-2-8-7-8-14z'/%3E%3Cpath d='M150 30c4-6 14-6 16 2 2-8 12-8 16-2 4 8-8 18-16 24-8-6-20-16-16-24z'/%3E%3Ccircle cx='60' cy='150' r='18'/%3E%3Cpath d='M52 146h.01M68 146h.01M52 158c4 4 12 4 16 0'/%3E%3Cpath d='M150 130l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3Cpath d='M110 90c6-2 12 2 12 8v14l8 4-8 4v6'/%3E%3Crect x='170' y='170' width='26' height='34' rx='6'/%3E%3Cpath d='M20 200l14-14 10 10 16-16'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Arriba: minimizar a la izquierda, nombre + estado al centro, agregar
   persona y chat a la derecha (uno debajo del otro). */
#videochatView.friend-call-mode .mp-vc-topbar {
  position: relative;
  align-items: flex-start;
  padding: calc(1rem + env(safe-area-inset-top)) 1.1rem 0.4rem;
  z-index: 3;
}
#videochatView.friend-call-mode .mp-vc-icon-btn {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#videochatView.friend-call-mode .mp-vc-topbar-actions {
  flex-direction: column;
  gap: 0.7rem;
}
#videochatView.friend-call-mode .mp-vc-topbar-mid {
  flex: 1;
  padding-top: 0.2rem;
}
#videochatView.friend-call-mode .mp-vc-topbar-mid h3#videochatTitle {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* "Llamando..." / "Conectando..." debajo del nombre; al conectar, el tiempo. */
#videochatView.friend-call-mode #status {
  position: absolute;
  top: calc(3.35rem + env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  z-index: 3;
  pointer-events: none;
}
#videochatView.friend-call-mode .mp-vc-timer { display: none; }
#videochatView.friend-call-mode.vc-timer-on .mp-vc-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}
#videochatView.friend-call-mode.vc-timer-on #status { display: none; }

/* Centro: la foto grande y redonda (el nombre ya está arriba). */
#videochatView.friend-call-mode #audioCallScreen {
  flex: 1;
  padding: 1rem;
  justify-content: center;
}
#videochatView.friend-call-mode #audioCallScreen strong,
#videochatView.friend-call-mode #audioCallScreen .note { display: none; }
#videochatView.friend-call-mode .mp-audio-call-avatar {
  width: min(74vw, 300px);
  height: min(74vw, 300px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
#videochatView.friend-call-mode .mp-audio-call-avatar img,
#videochatView.friend-call-mode .mp-audio-call-avatar span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  font-size: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Abajo: un solo panel redondeado con los 6 botones (3 x 2). */
#videochatView.friend-call-mode .mp-vc-controls-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem 0.4rem;
  justify-items: center;
  width: calc(100% - 1.8rem);
  max-width: 420px;
  margin: 0 auto calc(1.1rem + env(safe-area-inset-bottom));
  padding: 1.5rem 1rem 1.3rem;
  background: rgba(44, 44, 48, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
#videochatView.friend-call-mode .mp-vc-ctrl-btn {
  width: auto;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: #fff;
  background: none !important;
}
#videochatView.friend-call-mode .mp-vc-ctrl-btn svg {
  width: 72px;
  height: 72px;
  padding: 23px;
  background: #151517;
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
#videochatView.friend-call-mode .mp-vc-ctrl-btn:active svg { transform: scale(0.94); }
#videochatView.friend-call-mode .mp-vc-ctrl-btn.mp-vc-active svg {
  background: #fff;
  color: #111;
}
/* Finalizar: círculo azul con brillo. */
#videochatView.friend-call-mode #stopBtn {
  background: none !important;
}
#videochatView.friend-call-mode #stopBtn svg {
  width: 84px;
  height: 84px;
  padding: 26px;
  margin-top: -6px;
  background: linear-gradient(135deg, #22b8ff 0%, #1d6bff 100%);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(34, 150, 255, 0.18), 0 10px 30px rgba(29, 107, 255, 0.55);
}
#videochatView.friend-call-mode #stopBtn span { margin-top: -4px; }

@media (max-width: 380px) {
  #videochatView.friend-call-mode .mp-vc-ctrl-btn svg { width: 62px; height: 62px; padding: 19px; }
  #videochatView.friend-call-mode #stopBtn svg { width: 74px; height: 74px; padding: 23px; }
  #videochatView.friend-call-mode .mp-vc-ctrl-btn { font-size: 0.82rem; }
}

/* Barrita de "llamada en curso" (llamada minimizada): arriba, tocar para volver. */
.mp-call-mini-pill {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
  cursor: pointer;
  white-space: nowrap;
}
.mp-call-mini-pill.hidden { display: none; }
.mp-call-mini-pill strong { overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.mp-call-mini-pill em { font-style: normal; opacity: 0.85; font-size: 0.78rem; }
.mp-call-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: mpCallMiniPulse 1.2s ease-in-out infinite; }
@keyframes mpCallMiniPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
#videochatView.friend-call-mode #stopBtn { grid-column: 3; grid-row: 2; }
/* Videollamada: el nombre y el estado se leen sobre el video. */
#videochatView.friend-call-mode:not(.audio-mode) .mp-vc-topbar-mid h3, #videochatView.friend-call-mode:not(.audio-mode) #status { text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
#videochatView.friend-call-mode:not(.audio-mode) .mp-vc-controls-bar { background: rgba(20, 20, 24, 0.6); }
/* Videollamada: panel más compacto para dejar ver el video. */
#videochatView.friend-call-mode:not(.audio-mode) .mp-vc-controls-bar { gap: 0.8rem 0.3rem; padding: 1rem 0.8rem 0.9rem; }
#videochatView.friend-call-mode:not(.audio-mode) .mp-vc-ctrl-btn { font-size: 0.78rem; gap: 0.35rem; }
#videochatView.friend-call-mode:not(.audio-mode) .mp-vc-ctrl-btn svg { width: 56px; height: 56px; padding: 17px; }
#videochatView.friend-call-mode:not(.audio-mode) #stopBtn svg { width: 66px; height: 66px; padding: 21px; margin-top: -4px; }
/* Más grande y a lo ancho (se veía chico con espacio a los lados). */
#videochatView.friend-call-mode .mp-vc-controls-bar { width: calc(100% - 1rem); max-width: 560px; padding: 1.4rem 0.6rem 1.2rem; gap: 1.2rem 0.2rem; }
#videochatView.friend-call-mode .mp-vc-ctrl-btn { font-size: clamp(0.85rem, 3.9vw, 1.05rem); }
#videochatView.friend-call-mode .mp-vc-ctrl-btn svg { width: clamp(66px, 21vw, 92px); height: clamp(66px, 21vw, 92px); padding: clamp(20px, 6.4vw, 28px); }
#videochatView.friend-call-mode #stopBtn svg { width: clamp(76px, 24vw, 102px); height: clamp(76px, 24vw, 102px); padding: clamp(23px, 7.2vw, 31px); }
#videochatView.friend-call-mode:not(.audio-mode) .mp-vc-ctrl-btn svg { width: clamp(56px, 17vw, 76px); height: clamp(56px, 17vw, 76px); padding: clamp(17px, 5.2vw, 23px); }
#videochatView.friend-call-mode:not(.audio-mode) #stopBtn svg { width: clamp(64px, 19vw, 84px); height: clamp(64px, 19vw, 84px); padding: clamp(20px, 5.8vw, 26px); }
body #videochatView.friend-call-mode .mp-vc-controls-bar { width: calc(100% - 1rem); max-width: 560px; }

/* Fondo de la llamada: foto de la persona difuminada + degradado VYNKO (reemplaza los dibujitos, que se parecían a WhatsApp). */
#videochatView.friend-call-mode.audio-mode { background-image: none; background-color: #0a0a14; }
#videochatView.friend-call-mode.audio-mode::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: 0;
  background-image: linear-gradient(180deg, rgba(10, 10, 20, 0.55) 0%, rgba(10, 10, 20, 0.78) 55%, rgba(10, 10, 20, 0.95) 100%), var(--call-bg, linear-gradient(160deg, #3b1d8f 0%, #1b2a6b 45%, #0b7a8f 100%));
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.15);
  transform: scale(1.1);
  pointer-events: none;
}
#videochatView.friend-call-mode.audio-mode > * { position: relative; z-index: 1; }
#videochatView.friend-call-mode.audio-mode > .mp-vc-topbar, #videochatView.friend-call-mode.audio-mode > .mp-vc-controls-bar { z-index: 3; }
#videochatView.friend-call-mode.audio-mode #status { position: absolute; }

/* ===== Llamada grupal (hasta 4): recuadros de cada persona ===== */
#videochatView.vc-group #audioCallScreen,
#videochatView.vc-group .mp-vc-stage .mp-vc-remote-wrap { display: none !important; }
#videochatView.vc-group .mp-vc-stage { position: absolute; inset: 0; pointer-events: none; background: transparent; }
#videochatView.vc-group .mp-vc-stage .mp-vc-pip { pointer-events: auto; }
.mp-vc-group-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 8px;
  padding: 6px 10px 10px;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}
.mp-vc-group-grid.hidden { display: none; }
.mp-vc-group-grid[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.mp-vc-group-grid[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mp-vc-group-grid[data-count="3"] .mp-vc-group-tile:first-child { grid-column: 1 / -1; }
.mp-vc-group-tile {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.mp-vc-group-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.mp-vc-group-tile.has-video video { opacity: 1; }
.mp-vc-group-tile.has-video .mp-vc-group-avatar { display: none; }
.mp-vc-group-avatar {
  width: min(34vw, 130px);
  height: min(34vw, 130px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.mp-vc-group-avatar img,
.mp-vc-group-avatar span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: 2.6rem; display: flex; align-items: center; justify-content: center; }
.mp-vc-group-name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-vc-group-state { position: absolute; top: 10px; left: 10px; color: rgba(255, 255, 255, 0.75); font-size: 0.75rem; }
.mp-vc-group-state:empty { display: none; }
#videochatView.vc-group .mp-vc-controls-bar { margin-top: 0; }

/* ===== Agregar a la llamada: lista de amigos ===== */
.mp-group-invite-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mp-group-invite-overlay.hidden { display: none; }
.mp-group-invite-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: #1c1c1f;
  color: #fff;
  border-radius: 22px 22px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
}
.mp-group-invite-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mp-group-invite-head strong { font-size: 1.05rem; }
.mp-group-invite-close { background: rgba(255, 255, 255, 0.1); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.mp-group-invite-search {
  width: 100%;
  height: 42px;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 0 14px;
  font-size: 16px;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.mp-group-invite-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.mp-group-invite-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
}
.mp-group-invite-list button:active { background: rgba(255, 255, 255, 0.06); }
.mp-group-invite-list span { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-group-invite-list em { font-style: normal; color: #4ade80; font-size: 0.75rem; }
.mp-group-invite-list b { background: linear-gradient(135deg, #22b8ff, #1d6bff); padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; }
/* Grupo con video: mi cámara, chica, debajo de los botones de arriba (no encima). */
#videochatView.vc-group .mp-vc-stage .mp-vc-pip { top: calc(8.2rem + env(safe-area-inset-top)); right: 16px; z-index: 4; }
#videochatView.vc-group .mp-vc-pip-card { width: 78px; border-radius: 14px; }
#videochatView.vc-group .mp-vc-pip-flip { display: none; }
#videochatView.friend-call-mode #vcWaveBadge, #videochatView.vc-group #remoteLabel, #videochatView.friend-call-mode #vcFilterBadge { display: none !important; }

/* ===== "En video aleatorio ahora" (pantalla de entrada del video aleatorio) ===== */
.ra-live-now {
  margin: 12px 0 4px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #ece8ff;
  box-shadow: 0 8px 24px -18px rgba(76, 29, 149, 0.45);
}
.ra-live-now.hidden { display: none; }
.ra-live-now-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ra-live-now-head strong { font-size: 0.98rem; color: #1e1b4b; }
.ra-live-now-head small { margin-left: auto; font-size: 0.78rem; color: #6b7280; font-weight: 600; }
.ra-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); animation: raLivePulse 1.4s ease-in-out infinite; }
@keyframes raLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ra-live-empty { margin: 0; font-size: 0.86rem; color: #6b7280; }
.ra-live-now-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ra-live-now-list::-webkit-scrollbar { display: none; }
.ra-live-person {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.ra-live-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: block;
}
.ra-live-person.is-paired .ra-live-avatar { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.ra-live-avatar img,
.ra-live-avatar span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ra-live-name { max-width: 100%; font-size: 0.76rem; font-weight: 700; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-live-status { font-size: 0.64rem; font-weight: 700; color: #16a34a; white-space: nowrap; }
.ra-live-person.is-paired .ra-live-status { color: #db2777; }
.ra-live-now-head { flex-wrap: wrap; row-gap: 2px; }
.ra-live-now-head strong { white-space: nowrap; }
.ra-live-now-head small { margin-left: 0; flex-basis: 100%; padding-left: 17px; }

/* ===== Publicación "actualizó su foto de perfil": foto redonda sobre degradado ===== */
.mp-post-avatar-update {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%);
}
.mp-post-card .mp-post-avatar-update img.mp-post-media {
  width: min(62vw, 260px);
  height: min(62vw, 260px);
  max-height: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* ===== Verificación de edad y Términos de uso =====
   Bug real ("se ve transparente y no se lee"): .modal-box en mi-perfil.css
   tiene fondo blanco al 5 % (pensado para el tema oscuro viejo) y la letra
   quedó oscura -> texto oscuro sobre fondo oscuro. Tarjeta blanca sólida. */
#ageGateModal,
#termsModal {
  background: rgba(8, 10, 24, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 16px;
}
#ageGateModal .modal-box,
#termsModal .modal-box {
  background: #fff;
  color: #1e293b;
  border: none;
  border-radius: 22px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
  padding: 26px 22px 22px;
  width: min(100%, 420px);
  box-sizing: border-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#termsModal .modal-box { width: min(100%, 560px); max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
#ageGateModal .modal-box h2,
#termsModal .modal-box h2 { color: #0f172a; font-size: 1.35rem; font-weight: 800; margin: 0 0 10px; }
#ageGateModal .modal-box p,
#termsModal .modal-box p,
#termsModal .modal-box li { color: #334155; font-size: 0.95rem; line-height: 1.5; }
#ageGateModal .modal-box strong { color: #0f172a; }
#ageGateModal .checkbox-row {
  display: block;
  margin: 16px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #1e293b;
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}
#ageGateModal .checkbox-row input {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  vertical-align: -3px;
  accent-color: #7c3aed;
}
#ageGateModal .checkbox-row a { color: #6d28d9; font-weight: 700; text-decoration: underline; }
#ageGateModal #ageContinueBtn,
#termsModal .modal-box button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
#ageGateModal #ageContinueBtn:disabled {
  background: #e2e8f0;
  color: #64748b;
  cursor: not-allowed;
  transform: none;
}

/* ===== Comprar monedas ahí mismo para un regalo (public/coin-quick.js) ===== */
.qc-screen { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 10, 24, 0.55); }
.qc-screen.hidden { display: none; }
.qc-sheet { width: 100%; max-width: 520px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; box-sizing: border-box; background: #fff; color: #1e293b; border-radius: 24px 24px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); box-shadow: 0 -18px 50px -10px rgba(0, 0, 0, 0.45); animation: qcUp 0.22s ease-out; }
@keyframes qcUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.qc-grip { width: 42px; height: 5px; border-radius: 3px; background: #cbd5e1; margin: 4px auto 12px; }
.qc-head { display: flex; align-items: flex-start; gap: 10px; }
.qc-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qc-title { font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.qc-sub { font-size: 0.92rem; color: #b45309; font-weight: 700; }
.qc-x { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: #f1f5f9; color: #334155; font-size: 16px; cursor: pointer; }
.qc-balance { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff7e6; color: #92400e; font-weight: 600; }
.qc-balance b { font-size: 1.15rem; color: #78350f; }
.qc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.qc-pk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 18px; background: #fff; color: #0f172a; font-family: inherit; cursor: pointer; }
.qc-pk:active { transform: scale(0.98); }
.qc-pk:disabled { opacity: 0.55; cursor: default; }
.qc-pk.qc-fit { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }
.qc-pk .mp-pk-art { width: 74px; height: 48px; }
.qc-coin { font-size: 34px; line-height: 48px; }
.qc-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.qc-amount { font-size: 1.25rem; font-weight: 800; }
.qc-unit { font-size: 0.78rem; color: #64748b; }
.qc-price { margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-weight: 800; font-size: 0.92rem; }
.qc-msg { grid-column: 1 / -1; margin: 12px 4px; text-align: center; color: #475569; font-size: 0.95rem; }
.qc-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; color: #5b21b6; font-weight: 700; font-size: 0.92rem; text-align: center; }
.qc-wait.hidden { display: none; }
.qc-spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 3px solid rgba(124, 58, 237, 0.2); border-top-color: #7c3aed; animation: qcSpin 0.8s linear infinite; }
@keyframes qcSpin { to { transform: rotate(360deg); } }
.qc-note { margin: 12px 4px 0; text-align: center; color: #64748b; font-size: 0.82rem; }
.qc-screen .qc-pk:disabled { background: #fff; color: #0f172a; }

/* ===== "Mis regalos": comprar, elegir y enviar (public/gifts-inventory.js) ===== */
.gi-screen { position: fixed; inset: 0; z-index: 9700; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 10, 24, 0.55); }
.gi-screen.hidden { display: none; }
.gi-sheet { position: relative; width: 100%; max-width: 520px; max-height: 86vh; max-height: 86dvh; overflow-y: auto; box-sizing: border-box; background: #fff; color: #1e293b; border-radius: 24px 24px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); box-shadow: 0 -18px 50px -10px rgba(0, 0, 0, 0.45); animation: qcUp 0.22s ease-out; }
.gi-grip { width: 42px; height: 5px; border-radius: 3px; background: #cbd5e1; margin: 4px auto 10px; }
.gi-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; border-radius: 50%; background: #f1f5f9; color: #334155; font-size: 16px; cursor: pointer; }
.gi-title { margin: 4px 44px 4px 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.gi-sub { margin: 0 0 12px; font-size: 0.86rem; color: #64748b; }
.gi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gi-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 10px; border: 1.5px solid #e2e8f0; border-radius: 16px; background: #fff; color: #0f172a; font-family: inherit; cursor: pointer; }
.gi-card.gi-owned { border-color: #a78bfa; background: #faf7ff; }
.gi-card.gi-sending { opacity: 0.5; pointer-events: none; }
.gi-emoji { font-size: 2rem; line-height: 1.2; }
.gi-name { font-size: 0.8rem; font-weight: 700; text-align: center; line-height: 1.2; }
.gi-price { font-size: 0.78rem; color: #b45309; font-weight: 700; }
.gi-owned .gi-price { color: #6d28d9; }
.gi-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-size: 0.66rem; font-weight: 800; white-space: nowrap; }
.gi-send-btn { margin-top: 6px; padding: 6px 14px; border: none; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-weight: 800; font-size: 0.8rem; font-family: inherit; cursor: pointer; }
.gi-primary { width: 100%; padding: 14px; border: none; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-weight: 800; font-size: 1rem; font-family: inherit; cursor: pointer; }
.gi-primary:disabled { opacity: 0.6; }
.gi-primary.gi-small { width: auto; padding: 10px 16px; font-size: 0.88rem; }
.gi-note { margin: 10px 4px 0; text-align: center; font-size: 0.82rem; color: #64748b; }
.gi-buy-hero { display: flex; justify-content: center; margin: 4px 0 2px; }
.gi-buy-emoji { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #f3e8ff 70%); display: flex; align-items: center; justify-content: center; font-size: 3.4rem; box-shadow: 0 10px 26px -10px rgba(124, 58, 237, 0.5); }
.gi-buy-name { margin: 8px 0 2px; text-align: center; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.gi-buy-price { margin: 0; text-align: center; color: #64748b; font-size: 0.9rem; }
.gi-qty { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 16px 0 10px; }
.gi-qty button { width: 44px; height: 44px; border: none; border-radius: 50%; background: #f1f5f9; color: #0f172a; font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.gi-qty button:disabled { opacity: 0.4; }
.gi-qty strong { min-width: 30px; text-align: center; font-size: 1.5rem; }
.gi-buy-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff7e6; color: #92400e; font-weight: 600; }
.gi-buy-sum b { font-size: 1.15rem; color: #78350f; }
.gi-buy-bal { margin: 8px 0 12px; text-align: center; color: #64748b; font-size: 0.86rem; }
.gi-tabs { display: flex; gap: 6px; margin: 4px 0 14px; padding: 4px; border-radius: 14px; background: #f1f5f9; }
.gi-tabs button { flex: 1; padding: 10px; border: none; border-radius: 10px; background: none; color: #475569; font-weight: 700; font-size: 0.92rem; font-family: inherit; cursor: pointer; }
.gi-tabs button.active { background: #fff; color: #0f172a; box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.15); }
.gi-mine.hidden, .gi-received.hidden { display: none; }
.gi-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: #faf7ff; }
.gi-mine-head div { display: flex; flex-direction: column; }
.gi-mine-head strong { font-size: 1.5rem; color: #0f172a; }
.gi-mine-head span { font-size: 0.82rem; color: #64748b; }
.gi-empty { margin: 18px 6px; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.45; }
.mp-store-gift-card { position: relative; }
.mp-store-gift-owned { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-size: 0.64rem; font-weight: 800; }
.mp-store-gift-buy { margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: 0.72rem; font-weight: 800; }
.mp-gift-owned { color: #a78bfa !important; font-weight: 800; }

/* ===== Recarga mensual de monedas (public/coin-subscriptions.js) ===== */
.cs-section { margin: 18px 0 8px; }
.cs-section:empty { display: none; }
.cs-head h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 800; color: #0f172a; }
.cs-head p { margin: 0 0 12px; font-size: 0.88rem; color: #475569; line-height: 1.45; }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cs-grid.cs-grid-1 { grid-template-columns: 1fr; }
.cs-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 18px; background: #fff; text-align: center; }
.cs-card.cs-rec { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
.cs-card.cs-mine { border-color: #22c55e; background: #f0fdf4; }
.cs-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.cs-coins { font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.cs-per { font-size: 0.78rem; color: #64748b; }
.cs-price { margin: 6px 0 8px; font-size: 1.05rem; font-weight: 800; color: #5b21b6; }
.cs-price small { font-size: 0.75rem; font-weight: 600; color: #64748b; }
.cs-btn { width: 100%; padding: 10px 12px; border: none; border-radius: 999px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-weight: 800; font-size: 0.86rem; font-family: inherit; cursor: pointer; }
.cs-btn[aria-disabled="true"] { background: #e2e8f0; color: #64748b; }
.cs-btn:disabled { opacity: 0.6; }
.cs-on { font-size: 0.78rem; font-weight: 700; color: #15803d; }
.cs-off { font-size: 0.78rem; font-weight: 700; color: #b45309; }
.cs-link { margin-top: 4px; border: none; background: none; color: #6d28d9; font-weight: 700; font-size: 0.82rem; text-decoration: underline; font-family: inherit; cursor: pointer; }
.cs-note { margin: 10px 2px 0; font-size: 0.82rem; color: #64748b; text-align: center; }
.cs-plan { padding: 14px; border-radius: 18px; background: #faf7ff; border: 1px solid #ede9fe; }

/* ===== Ventanas .modal-box legibles =====
   Bug real ("sale transparente cuando doy enviar regalo"): .modal-box en
   mi-perfil.css tiene fondo blanco al 5 % (tema oscuro viejo) y la letra es
   oscura -> no se leía. Toda ventana .modal-box dentro de un .modal-overlay
   queda blanca y sólida (las que tienen su propio estilo más específico lo
   conservan). */
.modal-overlay .modal-box {
  background: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
}
.modal-overlay .modal-box h2,
.modal-overlay .modal-box h3 { color: #0f172a; }
.modal-overlay .modal-box .note { color: #64748b; }

/* Enviar regalo / Reenviar / emoji: tarjeta blanca con filas claras. */
.modal-overlay .mp-gift-recipient-box { width: min(100%, 420px); max-width: 420px; max-height: 82vh; max-height: 82dvh; overflow-y: auto; box-sizing: border-box; border-radius: 22px; padding: 18px 16px 14px; }
.mp-gift-recipient-box .mp-create-post-modal-head h3 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.mp-gift-recipient-box .mp-modal-close { background: #f1f5f9; color: #334155; border: none; }
.mp-gift-recipient-box input[type="text"] { width: 100%; box-sizing: border-box; margin: 12px 0 8px; padding: 12px 16px; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #0f172a; font-size: 16px; outline: none; }
.mp-gift-recipient-box input[type="text"]:focus { border-color: #8b5cf6; background: #fff; }
.mp-gift-recipient-box .plain-list { list-style: none; margin: 0; padding: 0; }
.modal-overlay .mp-gift-recipient-row { gap: 12px; padding: 9px 4px; border-bottom: 1px solid #f1f5f9; }
.modal-overlay .mp-gift-recipient-row > :first-child { width: 42px !important; height: 42px !important; min-width: 42px; flex: none; border-radius: 50%; overflow: hidden; object-fit: cover; display: flex; align-items: center; justify-content: center; }
.modal-overlay .mp-gift-recipient-row span { color: #0f172a; font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-overlay .mp-gift-recipient-row button { background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); padding: 8px 16px; font-size: 0.82rem; font-weight: 800; flex: none; }
.mp-gift-recipient-friend { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-style: normal; font-size: 0.68rem; font-weight: 800; vertical-align: middle; }

/* ===== Publicidad de negocios en Inicio (public/feed-biz-ads.js) =====
   Como la referencia: foto/video grande y abajo una franja con el título y
   "Ver detalles" (lleva al negocio y al producto dentro de VYNKO). */
.vk-ad-slot { min-height: 1px; }
.vk-ad { margin: 12px 0; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #e8ebf2; box-shadow: 0 6px 20px -14px rgba(15, 23, 42, 0.35); }
.vk-ad-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.vk-ad-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: #ede9fe; }
.vk-ad-logo-txt { display: inline-flex; align-items: center; justify-content: center; color: #6d28d9; font-weight: 800; font-size: 1.05rem; }
.vk-ad-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vk-ad-who strong { font-size: 0.98rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-ad-who span { font-size: 0.78rem; color: #64748b; font-weight: 600; }
.vk-ad-media-wrap { position: relative; background: #000; cursor: pointer; }
.vk-ad-media { display: block; width: 100%; max-height: min(58vh, 520px); object-fit: contain; background: #000; }
.vk-ad-mute { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vk-ad-mute .vk-ic-on { display: none; }
.vk-ad.vk-ad-sound .vk-ad-mute .vk-ic-on { display: block; }
.vk-ad.vk-ad-sound .vk-ad-mute .vk-ic-off { display: none; }
.vk-ad-bar { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f3f4f8; }
.vk-ad-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vk-ad-title { font-size: 1.02rem; font-weight: 700; color: #0f172a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vk-ad-item { font-size: 0.82rem; color: #6d28d9; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-ad-cta { flex: none; padding: 11px 18px; border: none; border-radius: 12px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; font-weight: 800; font-size: 0.95rem; font-family: inherit; cursor: pointer; white-space: nowrap; }
.vk-ad-cta:active { transform: scale(0.97); }
.mp-adf-hint { display: block; margin-top: 6px; font-size: 0.78rem; color: #64748b; }

/* Dos botones en todo anuncio: "Más información" y "Consultar". */
.vk-ad-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 14px; background: #f3f4f8; }
.vk-ad-actions .vk-ad-cta { width: 100%; }
.vk-ad-actions .vk-ad-info { background: #fff; color: #5b21b6; border: 1.5px solid #c4b5fd; }
.vk-ad-actions .vk-ad-consult { background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; }
.mp-ad-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-ad-actions .mp-ad-cta { width: 100%; background: rgba(255, 255, 255, 0.95); color: #4c1d95; }
.mp-ad-actions .mp-ad-consult { background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; }

/* Publicidad de Inicio más compacta (pedido: "están muy grandes") + fila de
   reacciones como una publicación: me gusta, comentar y compartir con números. */
.vk-ad-head { padding: 10px 12px; gap: 9px; }
.vk-ad-logo { width: 34px; height: 34px; }
.vk-ad-who strong { font-size: 0.92rem; }
.vk-ad-who span { font-size: 0.72rem; }
.vk-ad-media { max-height: min(46vh, 400px); }
.vk-ad-bar { padding: 10px 12px 8px; gap: 8px; }
.vk-ad-title { font-size: 0.94rem; -webkit-line-clamp: 1; }
.vk-ad-item { font-size: 0.78rem; }
.vk-ad-actions { gap: 8px; padding: 0 12px 10px; }
.vk-ad-actions .vk-ad-cta { padding: 8px 10px; font-size: 0.84rem; border-radius: 10px; }
.vk-ad-react { display: flex; align-items: center; gap: 22px; padding: 8px 16px 10px; border-top: 1px solid #edf0f5; }
.vk-ad-r { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: #475569; font-family: inherit; font-size: 0.95rem; font-weight: 600; padding: 4px 2px; cursor: pointer; }
.vk-ad-r svg { width: 22px; height: 22px; }
.vk-ad-r:active { transform: scale(0.94); }
.vk-ad-like.on { color: #e11d48; }
.vk-ad-like.on svg { fill: #e11d48; }
.vk-cm-sheet { display: flex; flex-direction: column; height: min(78vh, 640px); height: min(78dvh, 640px); }
.vk-cm-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 4px 0 8px; padding: 0; }
.vk-cm-row { display: flex; gap: 10px; padding: 8px 2px; }
.vk-cm-row > :first-child { flex: none; width: 34px !important; height: 34px !important; border-radius: 50%; }
.vk-cm-body { min-width: 0; }
.vk-cm-body strong { font-size: 0.88rem; color: #0f172a; }
.vk-cm-body p { margin: 2px 0; font-size: 0.92rem; color: #1e293b; overflow-wrap: anywhere; }
.vk-cm-body span { font-size: 0.75rem; color: #94a3b8; }
.vk-cm-body button { border: none; background: none; color: #e11d48; font-size: 0.75rem; font-weight: 700; padding: 0; cursor: pointer; }
.vk-cm-empty { padding: 24px 8px; text-align: center; color: #64748b; }
.vk-cm-form { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid #edf0f5; }
.vk-cm-form input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #f8fafc; font-size: 16px; font-family: inherit; outline: none; color: #0f172a; }
.vk-cm-form button { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 0 2px; cursor: pointer; }

/* Campañas de anunciantes con el diseño nuevo: un solo botón a lo ancho. */
.vk-ad-actions.vk-ad-actions-1 { grid-template-columns: 1fr; }
.yu-ad-card.vk-ad { padding: 0; }
.yu-ad-card.vk-ad .vk-ad-item { color: #475569; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===== Publicidad estilo Facebook (pedido explícito con referencia "tal cual") =====
   Encabezado con "···", texto arriba, imagen (tocarla lleva a la empresa),
   franja gris con "Enviar mensaje", resumen de reacciones y Me gusta /
   Comentar / Compartir. También la usan las publicaciones de empresas. */
.vk-fb { border-radius: 14px; }
.vk-fb .vk-ad-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px 14px; }
.vk-fb .vk-ad-head-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: none; background: none; padding: 0; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.vk-fb .vk-ad-logo { width: 42px; height: 42px; }
.vk-fb .vk-ad-who strong { font-size: 0.98rem; }
.vk-fb .vk-ad-who span { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: #65676b; font-weight: 500; }
.vk-ad-more { flex: none; width: 36px; height: 36px; border: none; border-radius: 50%; background: none; color: #65676b; font-size: 1.05rem; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
.vk-ad-more:active { background: #f0f2f5; }
.vk-ad-menu { position: absolute; top: 48px; right: 10px; z-index: 5; display: flex; flex-direction: column; min-width: 210px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.vk-ad-menu button { border: none; background: none; padding: 11px 12px; text-align: left; font: inherit; font-size: 0.92rem; color: #1c1e21; border-radius: 8px; cursor: pointer; }
.vk-ad-menu button:active { background: #f0f2f5; }
.vk-ad-caption { margin: 0; padding: 2px 14px 10px; font-size: 0.95rem; line-height: 1.4; color: #1c1e21; white-space: pre-wrap; overflow-wrap: anywhere; }
.vk-fb .vk-ad-media-wrap { background: #f0f2f5; }
.vk-fb .vk-ad-media { width: 100%; max-height: min(48vh, 430px); object-fit: cover; background: #f0f2f5; }
.vk-fb video.vk-ad-media { background: #000; object-fit: contain; }
.vk-ad-strip { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #f0f2f5; border-top: 1px solid #e4e6eb; }
.vk-ad-strip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.vk-ad-strip-text small { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-ad-strip-text strong { font-size: 0.98rem; font-weight: 700; color: #1c1e21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-ad-strip-text span { font-size: 0.86rem; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-ad-msg { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #ccd0d5; border-radius: 8px; background: #fff; color: #1c1e21; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vk-ad-msg svg { color: #7c3aed; }
.vk-ad-msg:active { background: #f0f2f5; }
.vk-ad-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; padding: 10px 14px 8px; font-size: 0.88rem; color: #65676b; }
.vk-ad-sum.vk-empty { min-height: 0; padding: 4px 14px 0; }
.vk-ad-sum-l { display: inline-flex; align-items: center; gap: 6px; }
.vk-ad-sum-ic { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: #fde2e7; font-size: 0.72rem; }
.vk-ad-sum-r { border: none; background: none; padding: 0; color: #65676b; font: inherit; font-size: 0.88rem; cursor: pointer; }
.vk-ad-acts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 10px; padding: 2px 0 4px; border-top: 1px solid #e4e6eb; }
.vk-ad-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: none; border-radius: 8px; background: none; color: #65676b; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.vk-ad-act:active { background: #f0f2f5; }
.vk-ad-act.on { color: #e11d48; }
.vk-ad-act.on svg { fill: #e11d48; stroke: #e11d48; }
/* En la publicación de una empresa la franja va pegada a la foto. */
.mp-post-card .vk-ad-strip.vk-post-biz { margin: 0; }
.mp-post-card:has(.vk-post-biz) img.mp-post-media { cursor: pointer; }

/* Ajustes de la publicidad estilo Facebook. */
.vk-fb .vk-ad-head { border: none; box-shadow: none; background: transparent; margin: 0; flex-wrap: nowrap; }
.yu-ad-card.vk-fb { background: #fff; border: 1px solid #e4e6eb; box-shadow: 0 6px 20px -14px rgba(15, 23, 42, 0.35); }
.yu-ad-card.vk-fb .vk-ad-caption { background: transparent; }
.yu-ad-card.vk-fb .vk-ad-media { margin-top: 0; max-height: min(48vh, 430px); }
.vk-fb .vk-ad-msg.yu-ad-card-cta { width: auto; margin: 0; background: #fff; color: #1c1e21; border: 1px solid #ccd0d5; border-radius: 8px; box-shadow: none; padding: 8px 12px; font-size: 0.88rem; }
.vk-ad-act { gap: 6px; font-size: 0.86rem; white-space: nowrap; }
.vk-ad-act svg { width: 18px; height: 18px; flex: none; }

/* ===== Tarjeta de bienvenida al entrar a una empresa (public/biz-welcome.js) ===== */
.bw-card {
  position: fixed;
  z-index: 2600;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  width: min(calc(100% - 28px), 400px);
  box-sizing: border-box;
  padding: 16px 16px 14px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.28) 0, transparent 42%),
    linear-gradient(135deg, #22b8ff 0%, #6d5bff 48%, #a21caf 100%);
  box-shadow: 0 22px 50px -14px rgba(76, 29, 149, 0.65), 0 2px 0 rgba(255, 255, 255, 0.25) inset;
  overflow: hidden;
  transform: translate(-50%, 30px) scale(0.96);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.25s ease;
}
.bw-card.hidden { display: none; }
.bw-card.bw-in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.bw-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
.bw-x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 14px; cursor: pointer; }
.bw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-right: 36px; }
.bw-logo { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.8); background: #fff; }
.bw-logo-txt { display: inline-flex; align-items: center; justify-content: center; color: #6d28d9; font-weight: 800; font-size: 0.85rem; }
.bw-from { font-size: 0.8rem; font-weight: 700; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-emoji { font-size: 2.2rem; line-height: 1; margin: 2px 0 6px; display: inline-block; }
.bw-wave { animation: bwWave 1.6s ease-in-out 2; transform-origin: 70% 80%; }
.bw-happy { animation: bwHop 1s ease-in-out 3; }
@keyframes bwWave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(16deg); } 80% { transform: rotate(-6deg); } }
@keyframes bwHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px) scale(1.08); } }
.bw-title { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.bw-text { margin: 4px 0 12px; font-size: 0.92rem; line-height: 1.4; opacity: 0.95; }
.bw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bw-btn { flex: 1 1 auto; padding: 10px 14px; border: none; border-radius: 999px; background: #fff; color: #5b21b6; font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4); }
.bw-btn:active { transform: scale(0.97); }
.bw-card .bw-btn-ghost { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.5); }
.bw-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.2); }
.bw-timer span { display: block; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.85); }

/* "Nuestra historia" */
.bw-story-sheet { padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 18px); max-height: 88vh; max-height: 88dvh; }
.bw-story .gi-x { z-index: 2; background: rgba(255, 255, 255, 0.9); }
.bw-story-cover { height: 130px; border-radius: 24px 24px 0 0; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%) center / cover no-repeat; }
.bw-story-logo { display: block; width: 74px; height: 74px; margin: -38px auto 0; position: relative; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4); }
.bw-story-logo.bw-logo-txt { display: flex; font-size: 1.8rem; }
.bw-story-name { margin: 8px 16px 2px; text-align: center; font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.bw-story-label { margin: 0 16px 10px; text-align: center; font-size: 0.85rem; font-weight: 700; color: #7c3aed; }
.bw-story-text { margin: 0 18px 16px; font-size: 0.98rem; line-height: 1.6; color: #1e293b; white-space: pre-wrap; overflow-wrap: anywhere; }
.bw-story-actions { display: flex; gap: 10px; padding: 0 16px; }
.bw-story .bw-btn { background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); color: #fff; }
.bw-story .bw-btn-ghost { background: #f1f5f9; color: #5b21b6; box-shadow: none; }

/* Permiso de llamadas a pantalla completa (public/call-permissions.js). */
.cp-sheet { text-align: center; }
.cp-icon { width: 64px; height: 64px; margin: 6px auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(135deg, #22b8ff 0%, #7c3aed 100%); box-shadow: 0 10px 24px -10px rgba(124, 58, 237, 0.7); }
.cp-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.cp-text { margin: 0 4px 10px; font-size: 0.95rem; line-height: 1.5; color: #334155; }
.cp-steps { text-align: left; margin: 0 8px 16px; padding-left: 22px; color: #475569; font-size: 0.9rem; line-height: 1.6; }
.cp-later { display: block; width: 100%; margin-top: 8px; padding: 12px; border: none; background: none; color: #64748b; font: inherit; font-weight: 700; cursor: pointer; }

/* Los saltos de línea de un mensaje se respetan (antes un texto con pasos
   1️⃣ 2️⃣ 3️⃣ o párrafos llegaba todo pegado en una sola línea). */
.mp-chat-bubble p { white-space: pre-line; }

/* Planes de empresa dentro de la app de Play Store: se pagan con Google Play
   en pesos (client.js renderBusinessPlans), no con monedas. */
#businessPlansView.bpl-play .mp-bpl-coins,
#businessPlansView.bpl-play .cs-plan { display: none !important; }

/* Caja para escribir en los chats de Empleos (robot del Agente de Selección,
   entrevista del candidato y prueba del asistente): el botón "Enviar" ocupaba
   todo el ancho (regla general de botones del perfil de negocio) y dejaba el
   campo de texto aplastado. Campo ancho y botón al lado. */
.mp-jb-iv-inputrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mp-jb-iv-inputrow.hidden { display: none; }
.mp-jb-iv-inputrow input,
.mp-jb-iv-inputrow textarea { flex: 1 1 auto; min-width: 0; width: auto; min-height: 46px; padding: 10px 14px; font-size: 1rem; border-radius: 14px; }
.mp-jb-iv-inputrow .mp-btn-gradient,
#businessProfileView .mp-jb-iv-inputrow .mp-btn-gradient { flex: 0 0 auto; width: auto; min-width: 0; padding: 0 18px; height: 46px; margin: 0; }

/* Registro: sexo/nacionalidad y foto de perfil + portada obligatorias
   (ver #signupForm en index.html). */
#signupPersonalFields { display: flex; flex-direction: column; gap: 0.8rem; }
.signup-photos { display: grid; grid-template-columns: 96px 1fr; gap: 0.7rem; align-items: stretch; }
.signup-photo-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem; border: 1.5px dashed #c4b5fd; border-radius: 15px; background: #f8fafc; color: #64748b; font: inherit; font-size: 0.78rem; cursor: pointer; min-width: 0; }
.signup-photo-pick.done { border-style: solid; border-color: #7c6cf0; color: #4c1d95; font-weight: 600; }
.signup-photo-preview { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #ede9fe; font-size: 1.4rem; background-size: cover; background-position: center; }
.signup-photo-avatar .signup-photo-preview { width: 60px; height: 60px; border-radius: 50%; }
.signup-photo-cover .signup-photo-preview { width: 100%; aspect-ratio: 3 / 1.2; border-radius: 10px; }
.signup-photo-preview.has-img { font-size: 0; }

/* Contratación con contrato firmado y documentos (ver lib/jobHiring.js). */
.mp-hire-setup, .mp-hire-sign { display: flex; flex-direction: column; gap: 0.6rem; }
.mp-hire-sign { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid #e5e7eb; }
.mp-hire-summary ul { margin: 0.2rem 0 0.6rem; padding-left: 1.1rem; font-size: 0.85rem; color: #334155; }
.mp-hire-file { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: #f1f5f9; word-break: break-word; }
.mp-hire-file .mp-btn-outline { width: auto; flex: 0 0 auto; }
.mp-hire-chips, .mp-hire-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mp-hire-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem 0.3rem 0.7rem; border-radius: 999px; background: #ede9fe; color: #4c1d95; font-size: 0.82rem; font-weight: 600; }
.mp-hire-chip button { border: none; background: rgba(76, 29, 149, 0.12); color: inherit; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 0.95rem; line-height: 1; }
.mp-hire-suggest button { border: 1px dashed #c4b5fd; background: #fff; color: #6d28d9; border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.78rem; cursor: pointer; }
.mp-hire-sign-canvas { width: 100%; height: auto; aspect-ratio: 600 / 220; border: 1.5px dashed #94a3b8; border-radius: 12px; background: #fff; touch-action: none; }
.mp-hire-status, .mp-hire-step, .mp-hire-proposal { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.85rem; color: #1e293b; }
.mp-hire-status { margin-top: 0.4rem; }
.mp-hire-step a, .mp-hire-status a { color: #2563eb; font-weight: 600; }
.mp-hire-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mp-hire-doc-row .mp-btn-outline { width: auto; flex: 0 0 auto; padding: 0.35rem 0.8rem; }
.mp-hire-proposal { margin: 0.4rem 0; border-color: #a78bfa; background: #faf5ff; }
.mp-hire-proposal .mp-btn-gradient { margin-top: 0.4rem; }
/* Las ventanas de Empleos tienen fondo blanco fijo: el texto no debe heredar el color claro del
   tema oscuro (los títulos salían casi invisibles). Y si el contenido es largo, se desplaza. */
.mp-jb-iv-modal, .mp-jb-agent-popover { color: #1e293b; }
#jobContractSetupModal .mp-jb-iv-modal, #jobHireCompleteModal .mp-jb-iv-modal, #hireCitationModal .mp-jb-iv-modal { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mp-hire-chip button { display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* Fila "En línea" de Mensajes: cada foto es un <button> y heredaba el fondo
   azul y el relleno de todos los botones (quedaba un óvalo azul alrededor de
   cada perfil). Solo la foto, con su borde fino y el punto verde. */
.mp-online-avatar-item { padding: 0; background: none; line-height: 0; }

/* Mi negocio > 🤖 Agente de atención (public/service-agent.js) */
.sa-panel { display: flex; flex-direction: column; gap: 10px; color: #1e293b; }
.sa-head { display: flex; gap: 12px; align-items: flex-start; }
.sa-head h3 { margin: 0 0 4px; }
.sa-icon { font-size: 34px; line-height: 1; }
.sa-switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f1f5ff; cursor: pointer; }
.sa-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sa-switch i { width: 46px; height: 26px; border-radius: 999px; background: #cbd5e1; position: relative; flex: none; transition: background .2s; }
.sa-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.sa-switch input:checked + i { background: #2563eb; }
.sa-switch input:checked + i::after { transform: translateX(20px); }
.sa-switch span { display: flex; flex-direction: column; }
.sa-switch small { color: #64748b; font-size: 12px; }
.sa-db { padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px; line-height: 1.5; }
.sa-db.ok { background: #ecfdf5; border-color: #a7f3d0; }
.sa-db.warn { background: #fffbeb; border-color: #fde68a; }
.sa-db code { background: #e2e8f0; padding: 1px 6px; border-radius: 6px; user-select: all; }
.sa-label { font-weight: 800; margin-top: 4px; }
.sa-text { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; background: #fff; color: #0f172a; }
.sa-test { margin-top: 10px; padding: 14px; border-radius: 16px; border: 1px dashed #93c5fd; background: #f8fbff; display: flex; flex-direction: column; gap: 8px; }
.sa-convo { max-height: 380px; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.sa-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; font-size: 14px; line-height: 1.45; align-self: flex-start; }
.sa-msg.me { align-self: flex-end; background: #2563eb; border-color: #2563eb; color: #fff; }
.sa-file { display: block; margin-top: 6px; font-weight: 700; color: #1d4ed8; }
.sa-form { display: flex; gap: 8px; }
.sa-form input { flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 14px; background: #fff; color: #0f172a; }
.sa-form .mp-btn-gradient { width: auto; padding: 0 18px; margin: 0; }
.sa-reset { align-self: flex-start; border: none; background: none; color: #2563eb; font-weight: 700; cursor: pointer; padding: 2px; }
.sa-typing { display: inline-flex; gap: 4px; }
.sa-typing i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: saDot 1s infinite ease-in-out; }
.sa-typing i:nth-child(2) { animation-delay: .15s; }
.sa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes saDot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
/* Botón del Asistente en Mensajes y su ventana */
.sa-btn { position: relative; }
.sa-btn-face { font-size: 21px; line-height: 1; }
.sa-btn-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
#assistantModal .sa-modal { overflow-y: auto; color: #1e293b; }
.mp-conv-panel-head .mp-conv-header-titles { min-width: 0; flex: 1 1 auto; }
.mp-conv-panel-head .mp-conv-header-icon-btn { flex: none; }
/* Encabezado de Mensajes compacto en el celular (pedido del dueño 2026-10-21 con captura: "el encabezado ocupa
   mucho espacio, casi medio teléfono"). Sin "Tu bandeja de entrada", título e íconos más pequeños y menos margen
   en las pestañas, el buscador y la fila de Vyhia: así se ven más conversaciones. */
@media (max-width: 640px) {
  .mp-conv-panel-head { padding: 0.45rem 0.8rem 0.35rem !important; gap: 0.4rem !important; }
  .mp-conv-panel-head .mp-conv-header-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; }
  .mp-conv-panel-head .mp-conv-header-icon svg { width: 16px; height: 16px; }
  .mp-conv-panel-head .mp-conv-title { font-size: 1.3rem !important; }
  .mp-conv-panel-head .mp-conv-subtitle { display: none; }
  .mp-conv-panel-head .mp-conv-header-icon-btn { width: 2.6rem !important; height: 2.6rem !important; }
  .mp-conv-panel-head .mp-conv-header-icon-btn svg { width: 19px; height: 19px; }
  /* El lápiz y el de personalizar se veían muy pequeños a 19px (el dueño, 2026-10-21). */
  .mp-conv-panel-head #chatCustomizeMenuBtn svg, .mp-conv-panel-head #newMessageBtn svg { width: 24px; height: 24px; }
  .mp-conv-panel-head .mp-conv-header-icon-btn img { width: 100%; height: 100%; }
  .mp-conv-filter-pills { padding: 0 0.8rem 0.4rem !important; }
  .mp-conv-filter-pill { height: 28px !important; padding: 0 0.7rem !important; }
  .mp-conv-search { margin: 0 0.8rem 0.45rem !important; padding: 0.3rem 0.5rem 0.3rem 0.75rem !important; }
  .sa-chat-row { margin: 2px 10px 4px !important; width: calc(100% - 20px) !important; padding: 7px 10px !important; gap: 10px !important; }
  .sa-chat-row-logo { width: 38px !important; height: 38px !important; }
}
@media (min-width: 641px) {
  .mp-conv-panel-head { gap: 8px; }
  .mp-conv-panel-head .mp-conv-header-icon-btn { width: 42px !important; height: 42px !important; }
  .mp-conv-panel-head .mp-conv-title { font-size: 24px !important; }
}
.sa-always { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.sa-always small { color: #047857; }
/* Asistente: cuenta a la que avisa las novedades */
.sa-report { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.sa-report-current { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-who, .sa-who-opt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sa-who img, .sa-who-opt img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.sa-who i, .sa-who-opt i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sa-report-search { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; background: #fff; color: #0f172a; }
.sa-report-results { display: flex; flex-direction: column; gap: 4px; }
.sa-who-opt { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: #0f172a; }
.sa-who-opt:hover { background: #eff6ff; }
.sa-who-opt small { color: #64748b; margin-left: auto; font-size: 12px; }
.sa-who small { color: #64748b; font-size: 12px; }
.sa-who .sa-warn { color: #b45309; }
.sa-report-current .sa-who, .sa-backup .sa-who { flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
.sa-backups { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.sa-backups > small, #saReportPicker > small { color: #475569; font-weight: 600; font-size: 12.5px; }
.sa-backup { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sa-backup .sa-who { flex: 1; }
#saReportPicker { display: flex; flex-direction: column; gap: 6px; }
#saReportPicker.hidden { display: none; }
.sa-chat-row { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 6px 12px 4px; padding: 10px 12px; border: 1px solid #c7d7fe; border-radius: 14px; background: linear-gradient(135deg, #eef4ff, #f8faff); color: #0f172a; text-align: left; font: inherit; cursor: pointer; box-sizing: border-box; }
.sa-chat-row.hidden { display: none; }
.sa-chat-row:hover { background: #e4edff; }
.sa-chat-row-logo { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff; border: 2px solid #dbe4ff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.sa-chat-row-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sa-chat-row-logo i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.sa-chat-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sa-chat-row-text b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-chat-row-text small { color: #475569; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-chat-row-go { color: #2563eb; font-size: 22px; line-height: 1; }
.sa-guide { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.sa-guide #saAll { display: flex; flex-direction: column; gap: 8px; }
.sa-guide #saAll.hidden { display: none; }
.sa-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sa-logo { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: #f1f5ff; overflow: hidden; border: 2px solid #e2e8f0; }
.sa-logo img { width: 100%; height: 100%; object-fit: cover; }
.sa-title h3 { margin: 0; }

/* Llamada contestada por el asistente de voz de una empresa (public/voice-agent.js) */
.va-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0b1120 70%); color: #fff; }
.va-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.va-logo-wrap { position: relative; width: 132px; height: 132px; margin-bottom: 12px; }
.va-logo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 52px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.va-logo img { width: 100%; height: 100%; object-fit: cover; }
.va-ring { position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(96,165,250,.55); opacity: 0; }
.va-speaking .va-ring { animation: va-pulse 1.2s ease-out infinite; }
@keyframes va-pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.va-name { margin: 0; font-size: 1.5rem; font-weight: 700; }
.va-status { margin: 0; color: #cbd5e1; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.va-actions { display: flex; gap: 40px; margin-top: 48px; }
.va-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: #e2e8f0; font-size: .85rem; cursor: pointer; }
.va-btn svg { box-sizing: content-box; padding: 18px; border-radius: 50%; background: rgba(255,255,255,.14); }
.va-btn.va-off svg { background: #fff; color: #0b1120; }
.va-hang svg { background: #ef4444; color: #fff; }

/* Vyhia: la secretaria del dueño como holograma (public/vyhia.js) */
.vy-btn { position: relative; padding: 0 !important; overflow: visible; }
.vy-btn-orb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e0fdff 0, #5ee7ff 35%, #0891b2 70%, transparent 72%); box-shadow: 0 0 10px #22d3ee, 0 0 18px rgba(34,211,238,.5); animation: vy-orb 2.4s ease-in-out infinite; }
@keyframes vy-orb { 50% { box-shadow: 0 0 4px #22d3ee, 0 0 10px rgba(34,211,238,.3); transform: scale(.92); } }
.vy-overlay { --vy-out: 0; --vy-in: 0; position: fixed; inset: 0; z-index: 10060; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; overflow: hidden; color: #cffafe; background: radial-gradient(ellipse at 50% 70%, #062a3a 0%, #020814 65%); font-family: inherit; }
.vy-overlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(103,232,249,.05) 0 1px, transparent 1px 3px); }
.vy-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(103,232,249,.4); background: rgba(8,47,73,.5); color: #a5f3fc; font-size: 18px; cursor: pointer; z-index: 2; }
.vy-stage { position: relative; width: min(84vw, 340px); height: min(100vw, 400px); cursor: pointer; outline: none; }
.vy-figure { position: absolute; left: 50%; bottom: 40px; width: 100%; transform: translateX(-50%); filter: drop-shadow(0 0 calc(10px + var(--vy-out) * 18px) rgba(34,211,238,.7)); animation: vy-float 5s ease-in-out infinite, vy-flicker 7s steps(1) infinite; }
.vy-face { display: block; width: 100%; height: auto; opacity: .94; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.vy-btn .vy-btn-face { display: block; flex: none; width: 84%; height: 84%; aspect-ratio: 1; border-radius: 50%; background: #0e7490 url(/img/vyhia-face-96.webp) center 30% / cover no-repeat; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #22d3ee, 0 0 12px rgba(34,211,238,.55); animation: vy-face-pulse 2.4s ease-in-out infinite; }
@keyframes vy-face-pulse { 50% { transform: scale(.94); } }
@keyframes vy-float { 50% { translate: 0 -8px; } }
@keyframes vy-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .8; } 48% { opacity: 1; } 72% { opacity: .9; } 73% { opacity: 1; } }
.vy-cone { position: absolute; left: 50%; bottom: 30px; width: 92%; height: 88%; transform: translateX(-50%); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); background: linear-gradient(to top, rgba(34,211,238,.32), rgba(34,211,238,0)); opacity: calc(.55 + var(--vy-out) * .45); }
.vy-base { position: absolute; left: 50%; bottom: 14px; width: 62%; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(165,243,252,.9) 0, rgba(34,211,238,.45) 40%, transparent 70%); box-shadow: 0 0 30px rgba(34,211,238,.6); }
.vy-rings { position: absolute; left: 50%; bottom: 20px; width: 62%; height: 34px; transform: translateX(-50%); }
.vy-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(103,232,249,.7); opacity: 0; animation: vy-ring 3s linear infinite; }
.vy-rings i:nth-child(2) { animation-delay: 1s; }
.vy-rings i:nth-child(3) { animation-delay: 2s; }
@keyframes vy-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6) translateY(-6px); opacity: 0; } }
.vy-overlay[data-state="listening"] .vy-base { box-shadow: 0 0 calc(30px + var(--vy-in) * 50px) rgba(52,211,153,.8); background: radial-gradient(ellipse, rgba(167,243,208,.9) 0, rgba(52,211,153,.45) 40%, transparent 70%); }
.vy-overlay[data-state="idle"] .vy-figure { opacity: .6; filter: drop-shadow(0 0 6px rgba(34,211,238,.5)) saturate(.7); }
.vy-overlay[data-state="connecting"] .vy-figure, .vy-overlay[data-state="working"] .vy-figure { animation: vy-float 4s ease-in-out infinite, vy-think 1.1s ease-in-out infinite; }
@keyframes vy-think { 50% { opacity: .5; } }
.vy-name { margin-top: 4px; font-size: 1.5rem; font-weight: 700; letter-spacing: .45em; text-indent: .45em; color: #a5f3fc; text-shadow: 0 0 12px #22d3ee; }
.vy-status { margin: 0; min-height: 1.4em; color: #67e8f9; font-size: .95rem; text-align: center; max-width: 340px; }
.vy-subs { min-height: 3.2em; max-width: 420px; width: 100%; text-align: center; }
.vy-subs p { margin: 0; color: #e0f2fe; font-size: 1rem; line-height: 1.35; }
.vy-subs p.me { color: #94a3b8; font-style: italic; }
.vy-actions { display: flex; gap: 12px; margin-top: 6px; }
.vy-act { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(103,232,249,.5); background: rgba(8,47,73,.6); color: #cffafe; font: inherit; cursor: pointer; }
.vy-act.hidden { display: none; }
.vy-lock { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(103,232,249,.35); background: rgba(8,47,73,.45); box-sizing: border-box; }
.vy-lock.hidden { display: none; }
.vy-lock > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.vy-lock b { color: #cffafe; font-size: .95rem; }
.vy-lock small { color: #94d5e4; font-size: .8rem; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .vy-figure, .vy-rings i, .vy-btn-orb, .vy-btn .vy-btn-face { animation: none; } }

/* ===== Perfil: diseño original de VYNKO (el dueño 2026-10-31, con imagen: "copia exactamente este concepto") ===== */
#publicProfileView .pp-hero { position: relative; }
#publicProfileView .pp-cover { border-radius: 22px; overflow: hidden; position: relative; }
/* Sello VK en la esquina de abajo a la derecha de la portada. */
#publicProfileView .pp-cover-vk {
  position: absolute; right: 0; bottom: 0; z-index: 1; width: 78px; height: 58px; pointer-events: none;
  border-bottom-right-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, transparent 49%, rgba(56, 189, 248, 0.95) 50%, #4f46e5 78%, #7c3aed);
}
#publicProfileView .pp-cover-vk img { position: absolute; right: 10px; bottom: 9px; width: 26px; height: auto; filter: brightness(0) invert(1); }
/* Foto: aro azul -> morado, el sello VK pegado abajo a la derecha y el punto verde abajo a la izquierda. */
#publicProfileView .pp-avatar { background: linear-gradient(135deg, #38bdf8, #3b82f6 45%, #7c3aed) !important; box-shadow: 0 12px 28px -12px rgba(79, 70, 229, 0.7); }
#publicProfileView .pp-avatar-vk {
  position: absolute; right: 2px; bottom: 6px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(135deg, #38bdf8, #7c3aed); border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}
#publicProfileView .pp-avatar-vk img { width: 17px; height: auto; filter: brightness(0) invert(1); }
#publicProfileView .pp-online-dot { right: auto !important; left: 46%; bottom: -2px !important; width: 20px !important; height: 20px !important; }
/* Ubicación con el pin azul (antes la chincheta roja). */
#publicProfileView .pp-location { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#publicProfileView .pp-location::before {
  content: '' !important; display: inline-block; width: 14px; height: 14px; margin-right: 0.3rem; vertical-align: -2px;
  background: #2f7cf6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Aviso del Vynko a la izquierda y "Unirme" grande a la derecha. */
#publicProfileView .pp-actions.pp-actions-pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0.6rem; }
#publicProfileView .pp-actions.pp-actions-pin .pp-pin-note { grid-column: auto; text-align: left; margin: 0; font-size: 0.8rem; line-height: 1.35; color: #475569; }
#publicProfileView .pp-pin-note p { margin: 0; }
#publicProfileView .pp-askpin-link {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; padding: 0.3rem 0.65rem; border: 1.5px solid #c7d2fe;
  border-radius: 999px; background: #eef2ff; color: #4338ca; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer;
}
#publicProfileView .pp-askpin-link svg { width: 15px; height: 15px; }
#publicProfileView .pp-askpin-link:disabled { opacity: 0.7; cursor: default; }
#publicProfileView .pp-actions.pp-actions-pin .pp-follow-btn {
  min-height: 56px; border-radius: 999px; font-size: 1.15rem; font-weight: 800; gap: 0.5rem;
  background: linear-gradient(90deg, #22b8f0, #3b5bf5 55%, #7c3aed) !important; color: #fff !important;
  box-shadow: 0 12px 24px -12px rgba(59, 70, 245, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#publicProfileView .pp-actions.pp-actions-pin .pp-follow-btn.pp-btn-muted { background: #eef1f6 !important; color: #475569 !important; box-shadow: none; }
#publicProfileView .pp-actions.pp-actions-pin .pp-follow-btn svg { width: 24px; height: 24px; }
/* Conteos y la línea con el logo VK debajo. */
#publicProfileView .pp-stats { margin-bottom: 0 !important; }
#publicProfileView .pp-i-green { background: #dcfce7 !important; color: #16a34a !important; }
#publicProfileView .pp-vk-divider { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: -2px 2rem 0.8rem; }
#publicProfileView .pp-vk-divider span { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #60a5fa); }
#publicProfileView .pp-vk-divider span + img + span, #publicProfileView .pp-vk-divider img + span { background: linear-gradient(90deg, #a78bfa, transparent); }
#publicProfileView .pp-vk-divider img { width: 24px; height: auto; }
/* Pestañas: la activa es una pastilla en degradado con letra blanca. */
#publicProfileView .pp-tabs { padding: 0.35rem !important; gap: 0.15rem !important; align-items: stretch; grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr)) !important; }
#publicProfileView .pp-tabs .pp-tab { border-radius: 16px !important; padding: 0.55rem 0.1rem !important; color: #1e293b; font-weight: 700; }
#publicProfileView .pp-tabs .pp-tab.active {
  color: #fff !important; background: linear-gradient(135deg, #6366f1, #4f46e5 45%, #7c3aed) !important;
  box-shadow: 0 10px 20px -10px rgba(79, 70, 229, 0.9);
}
#publicProfileView .pp-tab.active::after { left: 30%; right: 30%; bottom: 5px; height: 3px; background: rgba(255, 255, 255, 0.85); }
#publicProfileView .pp-tab.active + .pp-tab::before, #publicProfileView .pp-tab.active::before { display: none; }
/* Publicaciones como tarjetas completas. */
#publicProfileView .pp-grid.pp-feed { display: flex !important; flex-direction: column; gap: 0.8rem; }
#publicProfileView .pp-grid.pp-feed > .mp-post-card { margin: 0; border-radius: 22px; }