/* Two Eyes v294 · Mobile scroll / footer safety
   CSS-only: no toca JS, localStorage, chats, rescates, ping ni planes. */
:root{
  --te-footer-safe-v294: calc(126px + env(safe-area-inset-bottom, 0px));
  --te-footer-height-v294: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* En marco de demo: reserva suficiente para que el footer absoluto no tape CTAs. */
.phone .main,
.phone main.main,
.phone main.content,
.phone .content,
.phone .view,
.phone .screen.active > .main{
  scroll-padding-bottom: var(--te-footer-safe-v294) !important;
}

.phone .main:not(#screen-chat .main),
.phone main.content,
.phone .view > .content,
.phone .screen.active > .main:not(#screen-chat > .main){
  padding-bottom: max(var(--te-footer-safe-v294), 118px) !important;
}

/* CTAs y últimas tarjetas: margen de seguridad para no quedar enterradas bajo el menú. */
.phone .buy-btn,
.phone .cta,
.phone .cta-primary,
.phone .primary-btn,
.phone .btn-primary,
.phone .danger-btn,
.phone .delete-btn,
.phone .main-cta,
.phone .pay-btn,
.phone .rescue-pay-btn,
.phone .footer-safe-cta{
  scroll-margin-bottom: var(--te-footer-safe-v294) !important;
}

.phone .panel:last-child,
.phone .card:last-child,
.phone .module-shell:last-child,
.phone .legal-card:last-child,
.phone .settings-card:last-child,
.phone .premium-card:last-child,
.phone .account-card:last-child,
.phone .delete-account-card:last-child,
.phone .delete-flow-card:last-child,
.phone .delete-confirm-card:last-child{
  margin-bottom: 18px !important;
}

/* Evita desbordes laterales en tarjetas y textos largos. */
.phone,
.phone *{
  max-width: 100%;
}
.phone p,
.phone .subtitle,
.phone .description,
.phone .note,
.phone .hint,
.phone .help,
.phone .pack-title,
.phone .pack-sub,
.phone .module-copy,
.phone .promo-sub,
.phone .history-title,
.phone .history-sub,
.phone .legal-copy,
.phone .legal-row,
.phone .menu-copy,
.phone .field-sub,
.phone .field-title,
.phone .screen-subtitle{
  overflow-wrap: anywhere;
}

@media (max-width: 440px){
  html,
  body{
    width:100% !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
  }
  body{
    padding:0 !important;
    margin:0 !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .phone,
  .app-shell,
  .mobile-shell,
  .device-frame{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    margin:0 auto !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  .screen,
  .screen.active{
    min-height:0 !important;
    overflow:hidden !important;
  }
  .main,
  main.main,
  main.content,
  .content,
  .view,
  .screen.active > .main{
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    padding-bottom:var(--te-footer-safe-v294) !important;
  }
  .main::-webkit-scrollbar,
  main.content::-webkit-scrollbar,
  .content::-webkit-scrollbar,
  .view::-webkit-scrollbar,
  .screen.active > .main::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
  .footer,
  .bottom-nav,
  .tabbar,
  .nav-bottom{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    min-height:var(--te-footer-height-v294) !important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:9999 !important;
  }
  /* El chat interno no necesita reserva doble si no tiene footer visible dentro de esa pantalla. */
  #screen-chat > .main,
  #screen-chat main.main{
    padding-bottom:18px !important;
  }
  .chat-thread{
    padding-bottom:18px !important;
  }
}


/* v330 — official button and onboarding scale
   Base limpia desde v313. No toca lógica. No convierte microbotones en CTA. */
:root{
  --te-official-cta-a:#ffc45b;
  --te-official-cta-b:#ff8a00;
  --te-official-cta-text:var(--te-bg-bottom);
  --te-official-cta-shadow:0 14px 30px rgba(255,138,0,.22), inset 0 1px 0 rgba(var(--te-overlay-rgb), .18);
}

/* CTA principal oficial: tomado como referencia de Rescates/Matches */
.cta,
.cta-primary,
.btn-primary,
.primary-btn,
.primary-action-v226,
.buy-btn,
.camera-btn,
.idea-btn,
.ref-clean-btn,
.referral-apply-btn,
.primary,
.secondary-action-v226{
  min-height:54px !important;
  border-radius:999px !important;
  border:0 !important;
  background:linear-gradient(90deg,var(--te-official-cta-a) 0%,var(--te-official-cta-b) 100%) !important;
  color:var(--te-official-cta-text) !important;
  font-weight:900 !important;
  font-size:16px !important;
  letter-spacing:-.01em !important;
  box-shadow:var(--te-official-cta-shadow) !important;
}

/* CTA secundario oficial: oscuro, sin parecer botón roto */
.btn-secondary,
.secondary-btn,
.secondary-btn-v226,
.btn-ghost,
.ghost-btn,
.outline-btn,
.secondary{
  min-height:50px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(var(--te-overlay-rgb), .075), rgba(var(--te-overlay-rgb), .035)) !important;
  border:1px solid rgba(var(--te-overlay-rgb), .12) !important;
  color:rgba(248,244,234,.92) !important;
  font-weight:850 !important;
  font-size:15px !important;
  box-shadow:inset 0 1px 0 rgba(var(--te-overlay-rgb), .045) !important;
}

/* Exclusiones: navegación, pestañas, volver, iconos, microacciones */
.back-btn,
.nav-btn,
.tab-btn,
.seg-btn,
.toggle-btn,
.tone-btn,
.icon-btn,
.btn-icon,
.resend-btn,
.toggle-password,
.mini-toast-action,
.timer-box-action,
.sheet-btn,
.voice-recorder-btn-v303{
  box-shadow:initial !important;
}

/* Crear cuenta: rebajar sensación de zoom sin cambiar identidad visual */
#screen-account .account-form{
  gap:18px !important;
  margin-top:24px !important;
}

#screen-account .field-label{
  font-size:14px !important;
  margin-bottom:10px !important;
}

