.responsive-image {
  max-width: 100%;
  height: auto;
  will-change: transform, opacity;
  transition: filter 0.3s ease-out;
}

.responsive-image.loading {
  filter: blur(10px);
  background-color: #f0f0f0;
}

.reading-time {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  color: #6c757d;
  margin: 0.5rem 0;
}

.reading-time-icon {
  margin-right: 0.5rem;
}

.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Optimizaciones para tamaños específicos */
@media (max-width: 768px) {
  .article-content img {
    max-width: 100%;
    margin: 0.5rem auto;
  }
}

/* Evitar efectos de transición si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .responsive-image,
  .reading-progress-bar {
    transition: none;
  }
}