* {
  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;
}

/* Aviso de actualización de la app nativa ya instalada */
.apk-update-banner {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0.6rem;
  right: 0.6rem;
  z-index: 2500;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 177, 61, 0.25), transparent 55%),
    linear-gradient(160deg, #1c1530 0%, #0f0b1a 100%);
  border: 1px solid rgba(232, 177, 61, 0.35);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}

.apk-update-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: #e8b13d;
}

.apk-update-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.apk-update-text strong {
  font-size: 0.85rem;
  color: #fff;
}

.apk-update-text span {
  font-size: 0.72rem;
  color: #b9b3c9;
}

.apk-update-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff2cf 0%, #e8b13d 60%, #c98a1f 100%);
  color: #1a1206;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.apk-update-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #b9b3c9;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem;
}

/* --- Autenticación (pantalla única: logo + tagline + tarjeta de login,
   pedido explícito con una captura de referencia) --- */
.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;
}