/* Scroll infinito EditMaker 0.8.2
 * CSS base exclusivamente estructural.
 * La apariencia editorial se define desde los CSS independientes
 * de escritorio y móvil disponibles en Ajustes.
 */

#cibeles-scroll-infinito {
  width: 100%;
  clear: both;
}

.csi-article,
.csi-layout,
.csi-main,
.csi-sidebar {
  box-sizing: border-box;
}

/* Estructura de escritorio */
.csi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}

.csi-main {
  min-width: 0;
}

.csi-sidebar {
  position: sticky;
  top: 20px;
}

/* Medios seguros, sin imponer apariencia editorial */
.csi-image img,
.csi-body img,
.csi-body iframe,
.csi-body video,
.csi-article img,
.csi-article iframe,
.csi-article video {
  max-width: 100%;
  height: auto;
}

.csi-body,
.csi-main {
  overflow-wrap: anywhere;
}

.csi-article table {
  max-width: 100%;
}

/* Cargador técnico */
.csi-loader-sentinel {
  min-height: 90px;
  display: grid;
  place-items: center;
}

.csi-loader {
  display: none;
  width: 28px;
  height: 28px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: csi-spin .8s linear infinite;
}

#cibeles-scroll-infinito.is-loading .csi-loader {
  display: block;
}

@keyframes csi-spin {
  to { transform: rotate(360deg); }
}

/* Perfil móvil explícito: no modifica tipografías, márgenes ni colores */
html.csi-editmaker-mobile #cibeles-scroll-infinito .csi-layout,
#cibeles-scroll-infinito[data-csi-profile="mobile"] .csi-layout,
.csi-article--mobile .csi-layout {
  grid-template-columns: minmax(0, 1fr);
}

html.csi-editmaker-mobile #cibeles-scroll-infinito .csi-sidebar,
#cibeles-scroll-infinito[data-csi-profile="mobile"] .csi-sidebar,
.csi-article--mobile .csi-sidebar {
  position: static;
  width: 100%;
}

.csi-article--mobile {
  width: 100%;
}