/* IM_HELP_TOPIC_MIDDLE_SCROLL_V3_START
   Desktop help topic layout:
   - Header/footer fijos.
   - Sidebar izquierdo fijo.
   - Solo columna central con scroll.
   No toca legal-pages.css.
*/

@media (min-width: 1024px) {
  /*
   * Solo páginas del shell de ayuda tipo:
   * /seguridad, /seguridad/estafas, /comprar-vender, /envios, etc.
   */
  html:has(body.im-scams-page),
  html:has(body.im-security-page),
  html:has(body.im-help-buy-sell),
  html:has(body.im-help-article),
  body.im-scams-page,
  body.im-security-page,
  body.im-help-buy-sell,
  body.im-help-article {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  /*
   * Contenedor principal dentro del viewport.
   * No se cambia el grid interno de las cards.
   */
  body.im-scams-page main.container,
  body.im-security-page main.container,
  body.im-help-buy-sell main.container,
  body.im-help-article main.container,
  body.im-scams-page main,
  body.im-security-page main,
  body.im-help-buy-sell main,
  body.im-help-article main {
    height: calc(100dvh - 142px) !important;
    max-height: calc(100dvh - 142px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Página topic completa.
   */
  body.im-scams-page .im-help-topic-page,
  body.im-security-page .im-help-topic-page,
  body.im-help-buy-sell .im-help-topic-page,
  body.im-help-article .im-help-topic-page {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
   * Layout de sidebar + contenido.
   * Solo ajustamos altura/overflow, sin rediseñar columnas.
   */
  body.im-scams-page .im-help-topic-layout,
  body.im-security-page .im-help-topic-layout,
  body.im-help-buy-sell .im-help-topic-layout,
  body.im-help-article .im-help-topic-layout {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  /*
   * Sidebar fijo.
   * No tiene scroll propio para comportarse como el resto de páginas ayuda.
   */
  body.im-scams-page .im-help-topic-sidebar,
  body.im-scams-page .im-help-topic-side,
  body.im-scams-page .im-help-topic-aside,
  body.im-scams-page aside,
  body.im-security-page .im-help-topic-sidebar,
  body.im-security-page .im-help-topic-side,
  body.im-security-page .im-help-topic-aside,
  body.im-security-page aside,
  body.im-help-buy-sell .im-help-topic-sidebar,
  body.im-help-buy-sell .im-help-topic-side,
  body.im-help-buy-sell .im-help-topic-aside,
  body.im-help-buy-sell aside,
  body.im-help-article .im-help-topic-sidebar,
  body.im-help-article .im-help-topic-side,
  body.im-help-article .im-help-topic-aside,
  body.im-help-article aside {
    position: sticky !important;
    top: 84px !important;
    align-self: start !important;
    max-height: calc(100dvh - 164px) !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  /*
   * Columna central: único scroll.
   */
  body.im-scams-page .im-help-topic-main,
  body.im-scams-page .im-help-topic-content,
  body.im-scams-page .im-help-topic-article,
  body.im-security-page .im-help-topic-main,
  body.im-security-page .im-help-topic-content,
  body.im-security-page .im-help-topic-article,
  body.im-help-buy-sell .im-help-topic-main,
  body.im-help-buy-sell .im-help-topic-content,
  body.im-help-buy-sell .im-help-topic-article,
  body.im-help-article .im-help-topic-main,
  body.im-help-article .im-help-topic-content,
  body.im-help-article .im-help-topic-article {
    height: calc(100dvh - 164px) !important;
    max-height: calc(100dvh - 164px) !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;

    padding-right: 12px !important;
    padding-bottom: 150px !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
  }

  /*
   * Fallback si la página no usa exactamente im-help-topic-main/content/article:
   * buscamos la zona que contiene las cards de ayuda y la hacemos scrolleable.
   */
  body.im-scams-page .im-help-topic-layout > :not(aside):not(.im-help-topic-sidebar):not(.im-help-topic-side):not(.im-help-topic-aside),
  body.im-security-page .im-help-topic-layout > :not(aside):not(.im-help-topic-sidebar):not(.im-help-topic-side):not(.im-help-topic-aside),
  body.im-help-buy-sell .im-help-topic-layout > :not(aside):not(.im-help-topic-sidebar):not(.im-help-topic-side):not(.im-help-topic-aside),
  body.im-help-article .im-help-topic-layout > :not(aside):not(.im-help-topic-sidebar):not(.im-help-topic-side):not(.im-help-topic-aside) {
    max-height: calc(100dvh - 164px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 12px !important;
    padding-bottom: 150px !important;
    box-sizing: border-box !important;
  }

  /*
   * Barra de scroll elegante solo en la columna central.
   */
  body.im-scams-page .im-help-topic-main::-webkit-scrollbar,
  body.im-scams-page .im-help-topic-content::-webkit-scrollbar,
  body.im-scams-page .im-help-topic-article::-webkit-scrollbar,
  body.im-security-page .im-help-topic-main::-webkit-scrollbar,
  body.im-security-page .im-help-topic-content::-webkit-scrollbar,
  body.im-security-page .im-help-topic-article::-webkit-scrollbar,
  body.im-help-buy-sell .im-help-topic-main::-webkit-scrollbar,
  body.im-help-buy-sell .im-help-topic-content::-webkit-scrollbar,
  body.im-help-buy-sell .im-help-topic-article::-webkit-scrollbar,
  body.im-help-article .im-help-topic-main::-webkit-scrollbar,
  body.im-help-article .im-help-topic-content::-webkit-scrollbar,
  body.im-help-article .im-help-topic-article::-webkit-scrollbar {
    width: 8px !important;
  }

  body.im-scams-page .im-help-topic-main::-webkit-scrollbar-thumb,
  body.im-scams-page .im-help-topic-content::-webkit-scrollbar-thumb,
  body.im-scams-page .im-help-topic-article::-webkit-scrollbar-thumb,
  body.im-security-page .im-help-topic-main::-webkit-scrollbar-thumb,
  body.im-security-page .im-help-topic-content::-webkit-scrollbar-thumb,
  body.im-security-page .im-help-topic-article::-webkit-scrollbar-thumb,
  body.im-help-buy-sell .im-help-topic-main::-webkit-scrollbar-thumb,
  body.im-help-buy-sell .im-help-topic-content::-webkit-scrollbar-thumb,
  body.im-help-buy-sell .im-help-topic-article::-webkit-scrollbar-thumb,
  body.im-help-article .im-help-topic-main::-webkit-scrollbar-thumb,
  body.im-help-article .im-help-topic-content::-webkit-scrollbar-thumb,
  body.im-help-article .im-help-topic-article::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(15, 118, 110, .26) !important;
  }
}

/*
 * Móvil/tablet: NO forzamos scroll interno.
 * En móvil debe seguir el scroll natural del body.
 */
@media (max-width: 1023px) {
  body.im-scams-page,
  body.im-security-page,
  body.im-help-buy-sell,
  body.im-help-article {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.im-scams-page main,
  body.im-security-page main,
  body.im-help-buy-sell main,
  body.im-help-article main {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* IM_HELP_TOPIC_MIDDLE_SCROLL_V3_END */