/* ═══════════════════════════════════════════════════════════════════════════
   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: 12px !important;
    align-items: center !important;
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !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,
  .btn-publish-icon,
  .btn-publish-label,
  a.btn-publish,
  .mob-nav-hide,
  .mob-nav-ai-btn,
  .nav-icon-wrap,
  .nav-logo-text {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* === Logo AV: grande, separado del borde === */
  .nav-logo {
    flex-shrink: 0 !important;
    margin-left: 12px !important;margin-right: 12px !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: 32px !important;
    animation: none !important;
    transform: none !important;
    letter-spacing: -3px !important;
  }

  /* === Botón CÁMARA IA: redondo, fondo blanco como el resto === */
  .btn-camara-ia {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--surface, #fff) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .btn-camara-ia svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--text) !important;
  }
  .btn-camara-badge {
    display: none !important;
  }

  /* === Botón HAMBURGUESA: OCULTO (menú accesible desde tab Tú) === */
  .nav-ham, #ham {
    display: none !important;
    width: 42px !important;
    height: 42px !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: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    gap: 0 !important;
    box-shadow: none !important;
  }
  .nav-ham svg, #ham svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--text) !important;
  }

  /* === Botón LUPA: visible, tamaño correcto === */
  .nav-mob-search-btn, #mob-search-btn {
    display: flex !important;
    width: 42px !important;
    height: 42px !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: 20px !important;
    height: 20px !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: 42px !important;
    height: 42px !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: 20px !important;
    height: 20px !important;
    stroke: var(--text) !important;
  }

  /* === Botón CATEGORIAS: visible === */
  .nav-mob-cats-btn, #mob-cats-btn {
    display: flex !important;
    width: 42px !important;
    height: 42px !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-cats-btn svg, #mob-cats-btn svg {
    width: 20px !important;
    height: 20px !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 en movil ───────────────────────────────────────── */

  /* ── Mapa: fullscreen absoluto en movil ── */

  body.page-mapa main,
  body.page-mapa main#main-content,
  body.page-mapa .dp-wrap,
  body.page-mapa .dp-content,
  body.page-mapa .dp-inner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    height: calc(100vh - 52px - 56px) !important;
    max-height: calc(100vh - 52px - 56px) !important;
    padding-bottom: 0 !important;
  }
  body.page-mapa .dp-page-hdr,
  body.page-mapa .dp-page-title,
  body.page-mapa .dp-page-sub {
    display: none !important;
  }
  body.page-mapa .map-page {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }
  body.page-mapa .map-card {
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.page-mapa .map-split {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  body.page-mapa .map-split > div:first-child {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  body.page-mapa .map-split #map {
    height: 100% !important;
    min-height: 100% !important;
  }
  body.page-mapa #map-ad-list {
    position: fixed !important;
    bottom: 56px !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 180px !important;
    z-index: 850 !important;
    background: var(--surface) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
  }

  /* Topbar del mapa: flotante, minima */
  .map-topbar {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 900 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .map-topbar::-webkit-scrollbar {
    display: none !important;
  }
  .map-topbar .map-btn {
    background: var(--surface) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    border-radius: 99px !important;
    padding: 8px 12px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .map-topbar .map-sel {
    background: var(--surface) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    border-radius: 99px !important;
    font-size: .72rem !important;
    flex-shrink: 0 !important;
  }
  /* Ocultar botones secundarios en la topbar */
  .map-topbar #btn-traffic,
  .map-topbar #btn-satellite,
  .map-topbar #btn-zone,
  .map-topbar #btn-toggle-list {
    display: none !important;
  }

  /* Filtros del mapa */
  #map-filters {
    position: absolute !important;
    top: 50px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 850 !important;
    background: var(--surface) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
    padding: 12px !important;
  }

  /* Botón fullscreen oculto (ya es fullscreen) */
  #btn-fullscreen {
    display: none !important;
  }

  /* Botón volver flotante */
  .map-back-btn {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 950 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Contador de anuncios */
  #map-count {
    position: absolute !important;
    bottom: 70px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 850 !important;
    background: var(--surface) !important;
    border-radius: 99px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
    font-size: .72rem !important;
    padding: 6px 14px !important;
  }

  /* Buscar en esta zona */
  #btn-search-area {
    top: auto !important;
    bottom: 100px !important;
    z-index: 850 !important;
  }

  /* Zoom controls mas grandes */
  .leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    line-height: 40px !important;
  }

  /* Popup del mapa adaptado */
  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px) !important;
  }
  .poc-img img {
    max-height: 140px !important;
  }
  .poc-actions {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Lista de anuncios del mapa */
  #map-ad-list {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 200px !important;
    z-index: 850 !important;
    background: var(--surface) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
  }

  /* Pins con precio visible */
  .av-pin {
    min-width: 36px !important;
    min-height: 36px !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; }
}

