/* ═══════════════════════════════════════════════
   Me Quiero Ir — Mobile & PWA Styles
   ═══════════════════════════════════════════════ */

/* ── Base móvil ── */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Evitar zoom al hacer focus en inputs (iOS requiere 16px mínimo) */
input, select, textarea {
  font-size: 16px !important;
}

/* ── Safe area (notch iPhone, Dynamic Island) ── */
.nav,
nav {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
main, .main-content, #main-content {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* ── Touch targets mínimos 44px ── */
.btn, button, .nav-link, .nav-tab,
.form-tab, .reaction-btn, .story-item,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}

/* ── Modal en mobile → sheet desde abajo ── */
@media (max-width: 600px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-box {
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Feed y cards ── */
@media (max-width: 600px) {
  .post-card, .card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: -16px;
    margin-right: -16px;
  }
  .stories-bar {
    padding: 0 4px;
    gap: 8px;
  }
  .story-item {
    width: 64px;
  }
  .story-avatar {
    width: 56px;
    height: 56px;
  }
}

/* ── Navegación móvil ── */
@media (max-width: 768px) {
  /* Asegurar que el menú hamburguesa tenga buen tamaño */
  .hamburger, .menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Formularios más usables en móvil ── */
@media (max-width: 600px) {
  .form-group {
    margin-bottom: 14px;
  }
  .form-group label {
    font-size: 14px;
  }
  .password-field input {
    font-size: 16px !important;
  }
}

/* ── Foro en móvil ── */
@media (max-width: 600px) {
  .thread-card {
    padding: 14px;
  }
  .vote-controls {
    flex-direction: row;
    gap: 8px;
  }
}

/* ── Splash screen PWA (se ve al abrir la app) ── */
@media (display-mode: standalone) {
  /* Ajustes específicos para modo instalado */
  .nav {
    padding-top: max(env(safe-area-inset-top), 12px);
  }
  /* Ocultar hints de browser que no aplican en standalone */
  .browser-only {
    display: none;
  }
}

/* ── Scrollbars ── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--border, #334155);
  border-radius: 4px;
}

/* ── Imágenes responsive ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Bottom nav si se quiere agregar en el futuro ── */
.bottom-nav-spacer {
  height: calc(60px + env(safe-area-inset-bottom));
}