/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE APP EXPERIENCE — AnunciosVarios
   Solo aplica en pantallas <= 768px. PC NO se toca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Comportamiento nativo base ──────────────────────────────────────── */
@media(max-width:768px) {

  /* Eliminar bounce/elastic scroll */
  html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  /* Desactivar seleccion de texto en UI (no en contenido) */
  .navbar, .av-bottom-nav, .mob-icon-bar, .av-nav-tab, .btn, .chip,
  .ad-card, .av-card, .action-icon-wrap, .nav-icon-wrap, .mob-icon-btn,
  .cats-grid a, .footer, .hero-inner button, .wlp-btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Tap highlight invisible + efecto de opacidad nativo */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  .av-nav-tab:active, .mob-icon-btn:active, .btn:active, .chip:active,
  .ad-card:active, .av-card:active, .action-icon-wrap:active, .nav-icon-wrap:active,
  .wlp-btn:active, .cats-chip:active {
    opacity: 0.85;
    transform: scale(0.97);
    transition: opacity 60ms, transform 60ms;
  }

  /* Eliminar hover effects (no existen en movil) */
  .ad-card:hover, .av-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--border) !important;
  }
  .av-card:hover .av-card-photo, .ad-card:hover .ad-img img {
    transform: none !important;
  }
  .action-icon-wrap:hover .action-icon-circle {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(232,114,10,.3) !important;
  }

  /* Bloquear long-press menu en imagenes */
  img {
    -webkit-touch-callout: none;
  }

  /* Fuentes del sistema */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  /* Safe area insets */
  body {
    padding-top: env(safe-area-inset-top);
  }

/* ── 2. Navbar móvil tipo app ────────────────────────────────────────────── */
  /* Layout: [AV logo] [cámara] [hamburguesa] [lupa] */

  .navbar {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
  }
  .nav-wrap {
    height: 52px !important;
    padding: 0 14px !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .nav-row-1 {
    height: 52px !important;
    gap: 0 !important;
    align-items: center !important;
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* === OCULTAR TODO excepto los 4 elementos === */
  .nav-search,
  .nav-actions,
  .nav-btn-entrar,
  .nav-btn-registro,
  .nav-user-mobile,
  .user-menu,
  .nav-darkmode,
  .btn-publish,
  .mob-nav-hide,
  .mob-nav-ai-btn,
  .nav-icon-wrap,
  .nav-logo-text {
    display: none !important;
  }

  /* === Logo AV: grande, separado del borde === */
  .nav-logo {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    gap: 2px !important;
  }
  .nav-logo > span:first-child,
  .nav-logo > span[style] {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
  }
  .nav-logo span[style*="font-size"],
  .nav-logo > span > span,
  .nav-logo > span:first-child > span {
    font-size: 28px !important;
    animation: none !important;
    transform: none !important;
    letter-spacing: -3px !important;
  }

  /* === Botón CÁMARA IA: visible, tamaño correcto === */
  .btn-camara-ia {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--brand) !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .btn-camara-ia svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--brand) !important;
  }
  .btn-camara-badge {
    display: none !important;
  }

  /* === Botón HAMBURGUESA: visible, tamaño correcto === */
  .nav-ham, #ham {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    padding: 0 !important;
    flex-direction: row !important;
    gap: 0 !important;
    box-shadow: none !important;
  }
  .nav-ham svg, #ham svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--text) !important;
  }

  /* === Botón LUPA: visible, tamaño correcto === */
  .nav-mob-search-btn, #mob-search-btn {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .nav-mob-search-btn svg, #mob-search-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--text) !important;
  }

  /* === Botón VOLVER: oculto === */
  .nav-mob-back-btn {
    display: none !important;
  }

  /* === Botón FILTROS: visible === */
  .nav-mob-filter-btn, #mob-filter-btn {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  .nav-mob-filter-btn svg, #mob-filter-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--text) !important;
  }

  /* === Ocultar banner publicar y menú móvil publish link === */
  .mob-link--publish {
    display: none !important;
  }

    /* Menú usuario como bottom sheet */
  .user-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,.25) !important;
    animation: bottomSheetUp .3s ease !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }
  .ud-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  .ud-row {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: .84rem !important;
  }
  .ud-header {
    padding: 16px !important;
    border-bottom: 1px solid var(--border) !important;
  }

/* ── 3. Barra de filtros (mob-icon-bar) oculta ──────────────────────────── */

  .mob-icon-bar {
    display: none !important;
  }

/* ── 4. Footer oculto ───────────────────────────────────────────────────── */

  .footer, footer {
    display: none !important;
  }