/* ── 31. Ocultar subtitulos descriptivos en movil ───────────────────────── */
@media(max-width:768px) {
  .dp-page-sub {
    display: none !important;
  }
}

/* ── 32. Home: carruseles como grid 2 columnas en movil ─────────────────── */
@media(max-width:768px) {
  /* Convertir scroll horizontal en grid 2 columnas (excepto categorias) */
  .scroll-row:not(.cat-tiles-row),
  .av-mini-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    overflow-x: visible !important;
    overflow: visible !important;
    padding: 0 8px !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  /* Categorias: ocultas en todas las paginas (accesibles desde boton navbar) */
  .home-cats-section,
  .scroll-row.cat-tiles-row,
  .cats-grid,
  .cats-section,
  section.home-cats-section,
  [class*="cats-grid"],
  [class*="cat-tiles"],
  .av-cats-scroll,
  section:has(.av-cats-scroll) {
    display: none !important;
  }

  /* Dots/circulos de fotos ocultos en movil */
  .av-card-dots,
  .card-dot,
  .card-dot--active {
    display: none !important;
  }

  /* Las tarjetas dentro ocupan 100% de su celda */
  .scroll-row > a,
  .scroll-row > div:not(.scroll-arrow):not([style*="position:absolute"]),
  .av-mini-scroll > a {
    width: 100% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Fotos de las tarjetas de home: cuadradas */
  .scroll-row > a > div:first-child,
  .av-mini-scroll > a > div:first-child {
    height: auto !important;
    aspect-ratio: 1/1 !important;
  }

  /* Limitar a 4 productos por sección (2 filas x 2 columnas) */
  .scroll-row > a:nth-child(n+5),
  .av-mini-scroll > a:nth-child(n+5) {
    display: none !important;
  }

  /* Quitar padding extra del wrapper */
  .home-section [style*="padding:0 40px"] {
    padding: 0 !important;
  }

  /* Home section con padding correcto */
  .home-section {
    padding: 10px 0 !important;
  }
  .home-wrap {
    padding: 0 8px !important;
  }

  /* Grid de mitades (Continua tu busqueda + Cerca de ti) en una columna */
  .home-section [style*="grid-template-columns:1fr 1fr"],
  .home-section [style*="grid-template-columns: 1fr 1fr"],
  .home-section > div > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 33. Menú hamburguesa como bottom sheet desde tab Tú ────────────────── */
@media(max-width:768px) {
  .mob-menu {
    position: fixed !important;
    bottom: 56px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 850 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,.2) !important;
    animation: bottomSheetUp .3s ease !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ── 34. Como funciona: ocultar datos y accesos directos en movil ───────── */
@media(max-width:768px) {
  .hiw-stats-row {
    display: none !important;
  }
  .hiw-toc-bar {
    display: none !important;
  }
}

/* ── 35. Perfil: ocultar foto grande del header en movil ────────────────── */
@media(max-width:768px) {
  .dp-page-hdr img[style*="border-radius:50%"],
  .dp-page-hdr div[style*="border-radius:50%"] {
    display: none !important;
  }
}

/* ── 36. Comparar sobre la foto (al lado del favorito) ──────────────────── */
.av-card-compare {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: var(--surface);
  border: 1.5px solid var(--border);
  cursor: pointer;
  padding: 5px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  color: var(--text-3);
}
.av-card-compare:hover {
  color: var(--brand);
  background: var(--brand-xs);
  border-color: var(--brand);
}
.av-card-compare.active {
  color: var(--brand);
  background: var(--brand-xs);
  border-color: var(--brand);
}