#screen-account .input{
  height:54px !important;
  font-size:16px !important;
  border-radius:14px !important;
}

#screen-account .password-field{
  width:min(100%, 310px) !important;
}

#screen-account .rules{
  font-size:12px !important;
  line-height:1.35 !important;
  margin-top:10px !important;
}

#screen-account .field-error{
  min-height:16px !important;
  font-size:12px !important;
  line-height:16px !important;
  margin-top:5px !important;
}

#screen-account #btnContinueAccount{
  min-height:54px !important;
  width:320px !important;
  max-width:100% !important;
  font-size:16px !important;
}

/* Mantener el botón de volver de onboarding como onboarding: no ovalado */
#screen-account .back-btn,
#screen-age .back-btn,
#screen-verify .back-btn,
#screen-about1 .back-btn,
#screen-about2 .back-btn{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  border-radius:999px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}

/* Evitar parpadeo de pantalla al escribir en Crear cuenta */
#screen-account{
  scroll-behavior:auto !important;
}
#screen-account .account-form{
  scroll-behavior:auto !important;
}

/* END v330 official button and onboarding scale */


/* v341 — microinteractions polish: vida visual sin tocar lógica */
:root{
  --te-motion-fast:140ms;
  --te-motion-mid:220ms;
  --te-ease:cubic-bezier(.22,.61,.36,1);
}

/* Pulsación táctil suave */
button,
[role="button"],
.clickable,
.menu-item,
.setting-row,
.settings-row,
.choice-row,
.option-row,
.pack,
.module-trigger,
.item.clickable{
  transition:
    transform var(--te-motion-fast) var(--te-ease),
    box-shadow var(--te-motion-mid) var(--te-ease),
    border-color var(--te-motion-fast) var(--te-ease),
    background-color var(--te-motion-fast) var(--te-ease),
    opacity var(--te-motion-fast) var(--te-ease);
  -webkit-tap-highlight-color:rgba(255,138,0,.12);
}