/* ── 5. Hero OCULTO en móvil (búsqueda ya en navbar) ────────────────────── */

  .av-hero,
  .hero,
  section.av-hero,
  [class*="hero-section"],
  .hero-wrap,
  section[class*="hero"],
  div[class*="hero"] {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  .hero-inner {
    display: none !important;
  }

/* ── 6. Categorias: scroll horizontal ───────────────────────────────────── */

  .cats-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cats-grid::-webkit-scrollbar {
    display: none;
  }
  .cats-grid > * {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    min-width: 70px !important;
    max-width: 90px !important;
  }
  /* Ocultar TODAS las flechas de scroll horizontal */
  .cat-scroll-arrow,
  .cat-scroll-left,
  .cat-scroll-right,
  .scroll-arrow,
  .scroll-arrow-left,
  .scroll-arrow-right,
  .scroll-arrows,
  button[class*="scroll-arrow"],
  button[class*="cat-scroll"] {
    display: none !important;
  }
  .cats-chip, .cats-grid a, .cats-grid > div {
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: .7rem !important;
  }

/* ── 7. Tarjetas de anuncios compactas ──────────────────────────────────── */

  .av-card {
    min-height: auto !important;
    border-radius: 12px !important;
    border-width: 1px !important;
  }
  /* Fotos aspect-ratio 1:1 (cuadradas como Wallapop) */
  .av-card-img {
    padding-top: 100% !important;
    height: 0 !important;
  }
  .ad-img {
    aspect-ratio: 1/1 !important;
    height: auto !important;
  }
  .av-card-photo {
    border-radius: 12px 12px 0 0 !important;
  }
  /* Body de la tarjeta compacto */
  .av-card-body, .av-card .ad-body {
    padding: 8px 10px !important;
  }
  .av-card-title, .av-card .ad-title {
    font-size: .78rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .av-card-price, .av-card .ad-price {
    font-size: .9rem !important;
    font-weight: 900 !important;
  }
  .av-card-meta, .av-card .ad-location {
    font-size: .65rem !important;
  }
  /* Grid 2 columnas como Wallapop */
  #ads-container, .listings-grid, .ads-grid,
  .listings-grid.view-grid, #ads-container.view-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  /* Ad card old style */
  .ad-card {
    border-radius: 12px !important;
    border-width: 1px !important;
  }
  .ad-img {
    aspect-ratio: 1 !important;
  }
  .ad-body {
    padding: 8px 10px !important;
  }
  .ad-title {
    font-size: .78rem !important;
  }
  .ad-price {
    font-size: .88rem !important;
    font-weight: 900 !important;
  }

/* ── 8. Detalle de anuncio ──────────────────────────────────────────────── */

  /* Galeria full-width sin bordes */
  .gal-wrap {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 -14px !important;
  }
  .gal-main {
    border-radius: 0 !important;
  }

  /* Layout detalle una columna */
  .detail-layout {
    padding: 0 !important;
    gap: 0 !important;
  }
  .detail-left {
    padding: 14px !important;
  }
  .detail-sidebar {
    position: static !important;
    padding: 0 14px 100px !important;
  }

  /* Titulo y precio */
  .detail-left h1, .wlp-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }
  .wlp-price, .detail-price {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
  }

  /* Botones de accion fijos abajo */
  .detail-sidebar > div:first-child,
  div[style*="action-icon-circle"] {
    /* Se gestiona con JS para fijar abajo */
  }

/* ── 9. Action bar fija en detalle ─────────────────────────────────────── */

  #detail-action-bar-mobile {
    position: fixed !important;
    bottom: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    padding: 8px 12px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 840 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08) !important;
  }

/* ── 10. Chat fullscreen ────────────────────────────────────────────────── */

  .chat-layout {
    height: calc(100vh - 48px - 64px) !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .chat-messages {
    padding: 12px !important;
  }
  .chat-input-wrap {
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .chat-input-wrap input, .chat-input-wrap textarea {
    font-size: 16px !important; /* Previene zoom en iOS */
  }

/* ── 11. Login/Registro fullscreen ──────────────────────────────────────── */

  .auth-card, .auth-wrap {
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: calc(100vh - 48px) !important;
    padding: 40px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .auth-card h1, .auth-card h2 {
    font-size: 1.4rem !important;
    text-align: center !important;
  }
  .auth-card input[type="text"],
  .auth-card input[type="email"],
  .auth-card input[type="password"] {
    font-size: 16px !important; /* Previene zoom en iOS */
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .auth-card .btn, .auth-card button[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
  }

/* ── 12. Perfil como lista tipo Settings ────────────────────────────────── */

  .dp-sidebar-menu a, .profile-menu a, .mob-links a {
    padding: 14px 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: .88rem !important;
  }

/* ── 13. Flash messages como toasts ─────────────────────────────────────── */

  #av-flash-overlay {
    align-items: flex-start !important;
    padding-top: 60px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
  }
  .av-flash-card {
    pointer-events: auto !important;
    max-width: 90vw !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.15) !important;
    animation: toastSlideIn .3s ease !important;
  }
  @keyframes toastSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

/* ── 14. Bottom nav tabs pulidos ────────────────────────────────────────── */

  .av-bottom-nav {
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -1px 8px rgba(0,0,0,.06) !important;
    background: var(--surface) !important;
  }
  .av-nav-tabs-row {
    height: 56px !important;
  }
  .av-nav-tab {
    font-size: .6rem !important;
    padding: 6px 0 4px !important;
    gap: 2px !important;
  }
  .av-nav-tab svg {
    width: 22px !important;
    height: 22px !important;
  }
  .av-nav-publish {
    width: 48px !important;
    height: 48px !important;
    margin-top: -18px !important;
    box-shadow: 0 4px 16px rgba(232,114,10,.4) !important;
  }
  .av-nav-badge {
    min-width: 18px !important;
    height: 18px !important;
    font-size: .6rem !important;
    font-weight: 900 !important;
    background: #dc2626 !important;
    top: 0 !important;
    right: 50% !important;
    transform: translateX(12px) !important;
  }

/* ── 15. Contenido principal con padding para bars ──────────────────────── */

  main, #main-content, .page-wrap {
    padding-bottom: 130px !important;
    padding-top: 4px !important;
  }
  /* Paginas de detalle necesitan mas espacio para action bar */
  .detail-layout {
    padding-bottom: 160px !important;
  }

/* ── 16. Modales como bottom sheets ─────────────────────────────────────── */

  .modal, [class*="modal"], .popup-overlay {
    align-items: flex-end !important;
  }
  .modal-content, .modal-body, .popup-content, [class*="modal-card"] {
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    animation: bottomSheetUp .3s ease !important;
  }
  @keyframes bottomSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

/* ── 17. Inputs nativos - prevenir zoom iOS ─────────────────────────────── */

  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], textarea, select {
    font-size: 16px !important;
  }

