/* RELCOM — reglas responsive compartidas para páginas internas.
   Este archivo corrige problemas comunes de las páginas heredadas de Joomla.
   Las reglas específicas de una página siguen viviendo en su extraCss. */

/* Las páginas de artículo antiguas no siempre tienen un .sppb-row-container
   que aporte gutters. En desktop usamos el gutter estándar de 15px. */
#sp-main-body .com-content-article__body {
  padding-left: 15px;
  padding-right: 15px;
}

/* En móvil el estándar RELCOM exige al menos 20px a cada lado. */
@media (max-width: 767px) {
  #sp-main-body .com-content-article__body {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Texto justificado heredado del Joomla genera huecos incómodos en líneas
     cortas de teléfonos. La lectura móvil queda alineada a la izquierda. */
  #sp-main-body .com-content-article__body p,
  #sp-main-body .com-content-article__body li,
  #sp-main-body .com-content-article__body h1,
  #sp-main-body .com-content-article__body h2,
  #sp-main-body .com-content-article__body h3,
  #sp-main-body .com-content-article__body h4 {
    text-align: left !important;
  }

  /* Imágenes flotantes que funcionan en desktop deben convertirse en bloques
     normales en móvil para no estrechar el texto ni provocar overflow. */
  #sp-main-body .com-content-article__body img[style*="float: right"],
  #sp-main-body .com-content-article__body img[style*="float:right"],
  #sp-main-body .com-content-article__body img[style*="float: left"],
  #sp-main-body .com-content-article__body img[style*="float:left"] {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 16px auto !important;
  }

  #sp-main-body .com-content-article__body iframe,
  #sp-main-body .com-content-article__body video {
    max-width: 100%;
  }

  #sp-main-body .com-content-article__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  #sp-main-body .com-content-article__body a {
    overflow-wrap: anywhere;
  }

  /* -----------------------------------------------------------------------
     Header de página + breadcrumbs.

     La plantilla Flex fija .sp-page-title a 170px. En teléfonos un título
     largo más los breadcrumbs necesita más altura y el contenido inferior
     termina tapando/cortando las últimas líneas. En móvil la altura debe ser
     determinada por el contenido, no por el valor de escritorio.
  ----------------------------------------------------------------------- */
  #sp-page-title,
  #sp-title,
  #sp-title .sp-column,
  #sp-title .sp-page-title-wrapper {
    overflow: visible !important;
  }

  #sp-title .sp-page-title {
    height: auto !important;
    min-height: 170px;
    padding: 28px 0 30px;
    background-attachment: scroll;
  }

  #sp-title .sp-page-title > .container {
    width: 100%;
  }

  #sp-title .sp-page-title-wrapper h2.page_title {
    margin: 0 0 18px !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #sp-title .mod-breadcrumbs__wrapper {
    margin: 0;
  }

  #sp-title ol.mod-breadcrumbs.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 5px;
    column-gap: 0;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    white-space: normal;
  }

  #sp-title ol.mod-breadcrumbs.breadcrumb > span,
  #sp-title ol.mod-breadcrumbs.breadcrumb > li {
    flex: 0 0 auto;
  }

  #sp-title ol.mod-breadcrumbs.breadcrumb .breadcrumb-item {
    white-space: normal;
  }

  #sp-title ol.mod-breadcrumbs.breadcrumb a,
  #sp-title ol.mod-breadcrumbs.breadcrumb span {
    overflow-wrap: anywhere;
  }
}