button:active,
[role="button"]:active,
.clickable:active,
.menu-item:active,
.setting-row:active,
.settings-row:active,
.choice-row:active,
.option-row:active,
.pack:active,
.module-trigger:active,
.item.clickable:active{
  transform:translateY(1px) scale(.992);
}

/* No mover elementos delicados */
.nav-btn:active,
.back-btn:active,
.icon-btn:active,
.btn-icon:active,
.tab-btn:active,
.seg-btn:active,
.resend-btn:active,
.toggle-password:active{
  transform:none !important;
}

/* CTA: sensación de acción sin exagerar */
.cta,
.cta-primary,
.btn-primary,
.primary-btn,
.buy-btn,
.composer-send,
.danger-btn{
  transition:
    transform var(--te-motion-fast) var(--te-ease),
    filter var(--te-motion-fast) var(--te-ease),
    box-shadow var(--te-motion-mid) var(--te-ease);
}

.cta:active,
.cta-primary:active,
.btn-primary:active,
.primary-btn:active,
.buy-btn:active,
.composer-send:active,
.danger-btn:active{
  transform:translateY(1px) scale(.988);
  filter:brightness(.98);
}

/* Tarjetas: hover/tap muy leve */
.card,
.panel,
.glass-card,
.match-card,
.help-card,
.legal-panel,
.promo-card,
.video-item,
.history-item,
.chat-top,
.chat-thread{
  transition:
    border-color var(--te-motion-mid) var(--te-ease),
    box-shadow var(--te-motion-mid) var(--te-ease),
    background-color var(--te-motion-mid) var(--te-ease);
}

/* Radar: feedback sutil al tocar */
.field-panel{
  transition:
    transform var(--te-motion-fast) var(--te-ease),
    border-color var(--te-motion-mid) var(--te-ease),
    box-shadow var(--te-motion-mid) var(--te-ease),
    filter var(--te-motion-mid) var(--te-ease);
}

.field-panel:active{
  transform:scale(.992);
  filter:brightness(1.04);
}

/* Input de chat: foco más vivo */
.composer-input:focus{
  border-color:rgba(255,138,0,.48) !important;
  box-shadow:0 0 0 3px rgba(255,138,0,.10), inset 0 1px 0 rgba(var(--te-overlay-rgb), .045) !important;
}

/* Burbujas con entrada suave si se insertan nuevas */
.bubble-row{
  animation:teBubbleIn .18s var(--te-ease);
}

@keyframes teBubbleIn{
  from{opacity:0; transform:translateY(4px) scale(.99);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* Pequeño pulso elegante para estados online */
.presence.online{
  box-shadow:0 0 0 0 rgba(var(--te-success-rgb),.42);
  animation:tePresencePulse 1.8s ease-in-out infinite;
}

@keyframes tePresencePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--te-success-rgb),.28);}
  50%{box-shadow:0 0 0 5px rgba(var(--te-success-rgb),0);}
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* END v341 microinteractions polish */


/* v350 — final visual consistency */
:root{
  --te-cta-a:#ffc45b;
  --te-cta-b:#ff8a00;
  --te-cta-text:var(--te-bg-bottom);
  --te-card-bg:linear-gradient(180deg, rgba(var(--te-overlay-rgb), .060), rgba(var(--te-overlay-rgb), .024));
  --te-card-border:rgba(var(--te-overlay-rgb), .090);
  --te-soft-text:rgba(var(--te-text-2-rgb), .74);
}

.cta,
.cta-primary,
.btn-primary,
.primary-btn,
.buy-btn,
.composer-send,
.btn.btn-primary{
  min-height:54px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--te-cta-a) 0%,var(--te-cta-b) 100%) !important;
  color:var(--te-cta-text) !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  box-shadow:0 16px 34px rgba(255,138,0,.22), inset 0 1px 0 rgba(var(--te-overlay-rgb), .18) !important;
}