/* ── 18. Galeria de fotos fullscreen al tocar ───────────────────────────── */

  .gal-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .gal-fullscreen img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

/* ── 19. Sticky header en scroll de detalle ─────────────────────────────── */

  .detail-sticky-bar {
    position: sticky !important;
    top: 48px !important;
    z-index: 100 !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    backdrop-filter: blur(12px) !important;
  }

/* ── 20. Animacion del corazon favorito ─────────────────────────────────── */

  .btn-fav.active svg, .wlp-fav-btn.active svg {
    animation: heartBeat .4s ease;
  }
  @keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
  }

/* ── 21. Skeleton loading ───────────────────────────────────────────────── */

  .skeleton, .av-card-skeleton {
    background: linear-gradient(90deg, var(--n100) 25%, var(--n50) 50%, var(--n100) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.5s ease-in-out infinite !important;
    border-radius: 8px !important;
  }
  @keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

/* ── 22. Contador de fotos en tarjeta ───────────────────────────────────── */

  .av-card-photo-count {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    background: rgba(0,0,0,.6) !important;
    color: #fff !important;
    font-size: .6rem !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    z-index: 2 !important;
    backdrop-filter: blur(4px) !important;
  }

/* ── 23. Badge "Nuevo" ──────────────────────────────────────────────────── */

  .av-card-new-badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: #dc2626 !important;
    color: #fff !important;
    font-size: .55rem !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    z-index: 2 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

/* ── 24. Banner sin conexion ────────────────────────────────────────────── */

  #offline-banner {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    background: #dc2626 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 6px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    z-index: 9999 !important;
    display: none !important;
  }

/* ── 25. Transiciones suaves entre paginas ──────────────────────────────── */

  main, #main-content {
    animation: pageIn .15s ease;
  }
  @keyframes pageIn {
    from { opacity: 0.7; }
    to { opacity: 1; }
  }

/* ── 26. Pagina 404 fullscreen ──────────────────────────────────────────── */

  .error-page, .page-404 {
    min-height: calc(100vh - 112px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px !important;
    text-align: center !important;
  }

/* ── 27. Listings wrap sin padding extra ────────────────────────────────── */

  .listings-wrap, .listings-page-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }
  .listings-content {
    padding: 0 !important;
  }

/* ── 28. Publicar - boton con opciones ──────────────────────────────────── */

  .publish-grid, .publish-options {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  .publish-option, .publish-card {
    border-radius: 16px !important;
    padding: 20px !important;
  }

/* ── 29. Subastas y drops responsive ────────────────────────────────────── */

  .auction-grid, .drops-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

/* ── 30. Mapa fullscreen ────────────────────────────────────────────────── */

  .map-container, .map-wrap, #map-container {
    position: fixed !important;
    inset: 48px 0 64px 0 !important;
    z-index: 800 !important;
    border-radius: 0 !important;
    border: none !important;
  }

} /* fin @media(max-width:768px) */


/* ── Splash screen para PWA ─────────────────────────────────────────────── */
@media(display-mode:standalone) {
  #app-splash {
    position: fixed;
    inset: 0;
    background: #E87800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity .5s ease;
  }
  #app-splash.hide {
    opacity: 0;
    pointer-events: none;
  }
  #app-splash .splash-logo {
    width: 80px;
    height: 80px;
    animation: splashPulse 1.5s ease-in-out infinite;
  }
  @keyframes splashPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: .8; }
  }
}

/* ── PWA standalone: ocultar elementos web ──────────────────────────────── */
@media(display-mode:standalone) {
  .navbar { height: 48px !important; }
  .footer, footer { display: none !important; }
  .cookie-banner, .pwa-install-banner { display: none !important; }
}