.secondary-btn,
.btn-secondary,
.ghost-btn,
.outline-btn,
.btn.btn-secondary{
  min-height:50px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(var(--te-overlay-rgb), .075), rgba(var(--te-overlay-rgb), .035)) !important;
  border:1px solid rgba(var(--te-overlay-rgb), .12) !important;
  color:rgba(248,244,234,.90) !important;
  font-weight:850 !important;
}

.card,
.panel,
.glass-card,
.menu-section,
.settings-section,
.match-card,
.help-card,
legal-panel,
.promo-card,
.video-item,
.history-item,
.empty-state{
  border-radius:24px;
  background:var(--te-card-bg);
  border:1px solid var(--te-card-border);
  box-shadow:0 18px 38px rgba(var(--te-shadow-rgb), .24), inset 0 1px 0 rgba(var(--te-overlay-rgb), .04);
}

.subtitle,
.micro,
.microcopy,
.note,
.empty-copy,
.module-sub,
.mi-sub,
.setting-sub,
.row-sub{
  color:var(--te-soft-text) !important;
  line-height:1.42 !important;
}

.badge,
.chip,
.pill,
.alias-pill,
.state,
.status-pill,
.section-chip,
.mini-chip{
  border-radius:999px !important;
  font-weight:900 !important;
}

.back-btn,
.back,
.back-inline,
.back-chip,
.icon-btn{
  border-radius:50% !important;
}

/* evitar que microacciones se conviertan en CTAs */
.tab-btn,
.seg-btn,
.nav-btn,
.resend-btn,
.tone-btn,
.toggle-btn,
.icon-btn{
  box-shadow:none;
}

/* END v350 final visual consistency */



/* ============================================================================
   v649 — Sin saltos al cambiar de pestaña / abrir overlays
   ----------------------------------------------------------------------------
   El móvil va centrado con margin:auto. Si al navegar entre tabs (o al abrir un
   overlay) la barra de scroll vertical aparece/desaparece, el viewport cambia de
   ancho y todo el contenido se desplaza unos píxeles = "salto". Reservando el
   hueco de la barra de forma estable, el ancho no cambia nunca y la transición
   entre pantallas es fluida. En táctil, además, se evita que el :hover se quede
   "pegado" en el icono tras tocarlo.
   ========================================================================== */
html{ scrollbar-gutter: stable; }
@media (hover: none){
  .nav-btn:hover{ transform: none !important; }
}

/* ============================================================================
   v650 — Nav inferior estable (sin que los iconos se muevan al cambiar de tab)
   ----------------------------------------------------------------------------
   Causa: el footer usa justify-content:space-around y los .nav-btn se dimensionan
   por su contenido (min-width). Cuando el tab activo pasa a negrita (font-weight
   700) su ancho cambia y recoloca a los demás. Como cada pantalla tiene un tab
   activo distinto, los iconos quedaban en posiciones distintas = "se mueven".
   Fix: ancho uniforme fijo (flex:1 1 0). El peso del label ya no altera el
   reparto; los 5 iconos quedan clavados en las mismas posiciones en todas las
   pantallas. Sin desplazamiento en hover.
   ========================================================================== */
footer .nav-btn,
.footer .nav-btn{
  flex:1 1 0 !important;
  min-width:0 !important;
}
footer .nav-btn:hover,
.footer .nav-btn:hover{
  transform:none !important;
}

/* Fondo base por tema para evitar el destello blanco al navegar entre páginas
   (notable sobre todo al entrar en Ajustes, que es la pantalla más pesada). */
html{ background:#0C111B; }
html.theme-light{ background:#EFF1F5; }
html.theme-dark{ background:#0C0D11; }